經(jīng)常會在網(wǎng)頁上看見類似這樣的頁面效果：
下面就應(yīng)用無懈可擊的WEB設(shè)計方案來實(shí)現(xiàn)它：（HTML代碼添加在BODY之中，CSS代碼添加在<style></style>之間，<style></style>一定要編輯在<head></head>之間）
HTML代碼：
<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">明月幾時有，把酒問青天，不知天上宮闕，今夕是何年；我欲乘風(fēng)歸去，又恐瓊樓玉宇，高處不勝寒。明月幾時有，把酒問青天，不知天上宮闕，今夕是何年；我欲乘風(fēng)歸去，又恐瓊樓玉宇，高處不勝寒。</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">范冰冰引領(lǐng)著中國時尚界的潮流，可謂是時尚界的一姐。就連早已成名的楊冪也在追隨者范冰冰，誠然，范冰冰確實(shí)有著過人之處，她身上那種自然而然散發(fā)出來的氣質(zhì)不是常人所能匹及。人們說，氣質(zhì)是由內(nèi)而外，從一個人的骨子里往外散發(fā)出來的，并不是學(xué)出來的，也不是裝模作樣就能裝出來的。范冰冰就是這樣一個人，她有著與眾不同的氣質(zhì)，再加上她的天生麗質(zhì)，為無數(shù)萬千影迷擁護(hù)著。</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">這個人是誰已經(jīng)忘了，因?yàn)闆]有網(wǎng)絡(luò)只好隨便找來一張圖稍作修改就放在網(wǎng)頁里了。只能用作網(wǎng)頁的一個小小的點(diǎn)綴，為完成自定義列表的完美功能而臨時找的一個素材罷了。</dd>
</dl>
</div>
其實(shí)上面的文檔結(jié)構(gòu)非常簡單：
<div id="box">
<dl class="box-left">
<dt><img src="images/suo-moon1.jpg" width="200" height="200" /></dt>
<dd class="box-text">圖片標(biāo)題</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">圖片標(biāo)題</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">圖片標(biāo)題</dd>
<dd class="box-shuoming">圖片描述</dd>
</dl>
</div>
僅僅是一個外層DIV包圍了三個自定義列表，如果沒有CSS，這篇文檔結(jié)構(gòu)一樣具有可讀性，不存在文檔內(nèi)容的缺失，這是無懈可擊方案之一；
來看CSS樣式：（下面的紅色字是對每一行CSS語句的解釋，也叫“注釋”，在運(yùn)行代碼時要將其注釋，應(yīng)用
用這個注釋把所有的紅字都注釋掉，瀏覽器就不會解釋執(zhí)行這些文字了；或者將這些文字干脆刪除）
* { 這個聲明初始化了頁面中所有元素的外邊界和內(nèi)邊界同意為“0”
margin:0;
padding:0;
}
#box { 初始化“盒模型”，設(shè)置寬度，因?yàn)椴淮_定高度所以不設(shè)高度
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瀏覽器會出現(xiàn)左側(cè)外邊距40px而不是20px”
float:left; 這條能夠使外層的DIV不脫離內(nèi)層元素浮動后的文檔流
}
.box-text { 圖片標(biāo)題樣式
font-size:150%;
font-weight:bold;
color:#689EE8;
padding-bottom:10px; 圖片標(biāo)題和圖片描述之間的間距
}
.box-shuoming { 圖片描述樣式
text-indent:2em; 首行縮進(jìn)
line-height:1.5em; 行高
font-family:"宋體";
color:#707881;
}
#box dl { 對每個自定義列表的總體樣式
width:480px; 寬度+兩個外邊距=外層DIV的總寬度500px
margin:10px; 縮寫，表示上下左右外邊距都為10px
margin-bottom:20px; 單獨(dú)定義向下外邊距
display:inline; 處理IE6瀏覽器雙倍MARGIN的BUG
float:left;
}
#box dt img { 定義圖片樣式
padding:4px; 內(nèi)邊距和邊框結(jié)合會產(chǎn)生相框的效果
border:1px solid #DCDCDE; 邊框的縮寫，寬度1px，實(shí)線，顏色#DCDCDE
border-bottom-color:#7F7F7F; 右側(cè)和下邊邊框顏色加深形成陰影效果
border-right-color:#7F7F7F;
}
#box .box-left dt { 設(shè)置圖片在左、文字在右的樣式
float:left;
width:210px; 設(shè)置浮動時通常要定義寬度，以免出錯，圖片寬200+內(nèi)邊距4*2+邊框1*2=210
margin-right:20px; 設(shè)置圖片與右側(cè)文本之間的間距
}
#box .box-left dd { 設(shè)置圖片在左、文字在右的樣式
float:left;
width:250px; 文本寬度：480-210-20（margin-right:20px）=250
}
#box .box-right dt { 設(shè)置圖片在右、文字在左的樣式
float:right;
width:210px;
}
#box .box-right dd { 設(shè)置圖片在右、文字在左的樣式
float:left;
width:250px;
margin-right:20px;
}
為什么說他是無懈可擊的呢？
1、W3C標(biāo)準(zhǔn)最首要的就是文檔的結(jié)構(gòu)、表現(xiàn)和行為相分離，在這個例子中文檔的結(jié)構(gòu)和表現(xiàn)完全分離，符合W3C標(biāo)準(zhǔn)；
2、文檔結(jié)構(gòu)一定要以最簡潔的代碼來實(shí)現(xiàn)，這里的HTML代碼可謂非常簡單；
3、文檔結(jié)構(gòu)要具有語義化，使人能夠讀懂，這里的結(jié)構(gòu)每一行都具有語義化
<div id="box">
<dl class="box-left">
<dt><img src="images/suo-moon1.jpg" width="200" height="200" /></dt>
<dd class="box-text">圖片標(biāo)題</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">圖片標(biāo)題</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">圖片標(biāo)題</dd>
<dd class="box-shuoming">圖片描述</dd>
</dl>
</div>
4、巧妙的應(yīng)用浮動元素實(shí)現(xiàn)了不同的“分欄式”效果；
5、最關(guān)鍵的就是這一點(diǎn)，上述事情都做到之后，這里的HTML代碼和CSS代碼都非常利于以后的維護(hù)。比如說，我想調(diào)整圖片的大小為100*100像素的大小。那么我不需要改動任何HTML代碼，只需要改動其中的CSS代碼就OK了，將#box .box-left dt {width:210px;}其中的寬度改為110px，同時將#box .box-left dd{width:250px;}其中的寬度改為350px，這樣的維護(hù)看起來多么方便；假如有一天這個頁面中需要添加一條“文字在左、圖片在右”的圖文混排的文字和圖片，那么在</div>的前面添加一個自定義列表就行了
<dl class="box-right">
<dt><img src="一張新圖片" width="" height="" /></dt>
<dd class="box-text">圖片標(biāo)題</dd>
<dd class="box-shuoming">圖片描述</dd>
</dl>
甚至我們都不需要修改任何CSS樣式表。
6、兼容IE6、IE7、IE8、IE9、FIREFOX、OPERA、SAFARI等等所有世界主流瀏覽器。
這就是無懈可擊的WEB設(shè)計。
