23 , CSS 构造列表与导航

最新推荐文章于 2022-07-09 15:20:49 发布

柳志军

最新推荐文章于 2022-07-09 15:20:49 发布

阅读量628

点赞数 1

CC 4.0 BY-SA版权

分类专栏： DIV+CSS

本文链接：https://blog.youkuaiyun.com/lzjgame/article/details/88924063

DIV+CSS 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了如何使用CSS来构造各种类型的列表，包括背景列表、翻转列表、水平导航和垂直导航。通过调整`display`属性、设置内边距与外边距、使用背景图片作为列表图标等技巧，实现列表样式的丰富变化。同时，文章还展示了如何创建具有动态效果的导航条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列表图片
背景列表
翻转列表
水平导航
内边距与外边距

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;

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

Margin: 0 0 0 10px;

Padding: 0 0 0 15px;

}

6.垂直导航栏

Drubjs Menu
Beer
Spirits
Cola
Lemonade
Tea
Coffee
Ul {

List-style-type:none;

Margin:5px;

Padding:2px

Width: 160px;

Font-size: 12px;

}

Li {

Background: #ddd;

Margin: 0;

Padding: 2px 10px;

Border-left: 1px solid #fff;

Border-top: 1px solid #fff;

Border-right: 1px solid #666;

Border-bottom: 1px solid #aaa;

}

7.创建垂直翻转的列表

ul {

margin: 0;

padding: 0;

list-style-type: none;

}

Ul a{

Display: block;

Width: 200px;

Height: 40px; /39px/

Line-height: 40px; /39px/

Color:#000;

Text-decoration: none;

Background: #94b8E9 url(images/pixy-rollover.gif) no-repeat left center; /left bottom/

Text-indent: 50px;

}

a:hover {

background-position: right bottom;

}

8.创建水平导航条

ul {

Margin: 0;

Padding: 0 2em;

List-style: none;

line-height: 2.1em;

Width: 720px;

Background: #faa819 url(images/mainNavBg.gif) repeat-x;

}

ul li {

float: left;

}

ul a {

color:#fff;

padding: 0 10px;

background: url(images/divider.gif) repeat-y left top;

text-decoration: none;

}

1CSS构造列表内边距与外边距
CSS构造列表内边距与外边距
- CSS构造列表5个浏览器兼容顶格
- CSS构造列表5个浏览器兼容顶格
- CSS构造列表5个浏览器兼容顶格
- CSS构造列表5个浏览器兼容顶格
　　2CSS构造列表使用图片作为列表图标 CSS构造列表使用图片作为列表图标
- CSS构造列表使用图片作为列表图标
- CSS构造列表使用图片作为列表图标
- CSS构造列表使用图片作为列表图标
- CSS构造列表使用图片作为列表图标
　　3CSS构造以背景图片作为项目列表图标 CSS构造以背景图片作为项目列表图标
- CSS构造以背景图片作为项目列表图标
- CSS构造以背景图片作为项目列表图标
- CSS构造以背景图片作为项目列表图标
- CSS构造以背景图片作为项目列表图标
　　4CSS构造内联列表 CSS构造内联列表
- CSS构造内联列表
- ul是区块，display:inline把区块改成内联
- li也是区块，display:inline把区块改成内联
- 这里的 display 属性是块级值的设置,定义是否要成为块 . Inline 是是内联,block 是区块.
外面的　　5CSS背景图片和内联列表背景图片和内联列表
- 背景图片和内联列表
- 小圆点图片不会掉，也变成内联
- li也是区块，display:inline把区块改成内联
- 这里的 display 属性是块级值的设置,定义是否要成为块 . Inline 是是内联,block 是区块.
外面的　　6垂直导航栏垂直导航栏
　　7创建垂直翻转的列表创建垂直翻转的列表
Display: block;
Width: 200px;
Height: 40px; /39px/
Line-height: 40px; /39px/
Color:#000;
Text-decoration: none;/去掉下划线/
Background: #94b8E9 url(images/pixy-rollover.png) no-repeat left center; /left bottom/
Text-indent: 50px;/将段落的第一行缩进 50 像素：/
}
a:hover {
background-position: right bottom;
}
　　8创建水平导航条创建垂直翻转的列表
ul {
List-style-type: none;
width:800px;
Margin:0;
Padding:0;
background: #faa819 url(images/6.gif) repeat-x;
float: left;
line-height: 26px;
font-size: 12px;
text-align:center;

}
ul li {
float: left;
background: url(images/5.png) no-repeat right center;
width: 100px;

}
ul li a {
color:red;
text-decoration: none;
}