使用CSS样式为 ul列表增加样式值垂直导航
下面我们讲一下如何利用CSS来控制ul的显示样式，是ul在垂直排列效果的基础上实现
（１）为列表添加背景颜色；【使用DIV控制背景】
（２）在每个列表项开头添加显示图片；
如果对HTML的ul列表控件不是很熟悉的话，请参考我的另一篇文章《HTML学习笔记之列表控件 无序列表 ul（Unordered List） 、有序列表 ol（Ordered List） 、定义列表 dl（Definition List）》。
实现这个效果总结了三种方式，下面依次介绍：
先来一个无样式的ul列表：
<div><h4>简单列表</h4>
<ul>
<li><a href="http://www.baidu.com/" target="_blank">HomePage</a></li>
<li><a href="http://www.baidu.com/" target="_blank">Div+CSS教程</a></li>
<li><a href="http://www.baidu.com/" target="_blank">CSS布局实例</a></li>
<li><a href="http://www.baidu.com/" target="_blank">CSS2.0教程 </a></li>
<li><a href="http://www.baidu.com/" target="_blank">CSS在线手册</a></li>
<li><a href="http://www.baidu.com/" target="_blank">Web标准</a></li>
<li><a href="http://www.baidu.com/" target="_blank">XHTML教程</a></li>
</ul>
</div>
接着我们看看CSS更改ul列表的代码：
方式一：在li元素中使用List-Style-image控制属性增加图标
/*
=======================================================================================
更改列表符号为图标的无序列表
使列表符号图片和列表文字对齐
=======================================================================================
=======================================================================================
方法一：使用list-style-image属性对齐
注意： 需要vertical-align:bottom 的属性值配合使用
=======================================================================================
*/
#ImageNav1
{
background-color:#22C1EF; /* div背景色 */
}
#ImageNav1 ul
{
white-space: nowrap; /* 文本换行：强制一行显示 */
}
#ImageNav1 li{
/* margin 和 padding的顺序：上、右、下、左 */
margin: 0px 0px 0px 30px; /* margin 左边框30像素*/
padding:0px 0px 0px 5px; /* 上、右、下、左 */
list-style-type:none; /* 无列表符号样式 */
list-style-image:url('../img/17_48x48.png'); /* 列表项符号引用的图片 */
border:solid 1px Black; /* 边缘样式 */
}
#ImageNav1 li a
{
line-height:48px; /* 行间距：48px */
vertical-align:bottom; /* 使文本上下居中对其*/
}
效果：
方式二：在li中使用img 和 a 元素结合模拟“方式一”效果
/*
=======================================================================================
方法二：使用在li中使用img 和 a 元素结合模拟方法一的效果
注意： 需要在 img元素 中设定vertical-align:middle属性
在 a元素 中设定vertical-align:middle属性是无效的
=======================================================================================
*/
#ImageNav2{
background-color:#22C1EF; /* div背景色 */
}
#ImageNav2 ul{
white-space: nowrap; /* 文本换行：强制一行显示 */
}
#ImageNav2 li{
/* margin 和 padding的顺序：上、右、下、左 */
margin: 0px 0px 0px 30px; /* margin 左边框30像素*/
padding:0px 0px 0px 5px; /* 上、右、下、左 */
list-style-type:none; /* 无列表符号样式 */
}
#ImageNav2 li a{
padding: 0px 0px 0px 5px; /* 文字与图片的距离 */
}
#ImageNav2 li img{
vertical-align:middle; /* 是图片和文字居中对齐*/
}
效果：
方式三：在li中使用background-image属性实现“方式一”效果
/*
=======================================================================================
方法三：在li中使用background-image属性
注意： li中的 line-height 和 background-position 属性
=======================================================================================
*/
#ImageNav3{
background-color:#22C1EF; /* div背景色 */
}
#ImageNav3 ul{
white-space: nowrap; /* 文本换行：强制一行显示 */
}
#ImageNav3 li{
/* margin 和 padding的顺序：上、右、下、左 */
margin: 0px 0px 0px 30px; /* margin 左边框30像素*/
padding:0px 0px 0px 5px; /* 上、右、下、左 */
list-style-type:none;
line-height:48px; /* 行间距 */
text-indent:48px; /* 文字缩进48像素，避免与图表重叠 */
background-image:url('../img/17_48x48.png'); /* 背景图片充当列表符号图像 */
background-repeat:no-repeat; /* 背景样式不重复 */
}
效果：
以上就是使用CSS来显示ul元素的简单方法，如果要调整 图片和文字之间距离请参考样式中 margin 和 padding 属性。
优质内容筛选与推荐>>
1、python之系统编程 --线程
2、Spring aware相关接口 浅析
3、这是一条立了Flag的不归路
4、树的最低公共祖先和主方法
5、MySQL 时间戳（Timestamp）函数