寂寞部屋
- 关注互联网,关注生活
关注互联网,关注生活
2019年五月
« 4月    
 12345
6789101112
13141516171819
20212223242526
2728293031  
  • 日志总数:553 篇
  • 浏览总量:2,434,960 次
  • 运行天数:618 天
  • 建站时间:2017-9-14
  • 最后更新:2019-4-2

十四、复杂的列表布局示例

复杂的列表布局是我最为头痛的。往往在测试时会乱得不堪入目,而且不能兼容IE和FireFox。这个问题困扰了我几个晚上,今天终于搞定了。在IE和FireFox中测试几乎一模一样。
源码下载:

附件:复杂列表演示.zip

先看效果图:这是模仿闪客帝国的作品爬行榜。

image

实现代码:

XML/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”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />
  5. <title>步步为营,实战div+css系列教程–</title>
  6. </head>
  7. <style tpye=“text/css”>
  8. <!–
  9. a{color:#349DEF;text-decoration:none;}
  10. a:hover{color:#F1B246;text-decoration: underline}
  11. h2 a {color:#ff0000;}
  12. .t1 h1{color:#ff0000;}
  13. #paihang{width:220px;background-color:#EDF0F3;padding:10px 5px;}
  14. [xmlns] #paihang{height:300px;width:230px;} /*此处运用了css hack技术:对象前加[xmlns]只被非IE浏览器识别*/
  15. .tit_bg{position:relative;left:10px; background-repeat:no-repeat;float:left;}
  16. .tit_txt{float:left;padding-left:20px;font-size:15px;font-weight:bold;color:#5442C0;}
  17. .more{float:right;padding:1px;}
  18. #top10{float:left;margin:0px;padding:10px 5px 0px 5px;background-color:#fff;list-style-type:none;width:220px;}/*对于ul对象,一定要设定宽度*/
  19. #top10 .topimg{float:left;padding-left:2px;margin:0px;}/*此处类前不能加li,否则不正常,涉及到列表与div的关系*/
  20. #top10 h1,#top10 h3{font-size:12px;font-weight:normal;float:left;}
  21. #top10 h2{font-size:12px;}
  22. #top10 li.t1 h1{clear:right;width:126px;border-bottom:1px #33ccff dashed;margin:0px;padding:8px 5px 3px 5px;font-weight:bold;}
  23. #top10 li.t1 h2{float:left;display:block;margin:10px 5px;;font-weight:normal;width:90px;}
  24. #top10 li.t1 h3{float:left;display:block;color:#ff0000;clear:right;margin:10px 0px;padding-left:5px;border-left:2px solid #ff0000;}
  25. #top10 li.t2,#top10 li.t3,#top10 li.t4{float:left;border-top:1px dashed #349DEE;background-image:url(arrow_t1.gif);background-repeat:no-repeat;background-position:0px 65%; margin:0px 0px 0px 5px;line-height:22px;}
  26. #top10 li.t2 h1,#top10 li.t3 h1,#top10 li.t4 h1{float:left;color:#349DEF;clear:left;width:155px;padding-left:25px;margin:0px;}
  27. #top10 li.t2 h3,#top10 li.t3 h3,#top10 li.t4 h3{float:left;color:#349DEF;padding-left:5px;margin:0px 0px 0px 0px ;}
  28. >
  29. </style>
  30. <body>
  31. <div id=“paihang”>
  32. <div class=“title”>
  33. <span class=“tit_bg”><img src=“tit_bg.gif” /></span>
  34. <span class=“tit_txt”>中国娱乐排行榜</span>
  35. <span class=“more”><img src=“tit_more.gif” alt=“浏览更多信息” longdesc=“#” /></span>
  36. </div>
  37. <div id=“top10”>
  38. <li class=“t1”>
  39. <div class=“topimg”><img src=“t1_img.gif” alt=“孙燕姿” longdesc=“#” /></div>
  40. <h1><a href=“#”>明天我就要嫁给你了</a></h1>
  41. <h2><a href=“http://www.chaojibaby.com”>歌手:超级宝贝</a></h2>
  42. <h3>1267</h3>
  43. </li>
  44. <li class=“t2”>
  45. <h1><a href=“#”>十年</a></h1>
  46. <h3>847</h3>
  47. </li>
  48. <li class=“t3”>
  49. <h1><a href=“#”>兰花草</a></h1>
  50. <h3>634</h3>
  51. </li>
  52. <li class=“t4”>
  53. <h1><a href=“#”>海浪(女生版)</a></h1>
  54. <h3>598</h3>
  55. </li>
  56. <li class=“t4”>
  57. <h1><a href=“#”>亲爱的你在哪里</a></h1>
  58. <h3>548</h3>
  59. </li>
  60. <li class=“t4”>
  61. <h1><a href=“#”>信仰(真情版)</a></h1>
  62. <h3>439</h3>
  63. </li>
  64. <li class=“t4”>
  65. <h1><a href=“#”>红豆8过火</a></h1>
  66. <h3>324</h3>
  67. </li>
  68. <li class=“t4”>
  69. <h1><a href=“#”>相亲相爱–九天</a></h1>
  70. <h3>287</h3>
  71. </li>
  72. <li class=“t4”>
  73. <h1><a href=“#”>爱你一万年</a></h1>
  74. <h3>156</h3>
  75. </li>
  76. <li class=“t4”>
  77. <h1><a href=“#”>亲爱的你在哪里</a></h1>
  78. <h3>67</h3>
  79. </li>
  80. </div>
  81. </div>
  82. </body>
  83. </html>

注意:
1、如果在测试写代码时DW展示出来的比较乱,大多原因是对象的属性没有写全,比如没有宽度高度的设定,没有右浮动等。这在列表布局中尤其重要。
2、此处使用了css hack技术,以解决浏览不兼容问题。如在对象前加顶极选择符[xmlns],只被非IE浏览器识别。当然前提是html标签已经加上了xmlns属性:
<html xmlns=”http://www.w3.org/1999/xhtml“>
当然还有其它方法来实现,我们放在以后的教程中陆续讲解。
3、#top10 li.t1 h1{}而不是#top10 li .t1 h1{},中间空一下,表示的是对象的上下级关系。而t1是作为类出现的,li.t1 h1表示类为ti的列表下的h1子对象。
4、几个对象想在同行显示的话,可用span选择符,span选择符也可以重复嵌套。如果并非在同行显示的话,尽量不要用span选择符,这时的div选择符就派上了用场。因为之前我们也说过,这两种选择符默认的显示方式分别为:行间内联和块状显示。

原文地址:http://www.chaojibaby.com/blog/article.asp?id=121

本站原创文章,请勿复制转载
版权声明:除特别注明外,本站所有文章均为原创,未经许可请勿复制、转载
2007-11-21
2,861 views
标签: , ,
暂无评论

发表评论

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。