您的位置：首页 → 网页设计 → DreamWeaver → CSS优雅的公布栏源码

CSS优雅的公布栏源码

时间：2009/12/18 9:59:00来源：本站整理作者：我要评论(0)

　今天花了点儿时间，琢磨了一下如何简洁的实现网页上常用的栏目。就是下面的这种东西，我称之为栏目，不知道别人叫它什么：
 


 
 


　　以下是我的HTML文件及CSS文件，可以便捷地进行样式切换。如果谁有更简洁的方式，请留言指教。

　　HTML文件：
 

Html代码 复制代码
  1. <?xml version="1.0" encoding="UTF-8" ?>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  6. <title>Insert title here</title>  
  7. <link href="column.css" style="text/css" rel="stylesheet"/>  
  8. <script type="text/javascript">  
  9.     var gIndex = 1;   
  10.     function doSwitch(){   
  11.         var e = document.getElementById('info');   
  12.         ee.className = e.className.split(' ')[0]+' s'+(gIndex%3+1);   
  13.         gIndex++;   
  14.     }   
  15. </script>  
  16. </head>  
  17. <body>  
  18. <ul class="column s1" id="info">  
  19.     <li class="title"><div>信息公示</div></li>  
  20.     <li><a href="#">隔壁老王</a></li>  
  21.     <li><a href="http://wallimn.javaeye.com">http://wallimn.javaeye.com</a></li>  
  22.     <li><a href="#">很长文本自动截断，一切皆有可能，一切皆有可能，一切皆有可能，一切皆有可能</a></li>  
  23.     <li class="tail"><a href="#">更多...</a></li>  
  24. </ul>  
  25. <br/>  
  26. <input type="button" value="样式切换" onclick="doSwitch()" />  
  27. </body>  
  28. </html>  



　　CSS文件：
 

Html代码 复制代码
  1. ul.column{   
  2.     padding:0;   
  3.     margin:0;   
  4.     font:normal 12px "宋体";   
  5.     border:1px solid #000;   
  6. }   
  7. ul.column li{   
  8.     height:26px;   
  9.     line-height:26px;   
  10.     margin:0 4px;   
  11.     border-bottom:1px dashed #ccc;   
  12.     vertical-align:middle;   
  13.     padding-left:24px;   
  14.     white-space:nowrap;   
  15.     text-overflow:ellipsis;   
  16.     overflow:hidden;   
  17. }   
  18. ul.column li,ul.column li.title div{   
  19.     background:url("column.gif") no-repeat;   
  20. }   
  21. ul.column li a{   
  22.     text-decoration:none;   
  23. }   
  24. ul.column li a:hover{   
  25.     color:red;   
  26. }   
  27. ul.column li.title,ul.column li.tail{   
  28.     border-width:0;   
  29. }   
  30. ul.column li.title{   
  31.     background-repeat:repeat-x;   
  32.     margin:0;   
  33.     padding:0;   
  34. }   
  35. ul.column li.tail{   
  36.     text-align:right;   
  37.     padding-right:12px;   
  38.     background-image:none;   
  39. }   
  40.   
  41. /*1*/   
  42. ul.s1{   
  43.     width:300px;   
  44. }   
  45. ul.s1,ul.s1 li{   
  46.     border-color:#2e9803;   
  47. }   
  48. ul.s1 li{   
  49.     background-position: 0 -52px;   
  50. }   
  51. ul.s1 li.title{   
  52.     background-position: 0 -26px;   
  53. }   
  54. ul.s1 li.title div{   
  55.     background-position: 0 0;   
  56.     padding-left:24px;   
  57. }   
  58. /*2*/   
  59. ul.s2{   
  60.     width:300px;   
  61. }   
  62. ul.s2,ul.s2 li{   
  63.     border-color:#9438d4;   
  64. }   
  65. ul.s2 li{   
  66.     background-position: 0 -130px;   
  67. }   
  68. ul.s2 li.title{   
  69.     background-position: 0 -104px;   
  70. }   
  71. ul.s2 li.title div{   
  72.     background-position: 0 -78px;   
  73.     padding-left:24px;   
  74. }   
  75. /*3*/   
  76. ul.s3{   
  77.     width:300px;   
  78. }   
  79. ul.s3,ul.s3 li{   
  80.     border-color:#9bb8d2;   
  81. }   
  82. ul.s3 li{   
  83.     background-position: 0 -208px;   
  84. }   
  85. ul.s3 li.title{   
  86.     background-position: 0 -182px;   
  87. }   
  88. ul.s3 li.title div{   
  89.     background-position: 0 -156px;   
  90.     padding-left:24px;   
  91. }  

相关视频

    没有数据

相关阅读 个性化jQuery和CSS3菜单源码CSS实现Tab技巧CSS复位-CSS Reset代码举例IE6绝对定位的bug及其解决办法CSS样式表创建美妙绝伦的网站几个最常用和实用的CSS技巧将网站（主页）变成黑白DW设计网页时组织CSS的建议

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 CSS优雅的公布栏源码高级CSS选择器的使用 将网站（主页）变成黑白DW设计网页时组织CSS的建议利用Dreamweaver合理优化网页元素布局22个Dreamweaver内置网页过渡特效简介

人气排行 如何用Dreamweaver制作电子相册下拉菜单全攻略-用Dreamweaver制作下拉菜单用Dreamweaver实现ASP数据库动态网站建设用Dreamweaver CS3制作下拉菜单如何在DW中插入Flash的参数详解Dreamweaver标签选择器的妙用巧用dreamweaver模板批量制作网页优化HTML代码加快网页速度