最新消息:

ol ul li dt dl dd 几个元素的解释

网页设计 李金龙 3243浏览 0评论

今天早上在看一个网站的左导航布局的时候发现他们用了很多的DL DT DD 但是自己很少使用这个东西,现在发出来给大家看一下
DIV +CSS网页布局中常用的列表元素ul ol li dl dt dd用法解释,块级元素div尽量少用,和table一样,嵌套越少越好

ol 有序列表。

<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>


表现为:

1……
2……
3……

ul 无序列表,表现为li前面是大圆点而不是123

<ul>
<li>……</li>
<li>……</li>
</ul>

浏览器中默认一般都是阿拉伯数字为列表编号,那么是否可以有别的类型呢?有,属性为“type”,不过提供的类型不多,只有五种:

类型值 生成样式 序列举例
A 大写字母 A、B、C、D、E
a 小写字母 a、b、c、c、e
I 大写罗马数字 I、II、III、IV、V
i 小写罗马数字 i、ii、iii、iv、v
1 阿拉伯数字 1、2、3、4、5

很多人容易忽略 dl dt dd的用法
dd、dt标签是是列表用的。
dl 内容块
dt 内容块的标题    用来创建列表中的上层项目
dd 内容        用来创建列表中最下层项目

dt和dd都必须放在dl标志对之间

可以这么写:

<dl>
<dt>标题title</dt>
<dd>内容content1</dd>
<dd>内容content2</dd>
</dl>

创建一个普通列表

<html> 
<head> 
<title>一个普通列表</title> 
</head> 
<body text="blue"> 
<dl> 
  <dt>网站建设分类</dt> 
    <dd>智能网站</dd> 
    <dd>标准网站</dd> 
    <dd>美工网站</dd> 
  <dt>网站推广</dt> 
    <dd>SEO优化</dd> 
    <dd>书生商友</dd> 
    <dd>百度推广</dd> 
</dl> 
</body> 
</html> 

此例在浏览器中的显示如下:

网站建设分类
智能网站
标准网站
美工网站
网站推广
SEO优化
书生商友
百度推广

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

转载请注明: » ol ul li dt dl dd 几个元素的解释

发表我的评论
取消评论

表情