CSS网站元素的设计课件.ppt

3、列CSS代码如下：#left{width:300px;height:300px;background-color:#cccccc;border:2pxsolid#333333;float:left}#right{width:300px;height:300px;background-color:#cccccc;border:2pxsolid#333333;float:left}五、二列右列宽度自适应实现如下：左列右列CSS代码如下：#left{width:300px;height:300px;bac

4、kground-color:#cccccc;border:2pxsolid#333333;float:left}#right{height:300px;background-color:#cccccc;border:2pxsolid#333333;float:left}六、二列固定宽度居中实现如下：右列CSS代码如下：#left{width:300px;height:300px;background-color:#cccccc;border:2pxsolid#333333;float:left}#right{height:300px;height:3

5、00px;background-color:#cccccc;border:2pxsolid#333333;float:left}左列#layout{width:608px;margin:0pxauto;}七、三列浮动中间列宽度自适应#layout{position:absolute;top:20px;left:40px;}2、绝对定位（absolute）：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位。1、相对

6、定位（relative）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。如：七、三列浮动中间列宽度自适应实现如下：左列右列中列#left{position:absolute;width:100px;height:300px;background-color:#cccccc;border:2pxsolid#333333;top:0px;left:0px;}#right{position:absolute;width:100

7、px;height:300px;background-color:#cccccc;border:2pxsolid#333333;top:0px;right:0px;}#center{height:300px;background-color:#cccccc;border:2pxsolid#333333;margin-left:104px;margin-right:104px;}八、高度自适应实现如下：Html