Html之【ul和li】综合技巧大全(持续更新中..)
一、修改【ul】和【li】的行间距或间距的方法！
首先，用下面的方法，但发现太小了字体也显示一半了。
缩小行li的间距应改变行高line-height
li{line-height:20px;}
其次，用下面的方法还是比较管用！
ul,li{margin:0;padding;0}放在css的第一行。
二、去掉【ul】和【li】前面的点！
#center_b_left ul li {list-style:none;}三、列表综合示例
<!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> <title></title> </head> <body> <b>HTML列表:</b><br /> <hr size="5" color="#FF0000;" /> <br /> <!--第一，无序列表（ul:unordered list)--> <font size="+1" color="#00FF00" face="华文楷体">I.无序列表(Unordered List):</font><br /> 1.默认：<br /> <ul> <li>香蕉</li> <li>苹果</li> <li>橘子</li> </ul> 2.用type属性:<br /> <!--ul type属性的取值： disc:实心圆、circle:空心圆、square:实心方块--> <!--ol type属性的取值： <ul type="I"/"a"/"A"/"1"> --> <ul type="circle"> <li>香蕉</li> <li>苹果</li> <li>橘子</li> </ul> <ul type="square"> <li>香蕉</li> <li>苹果</li> <li>橘子</li> </ul> 3.属性值的混合使用，起强调作用：<br /> <ul type="circle"> <li>香蕉</li> <li type="disc">苹果</li> <li>橘子</li> </ul> <!--第二，有序列表(ol,ordered list)--> <font size="+1" color="#00FF00" face="华文楷体">II.有序列表(Ordered List)：</font><br /> 1.默认：<br /> <ol> <li>篮球</li> <li>排球</li> <li>足球</li> </ol> 2.使用type属性：<br /> <ol type="i"> <li>篮球</li> <li>排球</li> <li>足球</li> </ol> <ol type="A"> <li>篮球</li> <li>排球</li> <li>足球</li> </ol> 3.改变有序列表项的前导编号：<br /> <blockquote> a.<font color="#FF00FF">start</font>属性单独使用：<br /> <ol start="3"> <li>篮球</li> <li>排球</li> <li>足球</li> </ol> b.<font color="#FF00FF">vlaue</font>属性单独使用:<br /> <ol> <li>篮球</li> <li value="5">排球</li> <li>足球</li> </ol> c.<font color="#FF00FF">start、value</font>属性的共同使用：<br /> <ol start="8"> <li>篮球</li> <li value="15">排球</li> <li>足球</li> </ol> </blockquote> <font size="+1" color="#00FF00" face="花纹楷体">III.嵌套列表(Nested Lists)：</font><br /> 1.无序列表中嵌套无序列表:<br /> <ul> <li>饮料</li> <li>水果 <ul> <li>香蕉</li> <li>苹果</li> <li>橘子</li> </ul> </li> <li>蔬菜</li> <li>茶叶</li> </ul> 2.无序列表中嵌套有序列表:<br /> <ul> <li>饮料</li> <li>水果 <ol> <li>香蕉</li> <li>苹果</li> <li>橘子</li> </ol> </li> <li>蔬菜</li> <li>茶叶</li> </ul> 3.有序列表中嵌套有序列表：<br /> <ol> <li>饮料</li> <li>水果 <ol> <li>香蕉</li> <li>苹果</li> <li>橘子</li> </ol> </li> <li>蔬菜</li> <li>茶叶</li> </ol> 4..有序列表中嵌套无序列表：<br /> <ol> <li>饮料</li> <li>水果 <ul> <li>香蕉</li> <li>苹果</li> <li>橘子</li> </ul> </li> <li>蔬菜</li> <li>茶叶</li> </ol> 5.列表的多级嵌套：<br /> <ol> <li>饮料</li> <li>水果 <ul> <li>香蕉</li> <li>苹果 <ul> <li>产自巴西</li> <li>产自中国</li> </ul> </li> <li>橘子</li> </ul> </li> <li>蔬菜</li> <li>茶叶</li> </ol> <!--第三，定义列表（dl,definition list)--> <font size="+1" color="#00FF00">IV.定义列表：</font><br /> 1.定义列表：<br /> <!-- <dl> <dt>第一个标题项</dt> <dd>对第一个标题项的解释性文字</dd> <dt>第二个标题项</dt> <dd>对第二个标题项的解释性文字</dd> </dl> 其中：<dl>用来标识定义列表的开始； <dt>用来标识定义列表的列表项； <dd>用来标识定义列表中列表项的解释性文字。 --> <dl> <!--dt:definition term(定义术语)定义“北京”这个标题项--> <dt>北京</dt> <!--dd:definition definition(定义对术语的解释定义)对“北京”这个标题项的解释--> <dd> 中国的政治中心</dd> <dt>上海</dt> <dd> 中国的经济中心</dd> <dt>深圳</dt> <dd> 中国改革开放的前沿城市</dd> </dl> </body> </html>
