新闻框

wentao365

浏览: 1428541 次
性别:
来自: 北京

最近访客更多访客>>

有你不孤单

wuzijingaip

wmzhsqy

ssydxa219

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

div-css

1：效果

2：资源
skin_1.2.0.png

3：DIV

<!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>刘文涛</title>
<link id="cssChange" href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="resArea">
  <div id="News">
    <h4 class="s"><a href="#">新闻中心</a></h4>
  </div>
  <div id="NewsInfo">
    <span>
      <h3>
      <span class="fnb">·</span><a href="#">28名中国籍船员在伊朗海域遭海盗劫持</a> 
      <a href="#">快讯</a>
      </h3>
      ·<a href="#">公安部公布第3批6名恐怖分子名单 均为×××</a><br>
      ·<a href="#">解放军报：不为流言所惑 坚决听从胡××指挥</a><br>
      ·<a href="#">中央军委批准成立全军审计领导小组 强调从严治军</a><br>
      ·<a href="#">汪洋：大是大非上须头脑清醒 不被谣言杂音所扰</a><br>
      ·<a href="#">帕劳起诉25名被扣中国渔民</a> 
      <a href="#">身份公布5人来自海南</a><br>
      <h3>
      <span class="fnb">·</span><a href="#">茅台批发价因公款买酒禁令降3成 炒家割肉抛售</a>			      
      </h3>
      ·<a href="#">地方政府干预企业直报数据 各地数据造假频发</a><br>
      ·<a href="#">张晓兰任甘肃纪委书记 成为最年轻省级纪委书记</a><br>
      ·<a href="#">中国人一天</a> <span class="fc30">|</span> 
      <a href="#">古稀老人的梨园情</a> 
      <a href="#">三亚女保镖特训</a><br>
      </span>      
  </div>
  <div class="res_b"></div>
</div>
</body>
</html>

4：CSS

@charset "utf-8";
body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"宋体","Arial Narrow",HELVETICA;background:#fff;}
h3,h4{margin:0;padding:0;}

.fnb{font-weight:200;margin-left:-1px;}
a {font-size:14px;color:#00007F;text-decoration:none;}a:hover {color:#bd0a01;text-decoration:underline;}
h3 {font-size:14px;}h4 {font-size:14px;font-weight:normal;text-align:center;cursor:pointer;overflow:hidden;}h4 a {width:100%;height:100%;display:block;}
.resArea{width:346px;float:left;padding-top:10px;padding-left:20px;padding-bottom:20px}
#News{height:27px;}
#News h4{float:left;width:83px;height:20px;line-height:20px;margin-right:1px;padding-top:3px;}
#NewsInfo{padding:6px 8px 0 6px;color:#BAB9B9;font-size:12px;line-height:23px;height:246px;padding-top:3px;}
.res_b{height:2px;}
.hr_6,.hr_10 {font-size:1px;line-height:1px;clear:both;}.hr_6 {height:6px;}.hr_10 {height:10px;}

#News,#News h4,.res_b{background-image:url(skin_1.2.0.png);background-repeat:no-repeat;}
#News{background-position:0 -110px;}
#News h4{color:#1f376d;background-position:-80px -160px;}
.res_b{background-position:0 -145px;}
#NewsInfo{border-left:1px solid #aacbee;border-right:1px solid #aacbee;}