CSS网站元素设计.ppt

* 上堂课知识要点回顾 一、一列固定宽度 二、一列固定宽度居中 三、一列宽度自适应 四、二列固定宽度 五、二列右列宽度自适应 六、二列固定宽度居中 七、三列浮动中间列宽度自适应 八、高度自适应 九、实例解析 一、 一列固定宽度 一列式布局是一种固定宽度的布局样式，实现如下： div id=“layout”1列固定宽度/div CSS代码如下： #layout{ width:300px; height:300px; background-color:#cccccc; border:2px solid #333333; } 二、 一列固定宽度居中 实现如下： div id=“layout”1列固定宽度/div CSS代码如下： #layout{ width:300px; height:300px; background-color:#cccccc; border:2px solid #333333; margin:0px auto; } 三、 一列宽度自适应 自适应布局能够根据浏览器的大小，自动改变其宽度或高度值， 实现如下： div id=“layout”1列固定宽度/div CSS代码如下： #layout{ width:80%; height:300px; background-color:#cccccc; border:2px solid #333333; } 四、 二列固定宽度 实现如下： div id=“left”左列/div div id=“right”右列/div CSS代码如下： #left{ width:300px; height:300px; background-color:#cccccc; border:2px solid #333333; float:left } #right{ width:300px; height:300px; background-color:#cccccc; border:2px solid #333333; float:left } 五、 二列右列宽度自适应 实现如下： div id=“left”左列/div div id=“right”右列/div CSS代码如下： #left{ width:300px; height:300px; background-color:#cccccc; border:2px solid #333333; float:left } #right{ height:300px; background-color:#cccccc; border:2px solid #333333; float:left } 六、 二列固定宽度居中 实现如下： div id=“right”右列/div CSS代码如下： #left{ width:300px; height:300px; background-color:#cccccc; border:2px solid #333333; float:left } #right{ height:300px; height:300px; background-color:#cccccc; border:2px solid #333333; float:left } div id=“left”左列/div div id=“layout” /div #layout{ width:608px; margin:0px auto; } 七、 三列浮动中间列宽度自适应 #layout{ position:absolute; top:20px; left:40px; } 2、绝对定位（absolute）：将被赋予此定位方法的对象从文档流中 拖出，使用left，right，top， bottom等属性相对于其最接近的一个最 有定位设置的父级对象进行绝对定位。 1、相对定位（relative）：对象不可层叠，依据left，right，top， bottom等属性在正常文档流中偏移自身位置。 如： 七、 三列浮动中间列宽度自适应 实现如下： div id=“left”左列/div div id=“right”右列/div div id=“center”中列/div #left{ position:absolute; width:100px; height:300px; background-color:#cccccc; border:2px solid #333333; top:0px; left:0px; } #right{ position:absolute; width:100px; height:300px;