23 , CSS 构造列表与导航

1. 列表图片

2. 背景列表

3. 翻转列表

4. 水平导航

5. 内边距与外边距

Ul {

Margin: 0;

Padding: 0;

}

2. 使用图片作为列表图标

Ul {

Margin: 0;

Padding:0;

Width: 200px;

List-style-image:url(images/list.gif);

Line-height: 150%;

}

3. 以背景图片作为项目列表图标

Ul {

List-style-type:none;

}

Li {

Background: url(images/list.gif) no-repeat left center;

Padding: 0 0 0 25px;

}

4. 内联列表

Ul {

List-style-type:disc;

}

Li {

Display: inline;

}

这里的 display 属性是块级值的设置,定义是否要成为块 .

Inline 是是内联,block 是区块.

5. 背景图片和内联列表

Ul {

List-style-type: none;

}

Li {

Display:inline;

B