CSS執行個體(三):全部使用背景產生欄目

來源:互聯網
上載者:User

全部使用背景來製作網頁中的欄目很巧妙,很親切,很象以前做傳統型程式的感覺。使用三張圖片,基本上就產生了整個網頁的所有欄目。

titletag.png

Html代碼  

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml"><head>  
  3.     <title>娛樂頻道-搜狐</title>  
  4. <style type="text/css">  
  5. a {color: #333;text-decoration:none;font-size:12px}  
  6. a:hover {color:#dc0000;text-decoration:underline;}  
  7. .column,.column_btm{width:265px;}  
  8. .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;}  
  9. .column a{  
  10.     background:url(bgx.gif) repeat-x 0 -85px;height:25px;line-height:25px;vertical-align:middle;display:block;margin:0 1em;  
  11. }  
  12. .bgno{background:none;}  
  13. .column_btm{background:url(titletag.png) 0 -259px;height:5px;font-size:1px;clear:both;}  
  14. .column{background:url(cutbg.gif) -2585px 0;}  
  15. </style>  
  16. </head>  
  17. <body>  
  18. <div class="column">  
  19. <h2><span>搜狐視頻</span></h2>  
  20. <a href="http://blog.csdn.net/wallimn" title="歡迎訪問我的部落格" target="_blank">浙江發現潭底恢宏地宮 呈北鬥七星排列</a>  
  21. <a href="http://blog.csdn.net/wallimn" title="歡迎訪問我的部落格" target="_blank">幹擾演講學生獲保釋 自稱無罪</a>  
  22. <a class="bgno" href="http://blog.csdn.net/wallimn" target="_blank">劉謙詭異魔術 影子找撲克牌如鬼魂顯靈</a>  
  23. <div class="column_btm"></div>  
  24. </body>  
  25. </html>  
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.