CSS网站布局实录笔记-Part2

1. 浮动式布局

float： left， right

清理：clear：left， both

何时选用浮动定位：

（1）距中布局

（2）横向宽度可百分比缩放

（3）需要借助margin，padding，border属性

2.定位布局

（1）绝对定位：完全脱离了文档流与浮动模型，独立于其他对象而存在。

采用position：absolute进行top, right, bottom, left设置

出现元素重叠时，可以采用z-index属性设置重叠的先后顺序

（2）相对定位：就是浮动定位与绝对定位的扩展方式，它使得被设置元素保持与原始位置相对，并不破坏其原始位置的信息。

可以相对定位中使用绝对定位：jsfiddle.net/ru1rzvm2/

3.网站导航

（1）横向导航

给li元素设置float：left，并设置li里面的a标签对象为display：block，设置宽度和高度，这样就可以把一段文本变为一个块状元素，从而设置他的外边距，内边距，边框等属性。

jsfiddle.net/ru1rzvm2/2/

（2）纵向导航

可以使用div+h1+h2        jsfiddle.net/ru1rzvm2/4/

（3）下拉导航

横向菜单：使用ul li，在li元素里再包含ul li  jsfiddle.net/ru1rzvm2/6/

纵向菜单：利用relative+absolute来定位   jsfiddle.net/ru1rzvm2/7/

4. 背景属性：

background: 背景色(background-color)    背景图片(background-image)     背景平铺模式(background-repeat)        背景滚动模式(background-attachment)     背景定位(background-position)