2、两列布局：说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动。
3、三列布局：两侧定宽中间自适应,首先设置父级元素的宽度，可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动，设置margin，调整间距。同样注意清除浮动的影响。
4、混合布局：在一列布局的基础上，保留top和foot部分，将中间的main部分改造成两列或三列布局，小的模块可以再逐级同理划分。
CSS英文全称：Cascading Style Sheets(层叠样式表)是为了丰富网页布局的样式，在CSS没有出来之前，大家会用表格来进行分割布局，很不方便，CSS出来后就好多了。
我们平时所访问的都是服务器反馈到浏览器的HTML页面，但是正如上面说的，HTML无法满足新时代网站拥有者的表达需求，我们就会在HTML代码中加入适当的CSS代码来合理展现新的样式。
例如：
<html>
<head>
<title>测试页<title>
<style type="text/css">
.cs{width:100%height:160pxtext-align:centerline-height:160pxbackground:#f0f0f0}
.csl{width:20%height:160pxfloat:leftbackground:#fff}
.csr{width:20%height:160pxfloat:rightbackground:#fff}
</style>
</head>
<body>
<div class="cs">
<div class="csl">
<p>左框内容</p>
</div>
<div class="csr">
<p>右框内容</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html><html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Document</title>
<style>
*{ padding: 0margin: 0}
.clearfix:after{clear: bothcontent: "."display: blockheight: 0visibility: hidden}
.clearfix{display: block*zoom:1}
body{ background: #ccc}
/* 右上导航 */
#all{ width: 100%height: 100%}
.Top_right{ width: 100%padding-top: 1%}
.Top_right span{margin:10px}
.right{ float: right}
/* 输入框 */
.Import{ margin: 0 autowidth: 50%padding-top: 15%}
.Img{ text-align: center}
.box{ text-align: center}
/* 底部版权 */
.Bottom{ width: 30%margin: 0 auto}
.copy{text-align: centerpadding-top: 20%}
</style>
</head>
<body>
<div id="all">
<div class="Top_right clearfix">
<div>
<span>导航1</span>
<span>导航2</span>
<span>导航3</span>
<span>导航4</span>
<span>导航5</span>
</div>
</div>
<div>
<div>
<img src="" alt="图片地址">
</div>
<div>
<textarea name="box1" rows="2" cols="100"></textarea>
</div>
</div>
<div>
<div>
<img src="" alt="二维码">
</div>
<div>{版权}</div>
</div>
</div>
</body>
</html>
