盒子模型的实例

昵称65245174 2019-10-03

展开全文

2018-07-30


<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>盒子模型的应用</title>
<link rel='stylesheet' type='text/css' href='inspectionProfiles/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='foot_content'></div>
<div class='foot_subnav'> </div>
</div>
</body>
</html>


*{
margin: 0px;
padding: 0px;
}
.top{
width: 100%;
height: 50px;
background-color: black;
}
.top_content{
width: 75%;
height: 50px;
margin: 0px auto;
background-color: blue;
}
.body{
margin: 0px auto;
width: 75%;
height: 1500px;
background-color: chartreuse;
}
.body_img{
width: 100%;
height: 400px;
background-color: aqua;
}
.body_content{
width: 100%;
height: 1100px;
background-color: brown;
}
.body_no{
width: auto;
height: 50px;
background-color: blueviolet;
}
.footing{
width: 75%;
height: 400px;
background-color: darkcyan;
margin: 0px auto;
}
.foot_content{
width: 100%;
height: 350px;
background-color: darkgreen;
}
.foot_subnav{
width: 100%;
height: 50px;
background-color: dodgerblu；
}