div+css布局中UL和LI的使用方法介绍 http://www. | 时间：2010-05-28 
一、清除缩进和项目符
1、清除项目符和缩进：ul {list-style: none; padding-left:0px;}
2、清除缩进 ul {margin:7;list-style-type:disc;}
3、清除缩进 ul {margin-left:20px}
4、清除缩进 ul {margin-left: -24px;}
二、更换项目符漂亮小图标
下面有3种实现方法：
1、简单方法
ul{list-style-image:url(/images/icon.gif);}
这种方法不同的浏览器的显示效果会有一些差异，主要是在图片的垂直位置上。有些浏览器会使图片和列表项文本的中部位置平齐，有的又会显示得高一些，总之就是有些不一致。
2、复杂方法
ul {list-style:none;}
li{background: url(/images/icon.gif) no-repeat 0px 50%; padding-left:17px;}
可以解决上面的浏览器不兼容的问题。首先，清除默认的项目符号，然后加上我们自己的背景图片。no-repeat告诉浏览器不要平铺这张图片，0px 50%告诉背景图片应该位于距左侧0px 且竖直方向位于顶部往下50%处，实际上就是在竖直方向居中。我们在左侧加上了17px的边距，这样那些15px宽5像素高的小图标就能完全显露出来，不会被文本遮挡，并且和文本之间有一点间隔。
3、常规方法
li {background: url(/images/icon.gif) no-repeat 0px 50%; padding-left:17px;}
三、更换项目符为小方块
ul {list-style-type: square;}
list-style-type可以有以下取值：
取值:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
disc:点
circle: 圆圈
square: 正方形
decimal: 数字
decimal-leading-zero: 以一个0开头的数字e.g., 01, 02, 03, ..., 98, 99
lower-roman: 小写罗马文字i, ii, iii, iv, v, /etc.
upper-roman: 大写罗马文字I, II, III, IV, V, /etc.
lower-greek: 小写阿拉伯文字α, β, γ, ...
lower-latin: 小写拉丁文a, b, c, ... z
upper-latin: 大写拉丁文A, B, C, ... Z
armenian: 亚美尼亚数字
georgian: 乔治亚数字an, ban, gan, ..., he, tan, in, in-an, ...
lower-alpha: 小写拉丁文a, b, c, ... z
upper-alpha: 大写拉丁文A, B, C, ... Z
none: 无(取消所有的list样式)
inherit:继承
四、行列排法
1、默认为纵向横向，无须设定。
2、横向排列，对<li>设定左对齐：li{float:left; }
2、多行多列排列：一是设定<li>左对齐：li{float:left; }；二是确定<ul>的宽度和<li>的宽度；一个<li>是一列，第一排横<li>个数之和等于<ul>的宽度。
五、<li>与<ul>浏览器兼容
兼容浏览器 在CSS中加：
list-style-position: outside; 六、<li>与<ul>列表应用实例
1、用无序列表（<li>）也可以代替表格（<table>）制作横向的导航列表
html代码
<ul id="minitabs">
<li><a href="/" >网站</a></li>
<li><a href="http://blog./admin.php#" >我的博客</a></li>
<li><a href="/star.php">精华文章</a></li>
<li><a href="/links.php">友情链接</a></li>
</ul>
CSS代码
#minitabs{
height:29px;
font-size:12px;
margin:0px;
padding:0px;
border-bottom:1px solid #696;
}
#minitabs li {
height:25px;
margin:0px;
padding:0px;
display:inline;
list-style-type:none;
}
#minitabs a {
float:left;
line-height:25px;
font-weight:bold;
margin:0px 10px 0px 10px;
text-decoration:none;
color:#9c9;
}
#minitabs a.active, #minitabs a:hover {
border-bottom:4px solid #696;
color:#363;
}
#minitabs a:hover {
color:#696;
}
我们这里实际做的是去掉了项目符号以及默认的缩进。display:inline;把列表变成水平方向。我们还让列表中所有a元素 float:left; 实际上就是强制它们在水平方向对齐成一行。我们还加上了一些颜色，让链接文本以粗体显示，并且去掉了链接默认的下划线。
2、行列排法100排十行十列
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>1到100 利用CSS+ul+li 排列成十行十列</title>
<style type="text/css">
#mainDiv{
width:490px;
padding:10px;
background-color:#ccc;
overflow:hidden;
}
ul{
list-style:none;
padding:0;
margin:0;
}
li{
width:48px;
float:left;
margin:-1px 0 0 -1px;
border:1px solid #333;
text-align:center;
}
</style></head>
<body>
<div id="mainDiv">
<ul>
<script type="text/javascript">
var i;
for(i=1;i<=100;i++){
document.write("<li>" + i + "</li>");
}
</script>
</ul>
</div>
</body>
</html>
中间用了段js代替。纯CSS用下面的代码替换<script type="text/javascript"> <ul>……</script> </ul>就可以了。
<ul>
<li>1</li>
<li>2</li>
...
<li>100</li>
</ul>
主要要点：
1、确定<ul>的宽度和<li>的宽度；一个<li>是一列，第一排横<li>个数之和等于<ul>的宽度。
2、对<li>设定左对齐：li{float:left; } |
2、行列排法100排十行十列
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>1到100 利用CSS+ul+li 排列成十行十列</title>
<style type="text/css">
#mainDiv{
width:490px;
padding:10px;
background-color:#ccc;
overflow:hidden;
}
ul{
list-style:none;
padding:0;
margin:0;
}
li{
width:48px;
float:left;
margin:-1px 0 0 -1px;
border:1px solid #333;
text-align:center;
}
</style></head>
<body>
<div id="mainDiv">
<ul>
<script type="text/javascript">
var i;
for(i=1;i<=100;i++){
document.write("<li>" + i + "</li>");
}
</script>
</ul>
</div>
</body>
</html>
中间用了段js代替。纯CSS用下面的代码替换<script type="text/javascript"> <ul>……</script> </ul>就可以了。
<ul>
<li>1</li>
<li>2</li>
...
<li>100</li>
</ul>
主要要点：
1、确定<ul>的宽度和<li>的宽度；一个<li>是一列，第一排横<li>个数之和等于<ul>的宽度。
2、对<li>设定左对齐：li{float:left; } |
|
|
