您现在的位置是：首页 > 学无止境
DIV CSS网页布局中常用的列表元素ul ol li dl
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://www.88web.org" target="_blank">如何上传</a></dd>
<dd><a href="http://www.88web.org" target="_blank">如何录制</a></dd>
<dd><a href="http://www.88web.org" target="_blank">相册视频</a></dd>
<dd><a href="http://www.88web.org" target="_blank">如何订阅</a></dd>
<dd><a href="http://www.88web.org" target="_blank">如何分享</a></dd>
<dd><a href="http://www.88web.org" target="_blank">管理主页</a></dd>
</dl>
<dl>
<dt>帮助说明</dt>
<dd><a href="http://www.88web.org" target="_blank">如何上传</a></dd>
<dd><a href="http://www.88web.org" target="_blank">如何录制</a></dd>
<dd><a href="http://www.88web.org" target="_blank">相册视频</a></dd>
<dd><a href="http://www.88web.org" target="_blank">如何订阅</a></dd>
<dd><a href="http://www.88web.org" target="_blank">如何分享</a></dd>
<dd><a href="http://www.88web.org" target="_blank">管理主页</a></dd>
</dl>
</div>
</body>
</html>
上一篇：DIV+CSS的30条进阶技能
下一篇：PHP负载均衡指南
文章评论
- 登录后评论
点击排行
-
php-fpm安装、配置与优化
转载自：https://www.zybuluo.com/phper/note/89081 1、php中...
-
centos下postgresql的安装与配置
一、安装(以root身份进行)1、检出最新的postgresql的yum配置从ht...
-
Mysql的大小写敏感性
MYSQL在默认的情况下查询是不区分大小写的，例如：CREATE TABLE...
-
关于URL编码
转载自：http://www.ruanyifeng.com/blog/2010/02/url_encoding....
-
header中的Cache-control
网页的缓存是由HTTP消息头中的“Cache-control”来控制的，常见的...