div+css網頁佈局(163)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>163</title> <style type="text/css"> body {text-align:center;font-family: 宋體, serif;  margin:0; padding:0; background: #fff; font-size:12px; color:#000;} div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border:0; } h1,h2,h3,h4,h5,h6 {margin:0; padding:0; font-size:12px; font-weight:normal;} li{list-style-type:none;} input,button{cursor:pointer;} img{vertical-align:top;} a:link {color: #000; text-decoration:none;} a:visited {color: #83006f;text-decoration:none;} a:hover {color: #bc2931; text-decoration:underline;} a:active {color: #bc2931;} .cRed,a.cRed:link,a.cRed:visited{ color:Red; } .area{margin:0 auto; width:960px; clear:both;background:url(bg.gif);} .area .col1{float:left; width:646px;} .area .col1 .col1_A{float:left; width:461px;} .area .col1 .col1_B{float:left; width:185px;} .area .col2{float:left; width:25px;} .area .col3{ float:left; width:289px;}

.leftList{clear:both; padding:0 0 0 16px;} .leftList ul{padding:9px 0 0;} .leftList li{font-size:14px; text-align:left; clear:both; line-height:23px;padding:0 0 0 9px;} .leftList li span{font-size:12px; line-height:19px; color:#1f3a87; padding:0 0 0 3px;}

.midT1{ margin:0 auto; width:167px;clear:both; height:22px;} .midT1 h2{float:left; font-weight:bold; padding:5px 0 0 ;}

.midPText1{clear:both; padding:10px 10px 0 10px; text-align:left; line-height:20px;} .midPText1 img{border:1px solid #ccc; float:left; margin:0 8px 0 0;}

.midList2{clear:both; text-align:left; padding:0 0 0 10px;} .midList2 dl{padding:5px 0 0;} .midList2 dt{clear:both; padding:6px 0 0; line-height:20px;} .midList2 dd{line-height:20px; padding:0 8px 0 0; clear:both;}

.rightT1{ margin:0 auto; width:268px; clear:both; height:22px; border-bottom:1px solid #ccc;} .rightT1 h2{float:left;font-weight:bold; padding:4px 0 0 2px;} .rightT1 span{ float:right; padding:6px 2px 0 8px;} .rightT1 span a{color:#666;} .rightT1 span a:visited{color:#666;} .rightT1 span a:hover{ color:#bc2931;}

.rightPText{clear:both; padding:0 0 0 16px; text-align:left;} .rightPText li{padding:10px 0 0;clear:both;} .rightPText img{border:1px solid #ccc;}

.leftLine{ margin:0 auto; width:440px; clear:both; height:1px; font-size:1px; overflow:hidden; background:url(http://cimg2.163.com/cnews/img/bg1.gif) 0 -339px repeat-x;} </style> </head>

<body> <div class="area">     <div class="col1">       <div class="col1_A">        <div class="leftList">                 <ul>                   <li><a href="#">王福重:中國停徵利息稅正當其時</a> <span>利息稅使得窮人損失大於富人</span></li>                   <li><a href="#">俞憲忠:不要呼籲政府幹預房價</a> <span>減少政府幹預還發展以自由</span></li>                   <li><a href="#">符玉瑤:從法國總統與百姓對罵想到的</a> <span>反思中國人心目中的權力</span></li>                   <li><a href="#">長平:張柏芝,你怎麼還不倒黴?</a> <span>名人和大衆關係實爲買賣關係</span></li>                   <li><a href="#">沈峯:養老“雙軌制”亟待改變</a> <span>當以正義視角來審視制度安排</span></li>                 </ul>               </div>      <div class="leftLine"></div>      <div class="leftList">                 <ul>                   <li><a href="#">王福重:中國停徵利息稅正當其時</a> <span>利息稅使得窮人損失大於富人</span></li>                   <li><a href="#">俞憲忠:不要呼籲政府幹預房價</a> <span>減少政府幹預還發展以自由</span></li>                   <li><a href="#">符玉瑤:從法國總統與百姓對罵想到的</a> <span>反思中國人心目中的權力</span></li>                   <li><a href="#">長平:張柏芝,你怎麼還不倒黴?</a> <span>名人和大衆關係實爲買賣關係</span></li>                   <li><a href="#">沈峯:養老“雙軌制”亟待改變</a> <span>當以正義視角來審視制度安排</span></li>                 </ul>               </div>    </div>    <div class="col1_B">        <div class="midT1"><h2>經典重讀</h2></div>         <div class="midPText1">         <a href="#"><img src="http://cimg21.163.com/cnews/2008/2/25/2008022516294252375.jpg" width="70" height="70" border="0" /></a>         <a href="#">影響美國25大案(3):馬卡洛告馬里蘭州案</a>                  </div>      <div class="midT1"><h2>磚家意見</h2></div>      <div class="midList2">                  <dl><dt><a href="#">教授爲何沾沾自喜"做畜生"</a></dt><dd>——學術界不能只會拾人牙慧</dd>                      <dt><a href="#">許霆案不可忽略的幾個細節</a></dt><dd>——應由檢方重新予以考量</dd>                      <dt><a href="#">"工資條例"不是隻"漲工資"</a></dt><dd>——平衡勞資兩方的力量</dd>                  </dl>               </div>    </div>  </div>  <div class="col2"></div>  <div class="col3">      <div class="rightT1"><h2>網意快照</h2><span><a href="#">更多</a></span></div>   <div class="rightPText">             <ul>               <li><a href="#"><img src="http://cimg23.163.com/cnews/2008/2/26/20080226105338af1be.jpg" width="250" height="90" border="0" /></a>                <h6><a href="#">成本壓力促使勞動密集型企業重新洗牌</a></h6></li>             </ul>         </div>  </div> </div> </body> </html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章