Html中 ul/ol/dir/menu/dl效果

最新推荐文章于 2022-01-05 11:34:30 发布

在象茯菊

最新推荐文章于 2022-01-05 11:34:30 发布

阅读量486

点赞数

分类专栏： 11年新浪博客笔记重整汇总文章标签： html css

本文链接：https://blog.csdn.net/jakeat/article/details/86325779

版权

11年新浪博客笔记重整汇总专栏收录该内容

28 篇文章 1 订阅

订阅专栏

HTML文档中使用的列表主要有无序列表(ul)、排序列表(ol)、目录列表(dir)、菜单列表(menu)、描述性列表(dl)五种类型。

例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<p style="color:red;">这个是&lt;ul&gt;&lt;li&gt;无序列表</p>
<ul>
<li>这是第1行</li>
<li>这是第2行</li>
<li>这是第3行</li>
<li>这是第4行</li>
</ul>
<hr />
<p style="color:red;">这个是&lt;ol&gt;&lt;li&gt;排序列表</p>
<ol>
<li>这是第1行</li>
<li>这是第2行</li>
<li>这是第3行</li>
<li>这是第4行</li>
</ol>
<p style="color:red;">这个是&lt;ol&gt;&lt;li&gt;排序列表+start属性值（start=“9”）</p>
<ol start="9">
<li>这是第9行</li>
<li>这是第10行</li>
</ol>
<hr />
<p style="color:red;">这个是&lt;dir&gt;&lt;li&gt;目录列表</p>
<dir>
<li>这是第1行目录</li>
<li>这是第2行目录</li>
<li>这是第3行目录</li>
<li>这是第4行目录</li>
</dir>
<hr />
<p style="color:red;">这个是&lt;menu&gt;&lt;li&gt;菜单列表</p>
<menu>
<li>这是第1行菜单</li>
<li>这是第2行菜单</li>
<li>这是第3行菜单</li>
<li>这是第4行菜单</li>
</menu>
<hr />
<p style="color:red;">这个是&lt;dl&gt;&lt;dt dd&gt;描述性列表</p>
<dl>
<dt>师范学院</dt>
<dd>包括数学专业，物理专业，外语专业，心理教育专业等等</dd>
<dt>计算机科学与技术</dt>
<dd>计算机软件理论</dd>
<dd>硬件专业</dd>
<dd>应用专业</dd>
</dl>
</body>
</html>

很多人容易忽略 dl dt dd的用法:
dl 内容块
dt 内容块的标题
dd 内容
可以这么写：

标题

内容1

内容2

dt 和dd中可以再加入 ol ul li和p,理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局。

LI代码的格式化:

A).运用CSS格式化列表符：

以下是引用片段：
ul li{
list-style-type:none;
}

B).如果你想将列表符换成图像，则：

以下是引用片段：
ul li{
list-style-type:none;
list-style-image: url(/blog/images/icon.gif);
}

C).为了左对齐，可以用如下代码：

以下是引用片段：
ul{
list-style-type:none;
margin:0px;
}

D).如果想给列表加背景色，可以用如下代码：

以下是引用片段：
ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}

E).如果想给列表加MOUSEOVER背景变色效果，可以用如下代码：

以下是引用片段：
ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }说明：display:block;这一行必须要加的，这样才能块状显示！

F).LI中的元素水平排列,关键FLOAT:LEFT：

以下是引用片段：
ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}