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裏,分段的就讓段落標簽去做,分列表的就讓有序或是無序列表去表現。

還是開始講的,標簽本身沒什麽,重點要思考如何應用。

CSS中有序列表的一些特殊代碼形式
以前我們面對這些有著順序或是有數字注明排序的內容時大多是在數據前自行加上一個數值,或是由程序加上這個數值。而如果使用有序列表則不需要這麽麻煩,根本不用自行去填寫序數,當單層列表的時候這種特性似乎並不明...查看完整版>>CSS中有序列表的一些特殊代碼形式
 
CSS手冊簡編:列表屬性
  CSS屬性:  7、列表屬性:  這裏的屬性用來描述列表(list)的一系列屬性。  list-style-type屬性描述用于列表每一項前使用的符號:  屬性名稱: 'list-style-type'  屬性值: disc | circle | square |...查看完整版>>CSS手冊簡編:列表屬性
 
CSS屬性列表
          屬性名稱  字體屬性(Font)  font-family  font-style  font-variant  font-weight  font-size  顔色和背景屬性  Color  Background-color  Background-image  Backgrou...查看完整版>>CSS屬性列表
 
科汛CMS結合CSS 打造清新風格的文章列表效果
  從論壇上來看,還有好些用戶不熟悉css,今天我們說說科汛CMS文章列表標簽的調用並談談如何用css控制列表的效果。希望能對你有所幫助....  新聞列表是一個網站的重要組成元素。我們會經常遇到它,如何處理他的外觀...查看完整版>>科汛CMS結合CSS 打造清新風格的文章列表效果
 
CSS手冊簡編:列表屬性
CSS屬性:7、列表屬性:這裏的屬性用來描述列表(list)的一系列屬性。list-style-type屬性描述用于列表每一項前使用的符號:屬性名稱: 'list-style-type'屬性值: disc | circle | square | decimal | lower-roman |...查看完整版>>CSS手冊簡編:列表屬性
 
諾記1116在通訊錄中“#”和“*”鍵的特殊用法
  進入諾基亞1116通訊錄後,按“#”或“*”會出現說明書中沒有的用法。  (1)長按“#”不放,會顯示此聯系人號碼是存儲在手機上,還是存儲SIM卡上的圖標。  (2)短按“*”鍵,可將聯系人名稱在漢字、字母、數字之...查看完整版>>諾記1116在通訊錄中“#”和“*”鍵的特殊用法
 
CSS定義超鏈接四個狀態的正常順序
正常順序如下:a:link{text-decoration:none ; color:#666 ;}a:visited {text-decoration:none ; color:#666 ;}a:hover {text-decoration:underline ; color:#000 ;}a:active {text-decoration:none ; color:#000 ;}...查看完整版>>CSS定義超鏈接四個狀態的正常順序
 
HTML教程-定義性列表
  定義性列表可以用來給每一個列表項再加上一段說明性文字,說明獨立于列表項另起一行顯示。在應用中,列表項使用標簽<DT>標明,說明性文字使用<DD>表示。在定義性列表中,還有一個屬性是COMPACT,使用...查看完整版>>HTML教程-定義性列表
 
用CSS定義標題的幾個實例
    原文:What is the Best Way to Mark up the Title of a Document?  說明:本文是 《Web Standards Solutions: The Markup and Style Handbook》一書中的一章。書號:ISBN:1590593812。我們會陸續翻譯此書...查看完整版>>用CSS定義標題的幾個實例
 
 
回到王朝網路移動版首頁