css+div技术.docVIP

开始学习，因为刚开始不懂，所以先拿别人的Div+Css页面看，当初我选择的是网页设计师这个站，上边有有很多实例 大家可以从这看起 实例 当看到 “第12天:校验及常见错误”时你会对Div+Css有一定的了解 现在咱先来看一些比较常用属性 font 字体color 颜色font-size 字体大小text-align 文本位置background 背景margin 外补丁padding 内补丁border 边框float 布局 这些在苏昱的Css手册（这是HTML版）里边都可以找到，可以具体看看。 ------------------------------------------------------------------------------------------------------------------------------------------------ 下边是实例 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;} #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:370px;} #content-mid{margin-left:auto;margin-right:auto;width:400px;} #content-end{margin-left:auto;margin-right:auto;width:400px;} 单行两列 #bodycenter{width:700px;margin-right:aut