下面是平时在做练习时，发现的几个不错的网页版面设计：QQ浏览器，360浏览器，小米手机展示页，坚果手机展示页，花瓣网。
相对于国内网站的布局结构，还是要多欣赏一些国外的网站设计。
2、一列布局
一列布局多用于网站的首页，比如360搜索，一列布局的结构简洁明了，主题突出，适合排列简单的内容，不适合多行内容，通常一列布局都是固定宽度的。
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一列布局</title>
<style>
*{margin:0;padding:0;}
#header{
height:50px;
background:blue;
}
#main{
width:960px;
height:800px; /* 在实际开发中不设置列的高度，让高度自适应。 */
background:green;
margin:0 auto;
}
#footer{
width:960px;
height:100px;
background:gray;
margin:0 auto;
}
</style>
</head>
<body>
<div id="header">页头</div>
<div id="main">主体内容</div>
<div id="footer">页脚</div>
</body>
</html>
新浪和网易的首页，就使用了一列布局。
3、单列宽度自适应布局
要想宽度自适应，只需要按照百分比来设置宽度，内容就可以根据浏览器窗口自动调节大小。
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一列自适应布局</title>
<style>
*{margin:0;padding:0;}
#header{
height:50px;
background:blue;
}
#main{
width:80%;
height:800px; /* 在实际开发中不设置列的高度，让高度自适应。 */
