div+css网页布局(163)

最新推荐文章于 2024-09-21 23:59:03 发布

颐街

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量653

点赞数

文章标签： div css class float border xhtml

本文链接：https://blog.csdn.net/itmsn/article/details/2122681

版权

<!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>