CSS高级应用:定义列表的特殊用法

有序无序单标签很简单,只要知道用法就行,但是关键点我认为不在于知道这个标签长什么样,重点是在于什么样的数据适合使用什么样的列表。什么样的数据是有序的,什么样的数据是无序的?阅读完要思考,这样才能学到东西,知识才能是自己的。

定义列表其形式特别,用法也很特别,相比较无序列表来说用到定义列表的就少很多。也有很多朋友还没有开始使用这个列表,那么下面就来分解一下这个列表的代码:

<dl>
<dt></dt>
<dd></dd>
</dl>

看上面这段代码我们发现这里并没有出现<li>标签,而是由DL、DT、DD三个标签组成,根据外型以及之前的列表我们可以知道,DL是这个列表的一个容器,就像个箱子,不同的是这次箱子里不只有统一标准的单个小盒子了。而是出现两个不同的内容我们怎么理解这个DT与DD呢?从语义上来讲,DT是名称,是标题,而DD是解释,是内容。DT与DD都是盒子,DD只对应解释他上面的一个DT,不能越级或是向下解释。当DT不存在的时候那么DD也就没有存在的意义,而DT是否一定需要DD跟随其后,这点上我还没有找到确切的文献可以说明这一点,但是以我对于定义列表的理解,我认为如果数据中只有DT没有DD那么这就一不能成为定义列表,直接用UL无序列表就可以了。但是当数据中只有某一个或是少数几个没有DD,而大部分都有DD,那么我认为这种形式是可以存在的。

<dl>
<dt>有序列表</dt>
<dt>有序列表</dt>
<dt>有序列表</dt>
<dt>有序列表</dt>
</dl>

以上这种很明显就不合适了,这样的形式就是无序列表,何必要用定义列表呢,从语意上也说不通。

<dl>
<dt>有序列表</dt>
<dd>有序列表就是有序列的数据以列表形成组织而成的数据形式</dd>
<dt>有序列表</dt>
<dd>有序列表就是有序列的数据以列表形成组织而成的数据形式</dd>
<dt>这一句没有解释</dt>
<dt>有序列表</dt>
<dd>有序列表就是有序列的数据以列表形成组织而成的数据形式</dd>
</dl>

上面这种形式则我个人认为是可行的。那么一个DT是否可以带多个DD呢?这点上我同样没有找到文献说明不可以,并且在一些知名的网站中这种一个DT带多个DD的依然很多。我对此的看法是,物殊情况下一个DT带多个DD是可以的,但是一般情况上我认为这种做法还是有所欠缺。从释上来看,多个DD是否表明着多个解释?或是解释内容要分段也不需要让DD来当这只抓耗子的狗。一个DD中完全可以内嵌很多个段落标签。再则从样式应用上来讲,多个DD整体松散,其设计的扩展性不足。比如,当我们要做一个点击DT隐藏对应的DD的效果时,这种多DD的做法就不那么好实现了。所以在不是特殊用途情况下尽可能不要使用一个DT带多个DD的做法,还是把内容放在DD里,分段的就让段落标签去做,分列表的就让有序或是无序列表去表现。

还是开始讲的,标签本身没什么,重点要思考如何应用。

时间: 2025-01-11 13:09:45

CSS高级应用:定义列表的特殊用法的相关文章

学习网页技术CSS高级教程之CSS2 媒介类型

css|高级|教程|网页 媒介类型(Media Types)允许你定义文档以何种媒介被提交.文档可以被显示在显示器.纸媒介或者听觉浏览器等等. 媒介类型 某些CSS属性仅仅被设计为针对某些媒介.比方说"voice-family"属性被设计为针对听觉用户终端.其他的属性可被用于不同的媒介.例如,"font-size"属性可被用于显示器以及印刷媒介,但是也许会带有不同的值.显示器上面的显示的文档通常会需要比纸媒介文档更大的字号,同时,在显示器上,sans-serif字体

