注意事项
垂直显示的盒子，不要设置浮动，只有并排的盒子才要设置浮动。
大盒子带着小盒子跑
构建网页布局时，首先对整个网页进行大块分割，进行浮动设置，，再对分割成的小块进行浮动设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin:0;
padding:0;
}
header {
width:1000px;
height:100px;
margin:0 auto;
/* background-color:#333; */
}
.content {
width:1000px;
height:500px;
margin:20px auto;
/* background-color:#333; */
}
footer {
width:1000px;
height:100px;
margin:20px auto;
background-color:#333;
}
header .logo {
float:left;
width:220px;
height:100px;
background-color:orange;
}
header .login {
float:right;
width:220px;
height:30px;
background-color:orange;
}
nav {
float:right;
width:600px;
height:50px;
background-color:green;
margin-top:20px;
}
.content .ad {
float:left;
width:300px;
height:500px;
background-color:rgb(0, 255, 149);
}
.content main {
float:right;
width:680px;
height:500px;
/* background-color:steelblue; */
}
.content main .banner {
width:680px;
height:380px;
background-color:orange;
}
.content main .pics {
width:680px;
height:100px;
/* background-color:orange; */
margin-top:20px;
}
.content main .pics ul {
list-style:none;
}
.content main .pics ul li {
float:left;
width:160px;
height:100px;
background-color:blue;
margin-right:10px;
}
.content main .pics ul li:last-child {
width:170px;
margin-right:0;
}
</style>
</head>
<body>
<header>
<div class="logo"></div>
<div class="login"></div>
<nav></nav>
</header>
<section class="content">
<aside class="ad"></aside>
<main>
<div class="banner"></div>
<div class="pics">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</main>
</section>
<footer></footer>
</body>
</html
