全部使用背景來製作網頁中的欄目很巧妙，很親切，很象以前做傳統型程式的感覺。使用三張圖片，基本上就產生了整個網頁的所有欄目。
titletag.png
Html代碼
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml"><head>
- <title>娛樂頻道-搜狐</title>
- <style type="text/css">
- a {color: #333;text-decoration:none;font-size:12px}
- a:hover {color:#dc0000;text-decoration:underline;}
- .column,.column_btm{width:265px;}
- .column h2{background:url(titletag.png) 0 -60px;color:#fff;height:24px;line-height:24px;font-size:12px;font-weight:weigth;margin:0px;padding:0 0 0 12px;}
- .column a{
- background:url(bgx.gif) repeat-x 0 -85px;height:25px;line-height:25px;vertical-align:middle;display:block;margin:0 1em;
- }
- .bgno{background:none;}
- .column_btm{background:url(titletag.png) 0 -259px;height:5px;font-size:1px;clear:both;}
- .column{background:url(cutbg.gif) -2585px 0;}
- </style>
- </head>
- <body>
- <div class="column">
- <h2><span>搜狐視頻</span></h2>
- <a href="http://blog.csdn.net/wallimn" title="歡迎訪問我的部落格" target="_blank">浙江發現潭底恢宏地宮 呈北鬥七星排列</a>
- <a href="http://blog.csdn.net/wallimn" title="歡迎訪問我的部落格" target="_blank">幹擾演講學生獲保釋 自稱無罪</a>
- <a class="bgno" href="http://blog.csdn.net/wallimn" target="_blank">劉謙詭異魔術 影子找撲克牌如鬼魂顯靈</a>
- <div class="column_btm"></div>
- </body>
- </html>
