网页设计作业 - 盒子模型布局

::(睡觉) 赶早写的
按图还原图

代码（index）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>盒子模型布局</title>
        <style>
          * {
    /* 清除边距 */
    margin: 0;
    padding: 0;
    /* 全局文字文本居中 */
    text-align: center;
}

body div {
    /*全局大盒子属性:
    宽:800px
    高:
    solid 实线
    红色边框*/
    width: 800px;
    /* 高度前期先取auto，后期进行高度合计计算*/
    height: 1112px;
    border: 2px solid darkred;
    margin: 0 auto;
}

#header {
    /* 顶部大盒子属性 */
    width: 780px;
    height: 240px;
    border: 2px solid darkred;
    margin: 10px auto;
}

#center {
    /* 中部大盒子属性 */
    width: 780px;
    height: 620px;
    border: 2px solid darkred;
    margin: 10px auto;
}

#footer {
    /* 底部大盒子属性 */
    width: 780px;
    height: 200px;
    border: 2px solid darkred;
    margin: 10px auto;
}
/*
全局定义完进行高度累加：
240+620+200+10*4+2*6（边框高度2px）=1112px
*/
.header_top {
    /* header-top属性 */
    width: 760px;
    height: 150px;
    border: 2px dashed skyblue;
    margin: 10px auto;
}

.header_nav {
    /* header-nav属性 */
    width: 760px;
    height: 50px;
    border: 2px dashed skyblue;
    margin: 10px auto;
}

.left_box {
    /* 中部左盒子属性 */
    width: 260px;
    height: 600px;
    border: 2px dashed greenyellow;
    margin: 10px;
    /* 设置为左浮动 */
    float: left;
}

.right_box {
    /* 中部右侧盒子属性 */
    width: 472px;
    height: 600px;
    border: 2px dashed greenyellow;
    margin: 10px auto;
    /* 设置为左浮动 */
    float: left;
}
/*
www.fanl.cn
*/
div div div ul li {
    /* 取消掉无序列表前的. */
    list-style: none;
}

div div div ul li {
    /* 定义全局div里的中部div里的的右侧div里的ul里的单个li标签 */
    width: 133px;
    height: 147px;
    border: 2px dashed silver;
    margin: 10px 10px;
    /* 设置为左浮动 */
    float: left;
}

.right_text {
    width: 448px;
    height: 63px;
}

        </style>
      
    </head>
    <body>
        <!-- 外盒子body div-->
        <div>
            <!-- 顶部大盒子开始 -->
            <div id="header">
                <!-- header-top开始 -->
                <div class="header_top">
                    header-top
                </div>
                <!-- header-nav开始 -->
                <div class="header_nav">
                    header_nav
                </div>
            </div>
            <!-- 中部大盒子开始 -->
            <div id="center">
                <!-- 中部左边盒子开始 -->
                <div class="left_box">
                    left
                </div>
                <!-- 中部右边盒子开始 -->
                <div class="right_box">
                    <!-- 插入无序表（作为每个小box） -->
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <!-- 无序表底部显示right字样 -->
                        <li class="right_text">right</li>
                    </ul>
                </div>
            </div>
            <!-- 底部大盒子开始 -->
            <div id="footer">
                footer
            </div>
        </div>
    </body>
</html>
当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »