常见网页布局
展示：
代码：自己写
样式：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
/*设置样式的第一步：清除内外边距*/
*{
margin: 0;
padding: 0;
}
li{
/*删除li自带的小圆点*/
list-style: none;
}
.top{
height:50px;
background-color: dimgrey;
}
.banner{
width: 980px;
height: 150px;
background-color: grey;
/*上下给个边距10px，左右自动即可*/
margin:10px auto;
}
.box{
width: 980px;
margin: 0 auto;
height: 300px;
background-color: pink;
}
/*找到.box中的li*/
.box li{
height: 300px;
width: 237px;
background-color: green;
/*添加浮动，改变li按照块级元素纵排列的样式*/
float: left;
/*增加边距*/
margin-right: 10px;
}
.box .last{
margin-right: 0;
}
.footer{
height: 50px;
margin-top: 10px;
background-color: gray;
}
</style>
<body>
<!--使用快捷键写多个div盒子
.top+.banner+.box+.footer 然后点击tab键补齐
-->
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
<!--快捷键ul>li*4{$}，然后tab键补齐-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>
问题：看图，要想三个都显示在同一行，float:left.
原因：浮动会压住下面的标准流，而不会压住固定的标准流。
问题：三个盒子如何布局？
原因：浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流.
总结：一浮全浮
都会提前准备一个标准流的高度供给浮动使用(也就是规定范围)。
问题？所有的父盒子都必须有高度吗？不！如图所示。
463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
