經常會在網頁上看見類似這樣的頁面效果：
下面就應用無懈可擊的WEB設計方案來實作它：(HTML代碼添加在BODY之中，CSS代碼添加在之間，一定要編輯在
之間)
HTML代碼：
- 明月幾時有
- 明月幾時有，把酒問青天，不知天上宮阙，今夕是何年；我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。明月幾時有，把酒問青天，不知天上宮阙，今夕是何年；我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。
- 時尚界一姐
- 範冰冰引領着中國時尚界的潮流，可謂是時尚界的一姐。就連早已成名的楊幂也在追随者範冰冰，誠然，範冰冰确實有着過人之處，她身上那種自然而然散發出來的氣質不是常人所能匹及。人們說，氣質是由内而外，從一個人的骨子裡往外散發出來的，并不是學出來的，也不是裝模作樣就能裝出來的。範冰冰就是這樣一個人，她有着與衆不同的氣質，再加上她的天生麗質，為無數萬千影迷擁護着。
- 人體肖像
- 這個人是誰已經忘了，因為沒有網絡隻好随便找來一張圖稍作修改就放在網頁裡了。隻能用作網頁的一個小小的點綴，為完成自定義清單的完美功能而臨時找的一個素材罷了。
其實上面的文檔結構非常簡單：
- 圖檔标題
- 圖檔描述
- 圖檔标題
- 圖檔描述
- 圖檔标題
- 圖檔描述
僅僅是一個外層DIV包圍了三個自定義清單，如果沒有CSS，這篇文檔結構一樣具有可讀性，不存在文檔内容的缺失，這是無懈可擊方案之一；
來看CSS樣式：(下面的紅色字是對每一行CSS語句的解釋，也叫“注釋”，在運作代碼時要将其注釋，應用
用這個注釋把所有的紅字都注釋掉，浏覽器就不會解釋執行這些文字了；或者将這些文字幹脆删除)
* { 這個聲明初始化了頁面中所有元素的外邊界和内邊界同意為“0”
margin:0;
padding:0;
}
#box { 初始化“盒模型”，設定寬度，因為不确定高度是以不設高度
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;
}
為什麼說他是無懈可擊的呢？
1、W3C标準最首要的就是文檔的結構、表現和行為相分離，在這個例子中文檔的結構和表現完全分離，符合W3C标準；
2、文檔結構一定要以最簡潔的代碼來實作，這裡的HTML代碼可謂非常簡單；
3、文檔結構要具有語義化，使人能夠讀懂，這裡的結構每一行都具有語義化
- 圖檔标題
- 圖檔描述
- 圖檔标題
- 圖檔描述
- 圖檔标題
- 圖檔描述
4、巧妙的應用浮動元素實作了不同的“分欄式”效果；
5、最關鍵的就是這一點，上述事情都做到之後，這裡的HTML代碼和CSS代碼都非常利于以後的維護。比如說，我想調整圖檔的大小為100*100像素的大小。那麼我不需要改動任何HTML代碼，隻需要改動其中的CSS代碼就OK了，将#box .box-left dt {width:210px;}其中的寬度改為110px，同時将#box .box-left dd{width:250px;}其中的寬度改為350px，這樣的維護看起來多麼友善；假如有一天這個頁面中需要添加一條“文字在左、圖檔在右”的圖文混排的文字和圖檔，那麼在
的前面添加一個自定義清單就行了