CSS学习教程:用dl dt dd来制作列表

最新推荐文章于 2021-03-16 22:24:57 发布
最新推荐文章于 2021-03-16 22:24:57 发布
阅读量206 收藏
点赞数
文章标签： xhtml

http://www.nongfuit.com/article_show/1615.html

<!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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style> *{ margin:0; padding:0;} body{ font-size:12px; line-height:1.8; padding:10px;} dl{clear:both; margin-bottom:5px;float:left;} dt,dd{padding:2px 5px;float:left; border:1px solid #3366ff} dd{ position:absolute; right:5px;} h1{clear:both;font-size:14px;} </style> </head> <body> <h1>test</h1> <div> <dl> <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> <dd>xxx</dd> </dl> </div> <h1>test</h1> <div> <dl> <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> <dd>xxx</dd> </dl> </div> </body> </html> 



　布局布分当然不用说了：

<h1>标题</h1>
<div>
  <dl>
    <dt><a href="32">·博客里的文章是我自己写的！</a></dt>
    <dd>作者：张三</dd>
  </dl>
  <dl>
    <dt><a href="3232">·博客里的文章是我自己写的！</a></dt>
    <dd>作者：张三</dd>
  </dl>
  <dl>
    <dt><a href="3232">·博客里的文章是我自己写的！</a></dt>
   <dd>作者：张三</dd>
  </dl>...........
</div>

　　css部分：


*{ margin:0; padding:0;}
body{ font-size:12px; line-height:1.8; padding:10px;}
dl{clear:both; margin-bottom:5px;float:left;}
dt,dd{padding:2px 5px;float:left; border:1px solid #3366ff}
dd{ position:absolute; right:5px;}
h1{clear:both;font-size:14px;}

很多人容易忽略 dl dt dd的用法
dl 内容块
dt 内容块的标题
dd 内容
可以这么写：
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
dt 和dd中可以再加入 ol ul li和p
理解这些以后，在使用div布局的时候，会方便很多


dl：代表HTML自定义列表
dt：代表HTML自定义列表组
dd：HTML自定义列表描述

dt主要放label部分，dd主要放input或其他。

注意：和label布局一样，有IE的3px BUG。


iteye_3606
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个用 dl dt dd 做的表格
02-22 2950
看到最近大家流行用dl dt dd布局，我也能照着做了一个，反照表格做的，效果如图： 代码贴出来给大家看看                 dl,div{width:800px;margin:0 auto; text-align:center;}         dt{clear:both;text-align:center;font-weight: bold
CSS之排列系列--dl, dt, dd--使用/教程/实例
IT利刃出鞘的博客
12-05 1万+
本文用示例介绍CSS中的dl, dt, dd的用法。 dl, dt, dd是组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格。 为常用标题+列表型标签。若没有对dl dt dd标签初始CSS样式，默认dd列表内容会缩进。
DL-Dt-DD(做表格Css实现)
08-15
DL-Dt-DD(做表格Css实现)，打破常规用UL 的方式
html dl dt dd标签元素语法结构与使用
zhenghao35791的专栏
02-12 6141
欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！ CSS手册CSS3手册CSS论坛CSS培训CSS任务网闻 DIV+CSS学习与CSS资源分享平台 首页 HTML基础 HTML入门 HTML5 CSS基础 CSS入门 CSS3 CSS Hack CSS工具 PS教程 CSS教程 WEB标准 CS
html dl dt dd标签元素语法结构与使用
lxw1844912514的博客
05-19 2343
dl dt dd认识及dl dt dd使用方法 标签用于定义列表类型标签。 dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一、dl dt dd认识 - TOP html 是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表...
CSS教程:用dl dt dd来制作列表
12-02
总的来说，这个教程展示了如何使用`<dl>`, `<dt>`, 和 `<dd>`元素创建自定义列表，并通过CSS实现特定的样式和布局，这对于那些需要更复杂列表结构的网页设计来说非常有用。同时，这也是一种避免过度依赖特定布局技术...
html css js网页制作实例 dldtdd实现列表功能
最新发布
06-20
html css js网页制作实例 dldtdd实现列表功能
dl,dt,dd制作的CSS垂直菜单
10-30
dl,dt,dd制作的CSS垂直菜单 在Web开发中，菜单是非常常见的交互元素，通常我们使用ul和li标签来创建水平或垂直菜单。但是，今天我们要讨论的是使用dl,dt,dd标签来创建CSS垂直菜单的方法。 dl,dt,dd标签的作用： *...
用标准dl,dt,dd标签抛弃table列表
09-28
为了解决这些问题，前端开发者开始转向使用更加语义化的HTML标签，如dl、dt、dd来代替table布局，特别是在创建小型数据列表和表单时。 dl、dt、dd是HTML中定义列表（Definition List）的三个标签，它们分别代表定义...
DivCSS布局实例 用dl dt dd来制作列表
joerong666
07-16 186
今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方：　　1、如果用UL还布局，右边一栏比较麻烦；　　2、文字外边的边框自适应比较麻烦；　　3、很可能要定死高度；　　所以，细细地看一看这个布局，想一想还是用DL.DT.DD作是合理的：　　1、布局合理一些；　　2、将来扩展很方便；　　3、CSS一定很少； 　　试着写了写，看一看还行！在可控范围内！　　布局布...
HTML之dl、dt、dd（也许这是你还没用过的标签，但它们非常实用）
子非魚
08-27 3万+
一、dl dt dd认识 html 是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格（扩展阅读：table tr td、table tr th表格布局）。 为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。（扩展阅读：ul li、ol li、li
一个DD，DT的CSS样式的问题
oldbig
11-22 1009
首先，如果想要DD标签实现向一样的控制样式（比如说，要使它的list-style生效），则必须得设置：display:list-item;，否则，list-style不生效。 另看代码： [code="java"] 华中 巴陵办 长岭办 荆门办 洛阳办 武汉办 中原办 华东 仪征办 ...
dl dt dd 实例
第三食堂
05-07 1091
前端开发教程 CSS HTML JavaScript jQuery Ajax CSS 基础教程 CSS 简介 CSS 基础语法 CSS 高级语法 CSS 派生
DIV+CSS中标签dl dt dd常用的用法
热门推荐
黄维
11-13 6万+
用来创建一个普通的列表, 用来创建列表中的上层项目， 用来创建列表中最下层项目， 和都必须放在标志对之间。   实例一： 效果:   源码： body{ font-size:12px; line-height:1.8; width:900px; margin:auto;} *{ margin:0; padding:0;} h1{ background:
php dt dd,如何在CSS中实现并排生成多行的dt和dd
weixin_33982454的博客
03-16 343
如何使用CSS并排生成多行的dt和dd，dl·dt·dd标签是称为定义列表的元素，本篇文章将给大家分享关于在CSS中并排生成多行的dt和dd的方法。由于不改变dt元素和dd元素的compact属性在HTML5中已经过时，所以需要在CSS进行调整。如何实现dt和dd并排使用 “定义列表”的描述方法标题目录标题目录像这样，连续写标题和内容，如果想把【标题】和【内容】进行横向排列的时候，你不能像表格那...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值