今天学习的内容是如何用CSS进行网页布局：
1.布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。
2.一列布局：
就是使用三个<div>标签，每个<div>不嵌套，分别用CSS样式设置高度，高度，背景颜色就可以实现一列布局。
如果想让<div>标签的内容居中就在该标签定义的类选择器上加上：margin：0 auto；就可以实现内容居中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px}
div{ text-align:center; font-weight:bold}
.main,.footer{ width:960px; 【任务1】}
.head{ width:100%; height:100px; background:#ccc}
.main{ height:600px; background:#FCC;margin:0 auto;}
.footer{ height:50px; background:#9CF;margin:0 auto;}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>
3.二列布局：
二列布局是在一列布局的基础上，选择一个<div>标签在其中加入两个不相互嵌套的<div>标签，十七选择的标签成为父标签，然后在CSS中定义两个不同的类选择器，用于刚加入的<div>标签，同样可以进行宽度，长度，背景颜色的设置，最后要加入flot：righ;或float:left;就可以实现二列布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:960px; height:600px; margin:0 auto}
.left{ width:300px; height:600px; background:#ccc; float:left; 【任务1】}}/*左浮动样式*/
.right{ width:660px; height:600px; background:#FCC; float:right;【任务2】}/*右浮动样式*/
</style>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
4.三列布局：
三列布局，可以如一列布局一样，设置三个并列的<div>标签，然后在CSS样式里分别定义三个类选择器：在对齐进行设置，三个设置为float型的，或是两边的分别设置为position:absolute;left ;0; top:0;和position:absolute;right:0;top;然后
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc;position:absolute; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; right:0px;top:0; background:#FCC;}
</style>
</head>
<body>
<div class="left">left</div>
<div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div>
<div class="right">right</div>
</body>
</html>
5.混合布局：
混合布局就是在一列布局的基础上形成混合布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{background:gray;margin:0;height:100px;}
.main{height:400px;width:1000px;background:red;}
.left{width:200px;height:400px;float:left;background:blue;}
.right{width:700px;height:400px;float:right;background:green;}
.foot{height:100px;margin-top:0px;background:orange;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
将显示：
481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
