WEB前端設計完美的自定義列表dl，dt，dd

時間 2019-11-07

標籤 web 前端設計完美自定義列表欄目 HTML 简体版

原文原文鏈接

常常會在網頁上看見相似這樣的頁面效果：瀏覽器

下面就應用無懈可擊的WEB設計方案來實現它：（HTML代碼添加在BODY之中，CSS代碼添加在<style></style>之間，<style></style>必定要編輯在<head></head>之間）網絡

HTML代碼：spa

<div id="box">
<dl class="box-left">
      <dt><a href="images/moon1.jpg" target="_blank"><img src="images/suo-moon1.jpg" width="200" height="200" /></a></dt>
      <dd class="box-text">明月幾時有</dd>
      <dd class="box-shuoming">明月幾時有，把酒問青天，不知天上宮闕，今夕是何年；我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。明月幾時有，把酒問青天，不知天上宮闕，今夕是何年；我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。</dd>
    </dl>
    <dl class="box-right">
      <dt><a href="images/fanbb.jpg" target="_blank"><img src="images/suo-fanbb.jpg" width="200" height="200" /></a></dt>
      <dd class="box-text">時尚界一姐</dd>
      <dd class="box-shuoming">范冰冰引領着中國時尚界的潮流，可謂是時尚界的一姐。就連早已成名的楊冪也在追隨者范冰冰，誠然，范冰冰確實有着過人之處，她身上那種天然而然散發出來的氣質不是常人所能匹及。人們說，氣質是由內而外，從一我的的骨子裏往外散發出來的，並非學出來的，也不是裝模做樣就能裝出來的。范冰冰就是這樣一我的，她有着不同凡響的氣質，再加上她的天生麗質，爲無數萬千影迷擁護着。</dd>
    </dl>
    <dl class="box-left">
      <dt><a href="images/renxiang.jpg" target="_blank"><img src="images/suo-renxiang.jpg" width="200" height="200" /></a></dt>
      <dd class="box-text">人體肖像</dd>
      <dd class="box-shuoming">這我的是誰已經忘了，由於沒有網絡只好隨便找來一張圖稍做修改就放在網頁裏了。只能用做網頁的一個小小的點綴，爲完成自定義列表的完美功能而臨時找的一個素材罷了。</dd>
    </dl>
</div>設計

其實上面的文檔結構很是簡單：blog

<div id="box">
    <dl class="box-left">
      <dt><img src="images/suo-moon1.jpg" width="200" height="200" /></dt>
      <dd class="box-text">圖片標題</dd>
      <dd class="box-shuoming">圖片描述</dd>
    </dl>
    <dl class="box-right">
      <dt><img src="images/suo-fanbb.jpg" width="200" height="200" /></dt>
      <dd class="box-text">圖片標題</dd>
      <dd class="box-shuoming">圖片描述</dd>
    </dl>
    <dl class="box-left">
      <dt><img src="images/suo-renxiang.jpg" width="200" height="200" /></dt>
      <dd class="box-text">圖片標題</dd>
      <dd class="box-shuoming">圖片描述</dd>
    </dl>
</div>圖片

僅僅是一個外層DIV包圍了三個自定義列表，若是沒有CSS，這篇文檔結構同樣具備可讀性，不存在文檔內容的缺失，這是無懈可擊方案之一；文檔

來看CSS樣式：（下面的紅色字是對每一行CSS語句的解釋，也叫「註釋」，在運行代碼時要將其註釋，應用get

用這個註釋把全部的紅字都註釋掉，瀏覽器就不會解釋執行這些文字了；或者將這些文字乾脆刪除）class

* { 這個聲明初始化了頁面中全部元素的外邊界和內邊界贊成爲「0」
margin:0;
padding:0;
}
#box { 初始化「盒模型」，設置寬度，由於不肯定高度因此不設高度 float

width: 500px;
border: 2px solid #E6E6E6;
font-size:15px;
font-family:"微軟雅黑";
color:#414141;
margin:20px;
display:inline; 這條聲明能夠處理IE6瀏覽器雙倍MARGIN的問題（BUG）,「例如：同時存在MARGIN-LEFT:20PX;FLOAT:LEFT; ，那麼IE6瀏覽器會出現左側外邊距40px而不是20px」
float:left; 這條可以使外層的DIV不脫離內層元素浮動後的文檔流
}
.box-text { 圖片標題樣式
font-size:150%;
font-weight:bold;
color:#689EE8;
padding-bottom:10px;  圖片標題和圖片描述之間的間距
}
.box-shuoming {    圖片描述樣式
text-indent:2em;   首行縮進
line-height:1.5em;   行高
font-family:"宋體";
color:#707881;
}
#box dl {   對每一個自定義列表的整體樣式
width:480px;   寬度+兩個外邊距=外層DIV的總寬度500px
margin:10px;   縮寫，表示上下左右外邊距都爲10px
margin-bottom:20px;   單獨定義向下外邊距
display:inline;  處理IE6瀏覽器雙倍MARGIN的BUG
float:left;
}
#box dt img {    定義圖片樣式
padding:4px;    內邊距和邊框結合會產生相框的效果
border:1px solid #DCDCDE;    邊框的縮寫，寬度1px，實線，顏色#DCDCDE
border-bottom-color:#7F7F7F; 右側和下邊邊框顏色加深造成陰影效果
border-right-color:#7F7F7F;
}
#box .box-left dt {    設置圖片在左、文字在右的樣式
float:left;
width:210px;    設置浮動時一般要定義寬度，以避免出錯，圖片寬200+內邊距4*2+邊框1*2=210
margin-right:20px;    設置圖片與右側文本之間的間距
}
#box .box-left dd {    設置圖片在左、文字在右的樣式
float:left;
width:250px;    文本寬度：480-210-20（margin-right:20px）=250
}
#box .box-right dt {    設置圖片在右、文字在左的樣式
float:right;
width:210px;
}
#box .box-right dd {    設置圖片在右、文字在左的樣式
float:left;
width:250px;
margin-right:20px;
}

爲何說他是無懈可擊的呢？

一、W3C標準最首要的就是文檔的結構、表現和行爲相分離，在這個例子中文檔的結構和表現徹底分離，符合W3C標準；

二、文檔結構必定要以最簡潔的代碼來實現，這裏的HTML代碼可謂很是簡單；

三、文檔結構要具備語義化，令人可以讀懂，這裏的結構每一行都具備語義化

四、巧妙的應用浮動元素實現了不一樣的「分欄式」效果；

五、最關鍵的就是這一點，上述事情都作到以後，這裏的HTML代碼和CSS代碼都很是利於之後的維護。好比說，我想調整圖片的大小爲100*100像素的大小。那麼我不須要改動任何HTML代碼，只須要改動其中的CSS代碼就OK了，將#box .box-left dt {width:210px;}其中的寬度改成110px，同時將#box .box-left dd{width:250px;}其中的寬度改成350px，這樣的維護看起來多麼方便；假若有一天這個頁面中須要添加一條「文字在左、圖片在右」的圖文混排的文字和圖片，那麼在</div>的前面添加一個自定義列表就好了

<dl class="box-right">
<dt><img src="一張新圖片" width="" height="" /></dt>
<dd class="box-text">圖片標題</dd>
<dd class="box-shuoming">圖片描述</dd>
</dl>
甚至咱們都不須要修改任何CSS樣式表。

六、兼容IE六、IE七、IE八、IE九、FIREFOX、OPERA、SAFARI等等全部世界主流瀏覽器。

這就是無懈可擊的WEB設計。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。