css学习之盒子模型应用

来源：互联网发布：js获取表单某个数据编辑：程序博客网时间：2024/05/20 07:33

效果图：

html代码：

<!DOCTYPE html><html lang="en"><head>    <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代码：

*{    margin: 0px;    padding: 0px;}.top{    width:100%;    height:50px;    background-color: black;}.top_content{    width: 75%;    height:50px;    margin:0 auto;    background-color:blue;}.body{    margin:20px auto;    width:75%;    height: 1500px;    background-color: bisque;}.body_img{    width:100%;    height:400px;    background-color: darkorange;}.body_content{    width:100%;    height:1100px;    background-color: blueviolet;}.body_no{    width: 100%;    height:50px;    background-color: aqua;}.footing{    width:75%;    height: 400px;    background-color: darkorchid;    margin:0 auto;}.footing_content{    width:100%;    height: 350px;    background-color: darkseagreen;}.footing_subnav{    width:100%;    height:70px;    background-color: black;}

0 0