CSS实例(三):全部使用背景生成栏目

全部使用背景来制作网页中的栏目很巧妙,很亲切,很象以前做桌面程序的感觉。使用三张图片,基本上就生成了整个网页的所有栏目。

titletag.png



Html代码 收藏代码
  1. >
  2. <htmlxmlns="http://www.w3.org/1999/xhtml"><head>
  3. <title>娱乐频道-搜狐title>
  4. <styletype="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. .columnh2{background:url(titletag.png)0-60px;color:#fff;height:24px;line-height:24px;font-size:12px;font-weight:weigth;margin:0px;padding:00012px;}
  9. .columna{
  10. background:url(bgx.gif)repeat-x0-85px;height:25px;line-height:25px;vertical-align:middle;display:block;margin:01em;
  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)-2585px0;}
  15. style>
  16. head>
  17. <body>
  18. <divclass="column">
  19. <h2><span>搜狐视频span>h2>
  20. <ahref="http://blog.csdn.net/wallimn"title="欢迎访问我的博客"target="_blank">浙江发现潭底恢宏地宫呈北斗七星排列a>
  21. <ahref="http://blog.csdn.net/wallimn"title="欢迎访问我的博客"target="_blank">干扰演讲学生获保释自称无罪a>
  22. <aclass="bgno"href="http://blog.csdn.net/wallimn"target="_blank">刘谦诡异魔术影子找扑克牌如鬼魂显灵a>
  23. <divclass="column_btm">div>
  24. body>
  25. html>

你可能感兴趣的:(CSS实例(三):全部使用背景生成栏目)