CSS高级教程之CSS的定位属性和实例

css|高级|教程 CSS定位属性允许你对元素进行定位. CSS 定位 (Positioning)实例: 定位:相对定位 本例演示如何相对于其正常位置来定位元素. <html><head><style type="text/css">h2.pos_left{position:relative;left:-20px}h2.pos_right{position:relative;left:20px}</style></head>&

学习网页技术CSS高级教程之CSS 伪元素

css|高级|教程|网页 CSS 伪元素被用来将特殊的效果添加到某些选择器. CSS 伪元素 (Pseudo-elements)实例: 制作首字母特效 本例演示如何向文本的首字母添加特效. <html><head><style type="text/css">p:first-letter {color: #ff0000;font-size:xx-large}</style></head><body><p>

Python中函数的参数定义和可变参数用法实例分析

  本文实例讲述了Python中函数的参数定义和可变参数用法.分享给大家供大家参考.具体如下: 刚学用Python的时候,特别是看一些库的源码时,经常会看到func(*args, **kwargs)这样的函数定义,这个*和**让人有点费解.其实只要把函数参数定义搞清楚了,就不难理解了. 先说说函数定义,我们都知道,下面的代码定义了一个函数funcA ? 1 2 def funcA(): pass 显然,函数funcA没有参数(同时啥也不干:D). 下面这个函数funcB就有两个参数了, ? 1

CSS中伪类及伪元素用法详解

原文:CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试:   :active  大致效果为用鼠标点击时,元素增加特效,鼠标松开时,特效消失.多用在按钮的点击上.  写法: 这里id为box的是一div块,在css中首先设置了他的基本样式,下面为加入:active伪类后需要修改的样式. 未点击时: 点击之后: :active.:hove

十四 定义列表 Definition Lists

十四 定义列表 Definition Lists前面讲述了无序列表和有序列表,但一些像Peter Cushing's Doctor,经常忘记定义列表.这也许是因为它们和无序列表.有序列表比起来比较特殊而且没有用处.但一些列表条件和表述(像术语表),就必须使用定义列表. dl元素像ul和ol元素,建立列表,不过比它们两个多了一个dt元素用来definition term定义条件,接下来的dd定义表述definition description. 一个dt不仅仅只跟一个dd,互相之间可以有好多个.例

简单学习网页制作技术之CSS高级语法知识

css|高级|网页|语法 选择器的分组 你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明.用逗号将需要分组的选择器分开.在下面的例子中,我们对所有的标题元素进行了分组.所有的标题元素都是绿色的. h1,h2,h3,h4,h5,h6 {color: green} 继承及其问题 根据CSS,子元素从父元素继承属性.但是它并不总是按此方式工作.看看下面这条规则: body { font-family: Verdana, sans-serif; } 根据上面这条规则,站点的body元素将

SharePoint 2013开发入门:代码定义列表

在SharePoint的开发中,用Visual Studio自定义列表是经常会用到的,因为很多时候,我们并不会手动创建列表,而手动创建列表在测试服务器和正式机之间同步字段,也很麻烦,所以我们经常用代码来定义列表或者文档库. 尤其在工作流的开发中,我们经常会用到代码定义任务列表,或者历史记录列表,用来存储我们需要存储的相关数据.而在Visual Studio 2013中,定义列表也提供了模板,通过模板创建,我们很容易就可以定义需要的列表了. 下面,让我们简单学习下,如何使用VS定义自定义列表. 1

html有序无序定义列表

 列表-有序列表和无序列表"> 1.无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记.无序列表始于 <ul> 标签.每个列表项始于 <li>. 2.有序列表 同样,有序列表也是一列项目,列表项目使用数字进行标记.有序列表始于 <ol> 标签.每个列表项始于 <li> 标签. 3.定义列表 自定义列表不仅仅是一列项目,而是项目及其注释的组合.自定义列表以 <dl> 标签开始.每个自定义列表项以 &l