html中共有3种列表:无序列表ul、有序列表ol、定义列表dl。
1、无序列表:
<ul>
<li>……</li>
<li>……</li>
</ul>
看一款关于ul li菜单实例
* { margin:0; padding:0; }
ul{ list-style:none;}
ul#nav { background:#f3c; height: 245px; width: 133px; padding-top:10px; }
ul#nav li a{ display:block;height: 20px; width: 133px; text-align:center; padding:10px 0;}
html代码
<ul id="nav">
<li><a href="clothes.jsp教程">服饰</a></li>
<li><a href="food.jsp" >食品</a></li>
<li><a href="digital.jsp" >数码</a></li>
<li><a href="computer.jsp" >电脑耗材</a></li>
<li><a href="makeup.jsp" >日用品</a></li>
<li><a href="decorations.jsp" >装饰品</a></li>
</ul>
ul是最常用到的列表,一般的新闻列表都是通过ul实现的。其中li是没有顺序性的,就是并列关系。通过设置list-style样式可以控制li前边显示点或圈等(具体查看在线手册)。在具体操作中,列表前边的小图标都是通过背景图来实现的。
2、有序列表:
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
有序列表在实际中用到的比较少,顾名思义,里边的li是有顺序的。可以通过设置来实现li前边显示“1,2,3”或其他顺序(具体查看在线手册)。
1、定义列表:
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>