本文详细介绍了如何使用CSS来构造各种类型的列表，包括背景列表、翻转列表、水平导航和垂直导航。通过调整`display`属性、设置内边距与外边距、使用背景图片作为列表图标等技巧，实现列表样式的丰富变化。同时，文章还展示了如何创建具有动态效果的导航条。
-
列表图片
-
背景列表
-
翻转列表
-
水平导航
-
内边距与外边距
Ul {
Margin: 0;
Padding: 0;
}
- 使用图片作为列表图标
Ul {
Margin: 0;
Padding:0;
Width: 200px;
List-style-image:url(images/list.gif);
Line-height: 150%;
}
- 以背景图片作为项目列表图标
Ul {
List-style-type:none;
}
Li {
Background: url(images/list.gif) no-repeat left center;
Padding: 0 0 0 25px;
}
- 内联列表
Ul {
List-style-type:disc;
}
Li {
Display: inline;
}
这里的 display 属性是块级值的设置,定义是否要成为块 .
Inline 是是内联,block 是区块.
- 背景图片和内联列表
Ul {
List-style-type: none;
}
Li {
Display:inline;
B
最低0.47元/天 解锁文章
252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
