CSS盒子模型-盒子模型应用

最新推荐文章于 2024-03-31 22:00:49 发布

Leemin_ios

最新推荐文章于 2024-03-31 22:00:49 发布

阅读量620

点赞数 2

分类专栏： CSS 基础教程学习笔记

本文链接：https://blog.csdn.net/Leemin_ios/article/details/52192761

版权

CSS 基础教程学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盒子模型应用</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div class="top">
        <div class="top_content"></div>
    </div>
    <div class="body">
        <div class="body_img"></div>
        <!--内容区域-->
        <div class="body_content">
            <div class="body_no"></div>
        </div>
    </div>
    <div class="footing">
        <div class="footing_content"></div>
        <div class="footing_subnav"></div>
    </div>

</body>
</html>

.css

/*通配符，把所有的内边距，外边距调为0*/
*{
    margin: 0px;
    padding: 0px;
}
.top{
    width: 100%;
    height: 50px;
    background-color: black;
}
.top_content{
    width: 75%;
    height: 50px;
    background-color: purple;
    /*外边距为0，自适应会有居中的效果*/
    margin: 0px auto;
}
.body{
    width: 75%;
    /*外边距为0，自适应，会有居中的效果*/
    margin: 20px auto;
    height: 1500px;
    background-color: antiquewhite;

}
.body_img{
    width: 100%;/*是充满body的宽度*/
    height: 400px;
    background-color: darkgoldenrod;
}
.body_content{
    width: 100%;
    height: 1100px;
    background-color: blueviolet;
}
.body_no{
    width: 100%;
    height: 50px;
    background-color: aquamarine;
}
.footing{
    width: 75%;
    height: 400px;
    background-color: brown;
    margin: 0px auto;
}
.footing_content{
    width: 100%;
    height: 330px;
    background-color: cornflowerblue;
}
.footing_subnav{
    width: 100%;
    height: 70px;
    background-color: black;
}