1）3个主要盒子自动居中，盒子宽1000px；header，bottom盒子高100px，背景颜色浅灰； （2）header中的图片：宽300px，圆角，设置合适的外边距； （3）文字：红色，幼圆，修改margin值为2px，首行缩进； （4）section中每组图片的外边距为上下50px，左右20px；每行显示两组图片，用<br>标签换行，注意修改元素类型为行内块。 （5）设置section下组1中span标签为行内块，宽高140px*140px，圆形，背景颜色darkyan，框线为白色5px双实线 （6）各自设置背景图片，调整图片的大小，位置。 （7）组2中的图片：宽146px，黑色2px的点线，背景色白色。 （8）对bottom中的图片设置合适的宽、外边距及边框。

以下是对应代码：

<style>
    /* 盒子居中 */
    .container {
        width: 1000px;
        margin: 0 auto;
    }
    /* 头部样式 */
    header {
        height: 100px;
        background-color: #f2f2f2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
    }
    header img {
        width: 300px;
        border-radius: 50%;
        margin-right: 20px;
    }
    header p {
        font-family: 幼圆;
        font-size: 16px;
        color: red;
        margin: 2px 0 0 2px;
        text-indent: 2em;
    }
    /* 主体内容样式 */
    section {
        margin-top: 50px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .box {
        width: 460px;
    }
    .box img {
        width: 100%;
    }
    .box:nth-child(odd) {
        margin-right: 20px;
    }
    .box:nth-child(even) {
        margin-left: 20px;
    }
    /* 组1中span标签样式 */
    .box1 span {
        display: inline-block;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background-color: darkcyan;
        border: 5px double white;
        overflow: hidden;
    }
    .box1 span img {
        width: 100%;
    }
    /* 组2中图片样式 */
    .box2 img {
        width: 146px;
        border: 2px dotted black;
        background-color: white;
        margin-bottom: 50px;
    }
    /* 底部样式 */
    footer {
        height: 100px;
        background-color: #f2f2f2;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    footer img {
        width: 200px;
        margin: 0 20px;
        border: 2px solid black;
        border-radius: 50%;
    }
</style>

<div class="container">
    <header>
        <img src="header.jpg" alt="header">
        <p>这是一段红色的幼圆字体的文字，设置了2px的边距和首行缩进</p>
    </header>
    <section>
        <div class="box box1">
            <span><img src="box1.jpg" alt=""></span>
            <img src="box2.jpg" alt="">
        </div>
        <div class="box box2">
            <img src="box3.jpg" alt="">
            <img src="box4.jpg" alt="">
            <img src="box5.jpg" alt="">
        </div>
        <div class="box box1">
            <span><img src="box6.jpg" alt=""></span>
            <img src="box7.jpg" alt="">
        </div>
    </section>
    <footer>
        <img src="footer1.jpg" alt="">
        <img src="footer2.jpg" alt="">
        <img src="footer3.jpg" alt="">
    </footer>
</div>