053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

DIV CSS网页布局中常用的列表元素ul ol li dl dt dd解析

时间:2017-08-21

DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义,块级元素div尽量少用,和table一样,嵌套越少越好 

  ol 有序列表。 

Example Source Code <ol> 
<li>……</li> 
<li>……</li> 
<li>……</li> 
</ol> 
  表现为: 

Example Source Code …… 
2…… 
3…… 
  ul 无序列表,表现为li前面是大圆点而不是123 

Example Source Code <ul> 
<li>……</li> 
<li>……</li> 
</ul> 
  很多人容易忽略 dl dt dd的用法 

Example Source Code   dl 内容块 
  dt 内容块的标题 
  dd 内容 
  可以这么写: 

Example Source Code <dl> 
<dt>标题</dt> 
<dd>内容1</dd> 
<dd>内容2</dd> 
</dl> 
  dt 和dd中可以再加入 ol ul li和p 
  理解这些以后,在使用div布局的时候,会方便很多,w3c提供了很多元素辅助布局

********************************************************************************************************************

有个朋友问,关于dl,dt ,dd标签怎么用,我就回答了他,在此我就帖出来吧

平时我都喜欢用ul ,li 来进行布局,那么我们进入xhtml代码时期,那么怎么不用最新的东西呢?

大概的用法:

  了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition description”,定义描述)创建的。<dt>给出了术语名,<dd>标记给出了术语的定义。

也就是说<dt>用来创建列表中的上层项目,<dd>用来创建列表中最下层项目,<dt>和<dd>都必须放在<dl>< /dl>标志对之间。

实例如下:

<!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>
<style >
#d    {width:940px;margin:0 auto;}
#d dl   {float:left;text-align:left;width:292px;display:inline;margin:10px 0 8px 20px;border-right:1px solid #b4c5da;}
#d dt   {font-weight:bold;margin:0 0 10px;}
#d dd   {float:left;width:96px;margin:0;}
#d dd a {line-height:22px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>雪乌鸦的IT生活</title>
</head>
<body>
<div id="d" >
     <dl>
    <dt>帮助说明</dt>
    <dd><a href="http://hi.baidu.com/718e" target="_blank">如何上传</a></dd>
    <dd><a href="http://hi.baidu.com/718e" target="_blank">如何录制</a></dd>
    <dd><a href="http://hi.baidu.com/718e" target="_blank">相册视频</a></dd>
    <dd><a href="http://hi.baidu.com/718e" target="_blank">如何订阅</a></dd>
    <dd><a href="http://hi.baidu.com/718e" target="_blank">如何分享</a></dd>
    <dd><a href="http://hi.baidu.com/718e" target="_blank">管理主页</a></dd>
   </dl> 
        <dl>
    <dt>帮助说明</dt>
    <dd><a href="http://hi.baidu.com/718e" target="_blank">如何上传</a></dd>
    <dd><a href="http://hi.baidu.com/718e" target="_blank">如何录制</a></dd>
    <dd><a href="http://hi.baidu.com/718e" target="_blank">相册视频</a></dd>
    <dd><a href="http://hi.baidu.com/718e" target="_blank">如何订阅</a></dd>
    <dd><a href="http://hi.baidu.com/718e" target="_blank">如何分享</a></dd>
    <dd><a href="http://hi.baidu.com/718e" target="_blank">管理主页</a></dd>
   </dl> 
      </div> 
</body>
</html>

相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP