-
列表图片
-
背景列表
-
翻转列表
-
水平导航
-
内边距与外边距
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.垂直导航栏
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构造列表5个浏览器兼容顶格
- CSS构造列表5个浏览器兼容顶格
- CSS构造列表5个浏览器兼容顶格
- CSS构造列表5个浏览器兼容顶格
- CSS构造列表使用图片作为列表图标
- CSS构造列表使用图片作为列表图标
- CSS构造列表使用图片作为列表图标
- CSS构造列表使用图片作为列表图标
- CSS构造以背景图片作为项目列表图标
- CSS构造以背景图片作为项目列表图标
- CSS构造以背景图片作为项目列表图标
- CSS构造以背景图片作为项目列表图标
- CSS构造内联列表
- ul是区块，display:inline把区块改成内联
- li也是区块，display:inline把区块改成内联
- 这里的 display 属性是块级值的设置,定义是否要成为块 . Inline 是是内联,block 是区块.
- 背景图片和内联列表
- 小圆点图片不会掉，也变成内联
- li也是区块，display:inline把区块改成内联
- 这里的 display 属性是块级值的设置,定义是否要成为块 . Inline 是是内联,block 是区块.
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;
}
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;
}