CSS盒子应用小案例实现网站的大致分布

最新推荐文章于 2021-12-20 14:35:06 发布

YogLn

最新推荐文章于 2021-12-20 14:35:06 发布

阅读量204

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43488547/article/details/104801461

前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个使用HTML和CSS实现的盒子模型布局案例，包括顶部、主体和底部区域的详细设计，展示了不同元素间的层次结构与样式设置。

HTML代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型得应用</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
    <div class="top">
        <div class="top_content"> </div>
    </div>
    <div class="body">
        <div class="body_image"></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>
</body>
</html>

CSS代码

*{
    margin: 0px;
    padding: 0px;
}

.top{
    width: 100%;
    height: 70px;
    background-color: black;
}
.top_content{
    width:75%;
    height: 70px;
    margin: 0px auto;
    background-color: antiquewhite;
}
.body{
    margin: 20px auto;
    width: 75%;
    height: 1500px;
    background-color: burlywood;
}
.body_image{
    width: 100%;
    height: 400px;
    background-color: blue;   
}
.body_content{
    width: 100%;
    height: 1100px;
    background-color: chartreuse;
}
.body_no{
    width: 100%;
    height: 50px;
    background-color: brown;
}
.footing{
    width: 75%;
    height: 330px;
    background-color: gold;
    margin: 0px auto;
}
.footing_content{
    width: 100%;
    height: 350px;
    background-color:pink;
}
.footing_subnav{
    width: 100%;
    height: 70px;
    background-color: black;
    margin: 0px auto;
}

运行效果
在这里插入图片描述