[H5]盒子模型的应用

最新推荐文章于 2023-04-20 23:44:11 发布

风浅月明

最新推荐文章于 2023-04-20 23:44:11 发布

阅读量726

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/wsyx768/article/details/79637487

版权

Web 专栏收录该内容

78 篇文章 1 订阅

订阅专栏

[H5]盒子模型的应用

参照微博首页的削减结构，简单体验一下盒子模型的使用。

[index.html]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型的应用</title>
    <link rel="stylesheet" href="indexCSS.css">
</head>
<body>
    <!--整个页面的父容器-->
    <div id="superDivID">
        <!--header根容器-->
        <div id="headerDivID">
            <div class="headerViewClass">
                <h1>header</h1>
            </div>
        </div>
        <!--content根容器-->
        <div id="contentDivID">
            <!--nav-->
            <div class="navContainerClass">
                <h2>nav</h2>
            </div>
            <!--content-->
            <div class="contentContainerClass">
                <h2>content</h2>
            </div>
            <!--hot-->
            <div class="hotContainerClass">
                <h2>hot</h2>
            </div>
        </div>
        <!--footer根容器-->
        <div id="footerDivID">
            <div class="footerViewClass">
                <table>
                    <tr>
                        <td>
                            <ul>
                                <li>早餐</li>
                                <li>午餐</li>
                                <li>晚餐</li>
                            </ul>
                        </td>
                        <td>
                            <ol>
                                <li>鸡蛋</li>
                                <li>抄手</li>
                                <li>牛肉</li>
                            </ol>
                        </td>
                        <td>
                            <img class="QRCodeImgClass" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=52961750,4241917740&fm=27&gp=0.jpg">
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

[indexCSS.css]

/*使用通配符取消所有标签的内边距&外边距*/
*{
    /*内边距*/
    padding: 0px;
    /*外边距*/
    margin: 0px;
}

#superDivID{
    width: 100%;
    height: 1000px;
    background-color: gray;
}

/*header*/
#headerDivID{
    width: 100%;
    height: 50px;
    background-color: blue;
}
.headerViewClass{
    width: 80%;
    height: 100%;
    background-color: red;
    /*上下外边距为0px 左右为自适应*/
    margin: 0px auto;
}
.headerViewClass h1{
    text-align: center;
}

/*content*/
#contentDivID{
    width: 80%;
    height: 850px;
    background-color: green;
    margin: 0px auto;
}
.navContainerClass{
    width: 10%;
    height: 100%;
    background-color: blueviolet;
    float: left;
}
.contentContainerClass{
    width: 70%;
    height: 100%;
    background-color: blue;
    float: left;
}
.hotContainerClass{
    width: 20%;
    height: 100%;
    background-color: yellow;
    float: left;
}

/*footer*/
#footerDivID{
    width: 100%;
    height: 100px;
    background-color: blue;
}
.footerViewClass{
    width: 80%;
    height: 100%;
    background-color: red;
    margin: 0px auto;
}
.footerViewClass table{
    width: 100%;
    height: 100%;
    /*表格边框*/
    border: 1px solid black;
    /*边框塌陷*/
    border-collapse: collapse;
    text-align: center;
}
.footerViewClass td{
    width: 33.3333%;
    border: 1px solid black;
}
.QRCodeImgClass{
    width: 80px;
    height: 80px;
}

原型：