div+css技术，网页前端必学技术。
1、大家可以从这看起
实例
当看到
“第
12
天
:
校验及常见错误”时你
会对
Div+Css
有一定的了解
现在咱先来看一些比较常用属性
font
字体
color
颜色
font-size
字体大小
text-align
文本位置
background
背景
margin
外补丁
padding
内补丁
border
边框
float
布局
这些在苏昱的
Css
手册（这是
HTML
版）里边都可以找到，可以具体看看。
2、CSS
布局常用的方法：
float:none|left|right
取值：
none:
默认值。对象不飘浮
left:
文本流向对象的右边
right:
文本流向对象的左边
它是怎样工作的，看个一行两列的例子
xhtml
代码：
<div id="wrap">
<div id="column1">
这里是第一列
</div>
<div id="column2">
这里是第二列
</div>
<div
class="clear"></div>
/*
这是违背
web
标准意图的，只是想说明在它下面
的元素需要清除浮动
*/
</div>
CSS
代码：
#wrap{width:100;height:auto;}
#column1{float:left;width:40;}
3、#column2{float:right;width:60;}
.clear{clear:both;}
position:static|absolute|fixed|relative
取值：
static:
默认值。无特殊定位，对象遵循
HTML
定位规则
absolute:
将对象从文档流中拖出，
使用
left
，
right
，
top
，
bottom
等属性相
对于其最接近的一个最有定位设置的父对象进行绝对定位。
如果不存在这样的父
对象，则依据
body
对象。而其层叠通过
z-index
属性定义
fixed:
未支持。对象定位遵从绝对
(absolute)
方式。但是要遵守一些规范
relative:
对象不可层叠，
但将依据
left
，
right
，
top
，
bottom
等属性在正常
文档流中偏移位置
它来实现一行两列的例子
xhtml
代码：
<div id="wrap">
<div id="column1">
这里是第一列
</div>
<div id="column2">
这里是第二列
</div>
</div>
CSS
代码：
#wrap{position:relative;/*
相对定位
*/width:770px;}
#column1{position:absolute;top:0;left:0;width:300px;}
#column2{position:absolute;top:0;right:0;width:470px;}
他们的区别在哪
?
显然，
float
是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而
position
就不行了，所以一般情况下还是
float
布局！
CSS
常用布局实例
单行一列
body{margin:0px;padding:0px;text-align:center;}
#content{margin-left:auto;margin-right:auto;width:400px;}
两行一列
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}
三行一列
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370
px;}
#content-mid{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}