DIV CSS布局实例：DIV+CSS新闻列表制作

<html> <head> <style type="text/css"> <!-- body { margin: 0; padding: 0;  font-size:12px; } #layout{ background-color: #FFFFFF; border: 0; width: 400px; margin: 0 auto; } .list{ margin: 0px 10px 20px; text-align: left;  }

.list ul{ list-style-type: none; margin: 0px; padding: 0px; }

.list li{ background: url(attachments/month_0612/j20061214102450.gif) repeat-x bottom;  /*列表底部的虚线*/ width: 100%;  } .list li a{ color: #777777; display: block; padding: 0px 0px 4px 15px; background: url(attachments/month_0612/q20061214102443.gif) no-repeat 0 6px; /*列表左边的箭头图片*/ }

.list li span{ float: right;/*使span元素浮动到右面*/ text-align: right;/*日期右对齐*/ } .list li a:hover{ color: #336699; background: url(attachments/month_0612/d20061214102457.gif) repeat-x bottom; } --> </style>  </head>

<body> <div id="layout"> <ul class="list"> <li><span>2006年6月6日 </span><a href="http://www.52css.com/#">新闻标题01</a></li> <li><span>2006年6月6日 </span><a href="http://www.52css.com/#">新闻标题02</a></li> <li><span>2006年6月6日 </span><a href="http://www.52css.com/#">新闻标题03</a></li> <li><span>2006年6月6日 </span><a href="http://www.52css.com/#">新闻标题04</a></li> </ul> <div> </body> </html>

posted on 2013-10-21 11:22  爱哎唉  阅读(441)  评论(0)    收藏  举报