日期:2014-05-17  浏览次数:20623 次

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">排球&l