用 div、ul、li、span、a 布局企业站“新闻列表页”，兼容5种浏览器（原创教程）

大家好，我是XIZI，很高兴和大家分享一个常用布局。这个代码的标题默认在左，时间飘右（保证视觉对齐不受标题长度影响对齐），标题长度超出设定宽度自然缩略隐藏，鼠标悬停在li有背景色，用onMouse控制的，a已经用在标题了，所以只能用onMouse，也很合理。

新闻列表页 设计稿：

DW下的排版效果

网页效果（兼容五种浏览器，外观无差异，此代码兼容firefox2/3,GC,IE6,IE7,O）：

鼠标悬停

代码：

    <div class="conews">
    <div class="head"><span class="title">标 题</span><span class="time">时 间</span></div>
    <div class="list">
     <ul>
      <li onMouseOver="this.className='over'" onMouseOut="this.className='out'"><span>2010-07-08 08:08</span><a href="#" target="_blank">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题题标题标题标题标题标题标题</a></li>
      <li onMouseOver="this.className='over'" onMouseOut="this.className='out'"><span>2010-07-08 08:08</span><a href="#" target="_blank">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题题标题标题标题标题标题标题</a></li>
      <li onMouseOver="this.className='over'" onMouseOut="this.className='out'"><span>2010-07-08 08:08</span><a href="#" target="_blank">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题题标题标题标题标题标题标题</a></li>
      <li onMouseOver="this.className='over'" onMouseOut="this.className='out'"><span>2010-07-08 08:08</span><a href="#" target="_blank">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题题标题标题标题标题标题标题</a></li>
      <li onMouseOver="this.className='over'" onMouseOut="this.className='out'"><span>2010-07-08 08:08</span><a href="#" target="_blank">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题题标题标题标题标题标题标题</a></li>
      <li onMouseOver="this.className='over'" onMouseOut="this.className='out'"><span>2010-07-08 08:08</span><a href="#" target="_blank">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题题标题标题标题标题标题标题</a></li>
      <li onMouseOver="this.className='over'" onMouseOut="this.className='out'"><span>2010-07-08 08:08</span><a href="#" target="_blank">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题题标题标题标题标题标题标题</a></li>
      <li onMouseOver="this.className='over'" onMouseOut="this.className='out'"><span>2010-07-08 08:08</span><a href="#" target="_blank">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题题标题标题标题标题标题标题</a></li>
      <li onMouseOver="this.className='over'" onMouseOut="this.className='out'"><span>2010-07-08 08:08</span><a href="#" target="_blank">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题题标题标题标题标题标题标题</a></li>
      <li onMouseOver="this.className='over'" onMouseOut="this.className='out'"><span>2010-07-08 08:08</span><a href="#" target="_blank">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题题标题标题标题标题标题标题</a></li>
     </ul>
     <div class="btn"><form action="" method="get"><input name="button" type="submit" class="btnnewsprev" value="" title="上一页" /><b><a href="#" class="hover">01</a></b><a href="#">02</a><a href="#">03</a><a href="#">04</a><a href="#">05</a> ...<input name="button" type="submit" class="btnnewsnext" value="" title="下一页" /></form></div>
    </div>

/*新闻列表页*/
.conews .head{background:url(../images/title_CoNewsList.png) no-repeat;width:713px;height:28px;margin:0 auto;line-height:28px}
.conews .head span{text-align:center;font-weight:bold;color:#333;font-family:"宋体"}
.conews span.title{width:582px;float:left}
.conews span.time{width:98px;float:right;margin-right:10px}

.conews .list{width:713px;margin:0 auto}
.conews .list li{width:713px;height:28px;background:url(../images/set_02.gif) no-repeat bottom;}
.conews .list li span{height:27px;line-height:27px;width:98px; float:right; margin-right:10px}
.conews .list li a{padding-left:16px;height:27px;line-height:27px;background:url(../images/ico_sym01.gif) no-repeat 10px; /*标题长度截断*/display:block;width:566px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap/*标题长度截断*/}
.conews .list li a:hover{text-decoration:none;color:#666}
.conews .list li.over{background:#F1F6FB url(../images/set_02.gif) no-repeat bottom}
.conews .list li.out{background:#FFF url(../images/set_02.gif) no-repeat bottom}

.conews .btn{height:24px;line-height:24px;text-align:center;margin-top:19px}
.conews .btn b{color:#0066CC}
.conews .btn a{margin-left:10px}
.conews .btn a:hover{text-decoration:none;color:#0066CC}
.conews .btn a.hover{color:#0066CC}
.conews .btn input.btnnewsprev{background:url(../images/btn_newsprev.gif);border:0;width:57px;height:24px;cursor:pointer}
.conews .btn input.btnnewsnext{background:url(../images/btn_newsnext.gif);border:0;width:57px;height:24px;cursor:pointer;margin-left:10px}

本文由 站酷网 - xizicom 原创，转载请保留此信息，多谢合作。