css:ul,ol,li妙用
LI代码的格式化:
A).运用CSS格式化列表符：
ul li{
list-style-type:none;
}
例如下面的：
供求信息
B).如果你想将列表符换成图像，则：
ul li{
list-style-type:none;
font-size:12px;
list-style-image: url("csdnindex_pic35.gif");
vertical-align:middle;
}
例如下面的：
供求信息
C).为了左对齐，可以用如下代码：
ul{
list-style-type:none;
margin:0px;
}
例如下面的：
供求信息
D).如果想给列表加背景色，可以用如下代码：
ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}
例如下面的：
供求信息
E).如果想给列表加MOUSEOVER背景变色效果，可以用如下代码：
ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }
说明：display:block;这一行必须要加的，这样才能块状显示！
例如下面的：
供求信息
F).LI中的元素水平排列,关键FLOAT:LEFT：
ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}
取消ul前缩进:
margin:0px
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#test{
margin-left:10px;
}
#test li{
font-size:12px;
list-style-type:none;
vertical-align:middle;
margin-bottom:3px;
}
.top{
background:url(csdnindex_pic35.gif) 0 3px no-repeat;/*其中0 3px 代表background-position的横坐标和纵坐标*/
}
#test li a:hover{
background:#999;
}
#test li a{
background:#ccc;
margin-left:20px;
color:Black;
text-decoration:none;
width:100%;
display:block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="test">
<li class="top"><a href="javascript:">程序员面试一句话让HR面无人色</a></li>
<li><a href="javascript:">程序员面试一句话让HR面无人色</a></li>
<li><a href="javascript:">程序员面试一句话让HR面无人色</a></li>
</ul>
</div>
</form>
</body>
</html>
示例用到的图标:
