CSS学习笔记（九）对列表应用样式和创建导航条
2013-01-18 15:07
246 查看
1. 基本列表样式
基本列表样式如下：
<ul>
<li>音乐</li>
<li>电影</li>
<li>电视剧</li>
</ul>
一般为了添加定制的列表符号，可以使用list-style-image属性。但是，这种方法对符号图像的位置的控制能力不强
而更常用的方法是关闭列表符号，并将定制的图像作为背景加载列表元素上，然后可以使用背景图像的定位属性精确的控制定制符号的对准方式
一般IE和Opera使用左空白边控制列表的缩进，而Safari和Firefox选择使用左填充
因此，首先要将列表的margin和padding设置为0，从而去掉这个缩进
要去掉默认的符号，只需将列表样式类型设置为none：
ul{
margin:0;
padding:0;
list-style-type:none;
}
添加定制符号，只需在列表的左侧添加填充，为符号流出所需的空间，然后将符号作为背景图像应用于列表项
如果列表项不会跨越多行，那么可以将垂直位置设置为middle或50%，让符号垂直居中
li{
background: url(images/bullet.gif) no-repeat 0 50%;
padding-left:30px;
}
样式图：
2. 创建垂直导航条
利用上面学到的链接样式和CSS翻转可以创建视觉丰富的导航条
首先，创建一个良好的HTML结构：
<ul>
<li><a href="">首页</a></li>
<li><a href="">公司产品</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">公司动态</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">网站地图</a></li>
</ul>
然后去掉默认的符号并将空白边和填充设置为0
ul{
margin:0;
padding:0;
list-style-type:none;
}
我们对列表并不应用样式，而是对其中包含的锚应用样式
为了创建与按钮相似的单击区域，需要将锚的display属性设置为block，然后指定锚的尺寸
示例中，导航按钮是200px宽，40px高，还将行高设置为40px，以便让行文本垂直居中，还有链接的颜色和下划线的关闭
ul a{
display:block;
width:200px;
height:40px;
line-height:40px;
color:#000;
text-decoration:none;
}
使用Pixy翻转技术，将翻转图像作为背景图像应用于锚链接
上面的图示：包含正常状态和鼠标停留状态的单一图像
背景图进行左对准以便露出正常状态图像，锚文本具有50px的缩进，这样他就不会改盖在背景图上面的箭头上
ul a{
display:block;
width:200px;
height:40px;
line-height:40px;
color:#000;
text-decoration:none;
background: #94B8E9 url(images/pixy_rollover.gif) no-repeat left center;
text-indent:50px;
}
如果列表之间存在空文本节点，那么有可能是因为列表项之间存在空格，去掉之就好了
我们会注意到图像的周围的所有边上都有实线，当这些图像垂直叠放时会出现双重实线，而我们希望是每项导航条之间只有一条实线，为了解决这个为题，将背景图像对准锚的底部，然后将链接的高度减少1px（这样就相当于把顶部的实线给覆盖了）:
ul a{
display:block;
width:200px;
height:39px;
line-height:39px;
color:#000;
text-decoration:none;
background: #94B8E9 url(images/pixy_rollover.gif) no-repeat left bottom;
text-indent:50px;
}
但是这样一来，第一项的顶端实线消失了，为了让第一项顶端实线显示，需把第一项锚的高度恢复为40px
li.first a {
height:40px;
line-height:40px;
}
最后，鼠标停留状态和被选中状态，只需将锚链接上的背景图像移动到右边，露出鼠标停留状态的图像
a:hover , .selected a{
background-position:right bottom;
color:#fff;
}
这种方式一般在除IE以外的所有浏览器都是有效的，IE不知道为什么会在列表项的上下添加额外的空间，为了修复这个bug，需将列表项上的display属性设置为inline：
li{
display:inline;
}
完成样式效果如图：
3. 在导航条中突出显示当前页面
这个概念的工作方式是，在每个页面主体元素中添加一个ID或类名，从而指出用户在哪个页面或部分中
然后，在导航列表中的每一项中添加一个对应的ID或类名，可以使用主体的ID和列表ID/类的唯一组合在站点导航中突出显示当前部分或页面：
<body id="home">
<ul id="mainNav">
<li class="home"><a href="#">首页</a></li>
<li class="production"><a href="#">公司产品</a></li>
<li class="info"><a href="#">公司简介</a></li>
<li class="dy"><a href="#">公司动态</a></li>
<li class="contcat"><a href="#">联系我们</a></li>
<li class="map"><a href="#">网站地图</a></li>
</ul>
</body>
为了突出显示当前页面，只需寻找一下ID和类名的组合：
#home #mainNav .home a , #production #mainNav .production a , #info #mainNav .info a , #dy #mainNav .dy a , #contact #mainNav .contact a{
background-position:right bottom;
color:#fff;
cursor:default;
}
如图显示的是对应当首页：
4. 创建水平导航条
首先创建一个简单的无次序的列表：
<ul>
<li><a href="">首页</a></li>
<li><a href="">公司产品</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">公司动态</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">网站地图</a></li>
</ul>
然后，去掉默认符号，并将margin和padding设置为0
示例中水平导航条的宽设置为480px
ul{
margin:0;
padding:0;
list-style:none;
width:480px;
background:#FAA819 url(images/mainNavBg.gif) repeat-x;
}
这个列表当前是垂直的，为了让他水平显示，可以采用两种方法：可以将列表项设置为行内显示，也可以让他们都是向左浮动
本示例使用浮动：
ul li{
float:left;
}
当元素浮动时，他不会占据文档流中的任何空间，因此，父列表实际上没有内容，他就会收缩，从而会隐藏列表背景
有两种方法让父元素包含浮动子元素：一种方法是添加一个进行清理的元素，但会增加不必要的标签；另一种方法是对父元素也进行浮动，并使用某个元素对它进行清理以便换行：
ul{
margin:0;
padding:0;
list-style:none;
width:480px;
float:left;
background:#FAA819 url(images/mainNavBg.gif) repeat-x;
}
为了让水瓶导航条中的链接能像按钮，可以把链接的display属性设置为block
如果希望每个按钮具有固定的尺寸，那么可以显示的设置它的高度和宽度
ul li a{
display:block;
width:80px;
height:30px;
padding:0 0.5em;
line-height:2.1em;
text-decoration:none;
color:#fff;
}
我们希望在每个连接之间创建分割线，将一个分隔线图像作为背景图像应用于每个锚链接的左边
ul li a{
display:block;
width:80px;
height:30px;
padding:0 0.5em;
line-height:2.1em;
background:url(images/divider.gif) repeat-y left top;
text-decoration:none;
color:#fff;
}
导航条中第一个链接的左边有一个不必要的分割线，在第一个列表项上添加一个类并且将背景图像设置为none：
ul .first a{
background:none;
}
最后，翻转状态仅仅是改变链接的颜色
ul a:hover{
color:#333;
}
5. 滑动门标签页式导航
有时候导航条中文本需要扩展，这样文本长短不一，这就需要导航条也需要扩展，滑动门很适合这种应用
tab_left.gif tab_right.gif
创建简单的HTML结构：
<ul>
<li><a href="">首页</a></li>
<li><a href="">公司产品</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">公司动态</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">网站地图</a></li>
</ul>
将margin和padding设置为0，去掉列表符号，并设置导航条的宽度，标签页式导航条也向左浮动以便包含内部的浮动元素
ul{
margin:0;
padding:0;
list-style:none;
width:720px;
float:left;
}
列表元素向左浮动，从而让它水平显示而不是垂直显示，但这次，将组成标签页的两个图像中比较大的图像作为背景图像应用于列表项，由于这个图像形成标签页的右边缘，所以将它定位到右边：
ul li{
float:left;
background:url(images/tab_right.gif) no-repeat top right;
}
锚显示为块级元素以使整个区域可单击，每个标签页的宽度由内容的宽度来决定，设置行高来控制高度
为了完成效果，将标签页的左边图像作为背景图像应用于锚并且对准左边，当标签页改变尺寸时，这个图像总是左对准的，该在大图的上面，盖住左边的硬边缘
li a{
dispaly:block;
padding:0 2em;
line-height:2.5em;
background:url(images/tab-left.gif) no-repeat top left;
text-decoration:none;
color:#fff;
float:left;
}
为了创建翻转效果，只需改变链接颜色：
ul a:hover{
color:#333;
}
效果图如图：
背景图左的不太好（非专业）
基本列表样式如下：
<ul>
<li>音乐</li>
<li>电影</li>
<li>电视剧</li>
</ul>
一般为了添加定制的列表符号，可以使用list-style-image属性。但是，这种方法对符号图像的位置的控制能力不强
而更常用的方法是关闭列表符号，并将定制的图像作为背景加载列表元素上，然后可以使用背景图像的定位属性精确的控制定制符号的对准方式
一般IE和Opera使用左空白边控制列表的缩进，而Safari和Firefox选择使用左填充
因此，首先要将列表的margin和padding设置为0，从而去掉这个缩进
要去掉默认的符号，只需将列表样式类型设置为none：
ul{
margin:0;
padding:0;
list-style-type:none;
}
添加定制符号，只需在列表的左侧添加填充，为符号流出所需的空间，然后将符号作为背景图像应用于列表项
如果列表项不会跨越多行，那么可以将垂直位置设置为middle或50%，让符号垂直居中
li{
background: url(images/bullet.gif) no-repeat 0 50%;
padding-left:30px;
}
样式图：
2. 创建垂直导航条
利用上面学到的链接样式和CSS翻转可以创建视觉丰富的导航条
首先，创建一个良好的HTML结构：
<ul>
<li><a href="">首页</a></li>
<li><a href="">公司产品</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">公司动态</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">网站地图</a></li>
</ul>
然后去掉默认的符号并将空白边和填充设置为0
ul{
margin:0;
padding:0;
list-style-type:none;
}
我们对列表并不应用样式，而是对其中包含的锚应用样式
为了创建与按钮相似的单击区域，需要将锚的display属性设置为block，然后指定锚的尺寸
示例中，导航按钮是200px宽，40px高，还将行高设置为40px，以便让行文本垂直居中，还有链接的颜色和下划线的关闭
ul a{
display:block;
width:200px;
height:40px;
line-height:40px;
color:#000;
text-decoration:none;
}
使用Pixy翻转技术，将翻转图像作为背景图像应用于锚链接
上面的图示：包含正常状态和鼠标停留状态的单一图像
背景图进行左对准以便露出正常状态图像，锚文本具有50px的缩进，这样他就不会改盖在背景图上面的箭头上
ul a{
display:block;
width:200px;
height:40px;
line-height:40px;
color:#000;
text-decoration:none;
background: #94B8E9 url(images/pixy_rollover.gif) no-repeat left center;
text-indent:50px;
}
如果列表之间存在空文本节点，那么有可能是因为列表项之间存在空格，去掉之就好了
我们会注意到图像的周围的所有边上都有实线，当这些图像垂直叠放时会出现双重实线，而我们希望是每项导航条之间只有一条实线，为了解决这个为题，将背景图像对准锚的底部，然后将链接的高度减少1px（这样就相当于把顶部的实线给覆盖了）:
ul a{
display:block;
width:200px;
height:39px;
line-height:39px;
color:#000;
text-decoration:none;
background: #94B8E9 url(images/pixy_rollover.gif) no-repeat left bottom;
text-indent:50px;
}
但是这样一来，第一项的顶端实线消失了，为了让第一项顶端实线显示，需把第一项锚的高度恢复为40px
li.first a {
height:40px;
line-height:40px;
}
最后，鼠标停留状态和被选中状态，只需将锚链接上的背景图像移动到右边，露出鼠标停留状态的图像
a:hover , .selected a{
background-position:right bottom;
color:#fff;
}
这种方式一般在除IE以外的所有浏览器都是有效的，IE不知道为什么会在列表项的上下添加额外的空间，为了修复这个bug，需将列表项上的display属性设置为inline：
li{
display:inline;
}
完成样式效果如图：
3. 在导航条中突出显示当前页面
这个概念的工作方式是，在每个页面主体元素中添加一个ID或类名，从而指出用户在哪个页面或部分中
然后，在导航列表中的每一项中添加一个对应的ID或类名，可以使用主体的ID和列表ID/类的唯一组合在站点导航中突出显示当前部分或页面：
<body id="home">
<ul id="mainNav">
<li class="home"><a href="#">首页</a></li>
<li class="production"><a href="#">公司产品</a></li>
<li class="info"><a href="#">公司简介</a></li>
<li class="dy"><a href="#">公司动态</a></li>
<li class="contcat"><a href="#">联系我们</a></li>
<li class="map"><a href="#">网站地图</a></li>
</ul>
</body>
为了突出显示当前页面，只需寻找一下ID和类名的组合：
#home #mainNav .home a , #production #mainNav .production a , #info #mainNav .info a , #dy #mainNav .dy a , #contact #mainNav .contact a{
background-position:right bottom;
color:#fff;
cursor:default;
}
如图显示的是对应当首页：
4. 创建水平导航条
首先创建一个简单的无次序的列表：
<ul>
<li><a href="">首页</a></li>
<li><a href="">公司产品</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">公司动态</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">网站地图</a></li>
</ul>
然后，去掉默认符号，并将margin和padding设置为0
示例中水平导航条的宽设置为480px
ul{
margin:0;
padding:0;
list-style:none;
width:480px;
background:#FAA819 url(images/mainNavBg.gif) repeat-x;
}
这个列表当前是垂直的，为了让他水平显示，可以采用两种方法：可以将列表项设置为行内显示，也可以让他们都是向左浮动
本示例使用浮动：
ul li{
float:left;
}
当元素浮动时，他不会占据文档流中的任何空间，因此，父列表实际上没有内容，他就会收缩，从而会隐藏列表背景
有两种方法让父元素包含浮动子元素：一种方法是添加一个进行清理的元素，但会增加不必要的标签；另一种方法是对父元素也进行浮动，并使用某个元素对它进行清理以便换行：
ul{
margin:0;
padding:0;
list-style:none;
width:480px;
float:left;
background:#FAA819 url(images/mainNavBg.gif) repeat-x;
}
为了让水瓶导航条中的链接能像按钮，可以把链接的display属性设置为block
如果希望每个按钮具有固定的尺寸，那么可以显示的设置它的高度和宽度
ul li a{
display:block;
width:80px;
height:30px;
padding:0 0.5em;
line-height:2.1em;
text-decoration:none;
color:#fff;
}
我们希望在每个连接之间创建分割线，将一个分隔线图像作为背景图像应用于每个锚链接的左边
ul li a{
display:block;
width:80px;
height:30px;
padding:0 0.5em;
line-height:2.1em;
background:url(images/divider.gif) repeat-y left top;
text-decoration:none;
color:#fff;
}
导航条中第一个链接的左边有一个不必要的分割线，在第一个列表项上添加一个类并且将背景图像设置为none：
ul .first a{
background:none;
}
最后，翻转状态仅仅是改变链接的颜色
ul a:hover{
color:#333;
}
5. 滑动门标签页式导航
有时候导航条中文本需要扩展，这样文本长短不一，这就需要导航条也需要扩展，滑动门很适合这种应用
tab_left.gif tab_right.gif
创建简单的HTML结构：
<ul>
<li><a href="">首页</a></li>
<li><a href="">公司产品</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">公司动态</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">网站地图</a></li>
</ul>
将margin和padding设置为0，去掉列表符号，并设置导航条的宽度，标签页式导航条也向左浮动以便包含内部的浮动元素
ul{
margin:0;
padding:0;
list-style:none;
width:720px;
float:left;
}
列表元素向左浮动，从而让它水平显示而不是垂直显示，但这次，将组成标签页的两个图像中比较大的图像作为背景图像应用于列表项，由于这个图像形成标签页的右边缘，所以将它定位到右边：
ul li{
float:left;
background:url(images/tab_right.gif) no-repeat top right;
}
锚显示为块级元素以使整个区域可单击，每个标签页的宽度由内容的宽度来决定，设置行高来控制高度
为了完成效果，将标签页的左边图像作为背景图像应用于锚并且对准左边，当标签页改变尺寸时，这个图像总是左对准的，该在大图的上面，盖住左边的硬边缘
li a{
dispaly:block;
padding:0 2em;
line-height:2.5em;
background:url(images/tab-left.gif) no-repeat top left;
text-decoration:none;
color:#fff;
float:left;
}
为了创建翻转效果，只需改变链接颜色：
ul a:hover{
color:#333;
}
效果图如图：
背景图左的不太好（非专业）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 精通CSS——chapter6（对列表应用样式和创建导航条）
- 精通CSS高级Web标准解决方案（5、对列表应用样式和创建导航条）
- 对列表应用样式和创建导航条--Css学习笔记（五）
- 第五章 对列表应用样式和创建导航条
- 第6章 对列表应用样式和创建导航条
- css学习-对列表应用样式和创建导航条
- 《精通CSS高级WEB标准解决方案》第五章、对列表应用样式和创建导航条
- CSS——对列表应用样式和创建导航栏
- 创建Material Design风格的Android应用--创建列表和卡片
- 创建Material Design风格的Android应用--创建列表和卡片
- 创建Material Design风格的Android应用--创建列表和卡片
- 创建字符样式并且应用到文档中
- CRM: 创建CheckBox样式的下拉列表
- CSS基础应用学习系列(4)――用CSS对列表应用样式
- 在模板文件.dwt里如何应用样式列表css
- CRM: 创建CheckBox样式的下拉列表
- 创建Material Design风格的Android应用--创建列表和卡片
- 在Excel2010中创建下拉列表输入和条件格式高级应用 刘道军
- 13-应用删除线标记商品特价(文字及列表样式)
- Fireworks样式的应用、创建和修改