当前位置:Gxlcms > css > 在DIV+CSS排版中新闻列表的制作方法_CSS/HTML

在DIV+CSS排版中新闻列表的制作方法_CSS/HTML

时间:2021-07-01 10:21:17 帮助过:33人阅读

CSS代码:

  1. .list{
  2. margin: 0px 10px 20px;
  3. text-align: left;
  4. }
  5. .list ul{
  6. list-style-type: none;
  7. margin: 0px;
  8. padding: 0px;
  9. }
  10. .list li{
  11. background: url(/news/images/line.gif) repeat-x bottom;
  12. /*列表底部的虚线*/
  13. width: 100%;
  14. }
  15. .list li a{
  16. color: #777777;
  17. display: block;
  18. padding: 6px 0px 4px 15px;
  19. background: url(/news/images/dot.gif) no-repeat 0 6px;
  20. /*列表左边的箭头图片*/
  21. }
  22. .list li span{
  23. float: right;/*使span元素浮动到右面*/
  24. text-align: right;/*日期右对齐*/
  25. }
  26. .list li a:hover{
  27. color: #336699;
  28. background: url(/news/images/dot2.gif) repeat-x bottom;
  29. }

注意:span一定要放在前面,反之会产生换行

  1. <ul class="list">
  2. <li><span>2005年5月30日 </span>新闻标题01</li>
  3. <li><span>2005年5月30日 </span>新闻标题02</li>
  4. <li><span>2005年5月30日 </span>新闻标题03</li>
  5. <li><span>2005年5月30日 </span>新闻标题04</li>
  6. </ul>

人气教程排行