DL.DT.DD的布局简单例子

最新推荐文章于 2021-06-22 16:35:14 发布
最新推荐文章于 2021-06-22 16:35:14 发布
阅读量408 收藏
点赞数
分类专栏： css 文章标签： xhtml html border div float css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yeapple886/article/details/2142880
版权
说到无序列表大家很容易的就想到UL和LI
今天在子鼠那里看到了一种新的方式
就是DL .DT .DD
对于有标题或不固定宽度的列表来说很适合
code代码如下:
< 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部分：

<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>
看一下效果：

 HTML代码

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]


如果说定宽？

 HTML代码

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
yeapple886
关注
专栏目录
DL.DT.DD实现左右的布局简单例子第1/2页
10-30
### 使用DL、DT、DD实现左右布局的知识点详解 #### 一、背景介绍与问题提出 在网页设计中，常见的布局需求之一就是实现左文右图或者左标题右描述的效果。这种布局方式不仅美观，还能有效地提升用户体验。本文将通过...
用标准dl,dt,dd标签抛弃table列表
09-28
以下是一个使用dl、dt、dd的例子，对比传统的table布局，可以明显看到代码的简化： 传统的table数据列表： ```html <td class="title">Name: <td class="text">Squall Li <td class="title">Age: ...
dt dl列表布局
weixin_30867015的博客
04-07 185
项目需要中 左边是房屋地址，右边显示几套房屋，如下图显示 ============ 开始想到使用 div标签，里面嵌套几个span，但是不利于对齐显示，一行还可以，多行了不方便 查找使用dl dt布局实现 ---------------------------html--------------------------------------------- <dl> ...
列表布局 dl dt dd格式
致年在学习
11-25 1239
是一组合标签，使用了dt dd最外层就必须使用dl包裹 dl dt dd列表标签的语法 列表标题 列表内容 列表内容 语法解释： 首先dt和dd是放在dl标签内，标签dt与dd处于dl下相同级。 也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签，dd标签可以多个。 dt跟dd必须放在dl里面。 标题一 内容一 内容一
DivCSS布局实例 用dl dt dd来制作列表
lllljz的专栏
06-16 2422
CSS网页布局的一大特点就是列表元素的应用，在传统的表格布局中往往将列表元素作为表格来处理，这样的方式非但不具有语义还产生了许多不必要的代码。 　　今天我们共同学习一款“图文混排CSS列表”的制作。首先从分析一下此列表的特点，然后编写HTML代码，最终应用CSS样式实现最终的效果。 列表的效果如图所示： 用dl dt dd来制作列表" style="margin-top:0px; m
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:
/css中dl dt dd的排版实例说明
小小的祈祷的专栏
09-07 1万+
dl dt dd的使用实例 　　在制作内页的时候,会有三个板块,一个是横行的图片列表.一个是主体的竖列图文列表,一个 是侧边栏的图片列表.对于这种排版方式用dl dt dd列表排版是最好不过的了.先看看我们对这个页面的最初布局图.在写css的时候,最好就要养成画布局图的习惯.这样就可以很清晰的了解整个页面的 css分布.哪里用什么代码,如何布局都一目了然了.从这个布局图看来,有三个地方是用到了dl dt dd的列表.先说一下每个dl dt dd的组合代码. 　　一般情况下,一个图片加一行文字这
html dl dt dd w3c,DL.DT.DD的布局简单例子
weixin_33122261的博客
06-22 244
看一下效果：点击下面的运行，可预览代码效果:*{ 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 #3366...
php dt dd,DL.DT.DD实现左右的布局简单例子
weixin_39921087的博客
03-16 211
这是今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方：1、如果用UL还布局，右边一栏比较麻烦；2、文字外边的边框自适应比较麻烦；3、很可能要定死高度；所以，细细地看一看这个布局，想一想还是用DL.DT.DD作是合理的：1、布局合理一些；2、将来扩展很方便；3、CSS一定很少；试着写了写，看一看还行！在可控范围内！布局布分当然不用说了：标题·博客里的文章是...
html dl dt dd w3c,dl dt dd实现表格布局
weixin_39801714的博客
06-11 140
-dl dt dd表格dl,dt,dd{margin:0;background:#fff5fa;font-size:14px;}dl{margin:0 auto;width:50%;border:1px solid #f8b3d0;border-bottom:none;}dt{font-weight:800;background:#ff99cc;color:#fff;}dt,dd{line-hei...
选择布局.html,布局.html
weixin_30844407的博客
06-08 164
布局 | 拼命赶进度data-level="2.3.11"data-chapter-title="布局"data-filepath="布局.md"data-basepath="."data-revision="Sun Sep 03 2017 23:30:11 GMT+0800 (中国标准时间)"data-innerlanguage="">Introduction1.HTML51.1.常用元素...
XHTML下用dl,dt,dd标签实现翻页的效果代码
10-30
在这个例子中，`<dl>` 被赋予了绝对定位，并设定了宽度和高度，以适应翻页组件的布局需求。 2. **`<dt>` 标签**： `<dt>` 标签用于定义列表中的术语或关键词，通常用来表示一个页面或一组内容的标题。在这里，`<dt...
DD DT DL标签使用示例
09-28
在网页布局和内容展示中，`<dd>`、`<dt>` 和 `<dl>` 标签是HTML语言中用于创建定义列表的重要元素。这些标签在处理功能模块列表、术语解释或者详细信息展示时非常有用，因为它们能为用户提供清晰、有序的信息结构。...
div中的相对定位与绝对定位
03-03 1103
这一段时间打算完全用CSS的DIV编写一个页面，做了两天思绪就有点乱了。有的时候把某一个问题单独抽出来看感觉很简单。而复合起来就难的多,各种各样的问题就来了。程序中最讨厌的就是找BUG了。思路前后衔接不上，捋不清头绪，看的头都大了。家里有两个高手，不过却很少问。就像我的东西一定要从头到尾由我经手来做，那才是我的东西。呵呵～******************************
css的特殊样式ime-mode（特对IE好用）
04-01 726
 是今天做一个发E－mail的页面发现的问题。客户想要在不用切换输入法的情况下，应对不同INPUT转换要填入表单的字符。于是找到这个CSS。很简单，但的确是我职业做到现在才刚刚发现的。这个方法就是：css 之 ime-modecss 之 ime-mode语法：ime-mode : auto | active | inactive | disabled 取值：auto : 默认值。不影
DIV+CSS相册 惊叹的效果！
03-03 586
这是子鼠制作的相册，完全用CSS来表现效果！非常棒，令人惊叹。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"> he
使用overflow:hidden防止框架被撑破
03-03 513
overflow 标签 　　参考语法：　　overflow : visible | auto | hidden | scroll 　　参数：　　visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效　　auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条　　hidd
如何用CSS实现翻页效果？
03-03 473
如何用CSS实现翻页效果？ !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"> head
HTML布局技巧：块级标签与描述 dl/dt/dd 的应用
在HTML中，`<dl>`、`<dt>` 和 `<dd>` 标签是用来创建定义列表的，它们在网页布局中常常被用于图文混编的场景。描述标签的定义如下： `<dl>` 是定义列表的容器，它包含了多个 `<dt>`（定义术语）和 `<dd>`（定义描述...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值