设为首页收藏本站
开启辅助访问

网络实验室

 找回密码
 注册账户
网络实验室»论坛 › ≡ CnLabs 讨论区 ≡ › 自由讨论大厅 › div+css新闻列表乱逛时发现了这个代码
返回列表 发新帖
查看: 3087|回复: 2

div+css新闻列表乱逛时发现了这个代码

[复制链接]
无心的棋子 发表于 2007-6-18 04:08:45 | 显示全部楼层 |阅读模式
div+css新闻列表乱逛时发现了这个代码，比较简洁使用，自己以前也遇到了做过这种新闻布局，但是时使用div后面跟一个span来完成的，这个要简洁一些在html代码结构上
css代码

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. <!--
  5. body {
  6. margin: 0;
  7. padding: 0;
  8. font-size:12px;
  9. }
  10. #layout{
  11. background-color: #FFFFFF;
  12. border: 0;
  13. width: 400px;
  14. margin: 0 auto;
  15. }
  16. .list{
  17. margin: 0px 10px 20px;
  18. text-align: left;
  19. }
  20. .list ul{
  21. list-style-type: none;
  22. margin: 0px;
  23. padding: 0px;
  24. }
  25. .list li{
  26. background: url(attachments/month_0612/j20061214102450.gif) repeat-x bottom;
  27. /*列表底部的虚线*/
  28. width: 100%;
  29. }
  30. .list li a{
  31. color: #777777;
  32. display: block;
  33. padding: 0px 0px 4px 15px;
  34. background: url(attachments/month_0612/q20061214102443.gif) no-repeat 0 6px;
  35. /*列表左边的箭头图片*/
  36. }
  37. .list li span{
  38. float: right;/*使span元素浮动到右面*/
  39. text-align: right;/*日期右对齐*/
  40. }
  41. .list li a:hover{
  42. color: #336699;
  43. background: url(attachments/month_0612/d20061214102457.gif) repeat-x bottom;
  44. }
  45. -->
  46. </style>
  47. </head>
  48. <body>
  49. <div id="layout">
  50. <ul class="list">
  51. <li><span>2006年6月6日 </span><a href="http://www.52css.com/#">新闻标题01</a></li>
  52. <li><span>2006年6月6日 </span><a href="http://www.52css.com/#">新闻标题02</a></li>
  53. <li><span>2006年6月6日 </span><a href="http://www.52css.com/#">新闻标题03</a></li>
  54. <li><span>2006年6月6日 </span><a href="http://www.52css.com/#">新闻标题04</a></li>
  55. </ul>
  56. <div>
  57. </body>
  58. </html>
复制代码
css新闻, div, margin, 列表, 时发现

相关帖子
回复

使用道具 举报

头像被屏蔽
2482003 发表于 2009-4-1 20:19:14 | 显示全部楼层
学习一个..
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册账户

本版积分规则

黑屋|存档|手机|网络实验室 本站服务器由美国合租以及IDCLayer国际数据提供!!!

GMT+8, 2024-4-26 17:11 , Processed in 0.124745 second(s), 10 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表