展会信息港展会大全

css ul、ol、dl区别
来源:互联网   发布日期:2016-03-25 15:55:29   浏览:1475次  

导读:html中共有3种列表:无序列表ul、有序列表ol、定义列表dl。1、无序列表:<ul><li>……</li><li>……</li></ul>看一款关于ul li菜单实例...

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>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港