免费模板网
当前位置: 澳门永利官方网站>CSS代码> 仿百度贴吧整块div的hover效果

CSS代码

仿百度贴吧整块div的hover效果

分类:CSS代码 时间:2009/12/15 11:41:02 浏览:45757 次

演示效果截图

本文地址:http://www.5hawgs.com/css-code/detail-6482.aspx
文章摘要: 仿百度贴吧整块div的hover效果 ,星际线上娱乐官网星际线上娱乐官方网站星际娱乐官方网站,澳门威尼斯人官方网站澳门永利官方网站星际娱乐场官方网站。

仿百度贴吧整块div的hover效果

CSS代码

<style type="text/css">
body{margin:4px 10px 4px 8px;background:#fff;color:#000;
text-align:center}
form,h1,h2,h3,h4,ul,li,dl,dt,dd{margin:0;padding:0}
body,div,td,th{font-family:Arial;font-size:14px}
div{text-align:left}
img{border:0}
ul{list-style:none}
a{color:#36c;text-decoration:underline}
.bg{background:#F6F6F6}
.l{float:left}
.r{float:right}
.clear{clear:both;font-size:0;line-height:0;height:0;
visibility:visible}
.area2{width:771px;margin-left:11px;background:#dddfe1;}
.more{font-size:12px;font-weight:normal;padding-right:10px;
float:right;
background:url(http://www.5hawgs.com/450/img/baike/bgs1.gif) no-repeat right 3px;
padding-right:8px;text-decoration:none;margin-top:3px}
a.more:hover{text-decoration:underline}
.title{text-decoration:none;color:#000}
.box1,.box2{margin-top:10px}
.box1 .r2_1,.box1 .r2_2,.box1 .r2_3,.box1 .r2_4,.box2
 .r2_1,.box2 .r2_2,.box2 .r2_3,.box2 .r2_4{
 display:block;width:8px;height:8px;overflow:hidden;
 background:url(http://www.5hawgs.com/394/img/baike/bgs1.gif)}
.box1 .r2_1{background-position:0 -365px}
.box1 .r2_2{background-position:-8px -365px}
.box1 .r2_3{background-position:0 -373px;margin-top:-8px}
.box1 .r2_4{background-position:-8px -373px;margin-top:-8px}
.box2 .r2_1{background-position:0 -391px}
.box2 .r2_2{background-position:-8px -391px}
.box2 .r2_3{background-position:0 -399px;margin-top:-8px}
.box2 .r2_4{background-position:-8px -399px;margin-top:-8px}
.box1 .brd{border:3px solid #dddfe1;background:#fff}
.box2 .brd{border:3px solid #c7c7c7;background:#fff}
.box1 h1,.box2 h1{font-size:14px;padding:5px 0 2px 15px;
line-height:22px;border-bottom:1px solid #d4d4d4;
background:url(http://www.5hawgs.com/284/img/baike/bgs2.gif) repeat-x 0 -88px}
.box1 h1 div,.box2 h1 div{position:relative}
.box1 h1 .more,.box2 h1 .more{position:absolute;
right:10px;line-height:16px}
.box3{width:380px;}
.good_word{height:200px;padding:10px}
</style>

HTML代码

<div class="area2">
  <div class="box3 l">
    <div class="box1" onMouseOver="this.className='box2'"
	 onMouseOut="this.className='box1'">
      <div><b class="r2_1 l"></b><b class="r2_2 r"></b></div>
      <div class="brd">
        <h1>
          <div><a href="http://www.5hawgs.com/727" target="_blank"
		   class="more">更多</a></div>
          <a href="http://www.5hawgs.com/622" target="_blank"
		   class="title">优质词条</a></h1>
        <div class="good_word"> <a href="http://www.5hawgs.com/089">
		免费模板网</a>
          <div class="clear"></div>
        </div>
      </div>
      <div><b class="r2_3 l"></b><b class="r2_4 r"></b></div>
    </div>
  </div>
  <div class="box3 r">
    <div class="box1" onMouseOver="this.className='box2'"
	 onMouseOut="this.className='box1'">
      <div><b class="r2_1 l"></b><b class="r2_2 r"></b></div>
      <div class="brd">
        <h1>
          <div><a href="http://www.5hawgs.com/137" target="_blank"
		   class="more">更多</a></div>
          <a href="http://www.5hawgs.com/354" target="_blank"
		   class="title">待完善词条</a></h1>
        <div class="good_word"> <a href="http://www.5hawgs.com/854">
		www.865171.cn</a> </div>
      </div>
      <div><b class="r2_3 l"></b><b class="r2_4 r"></b></div>
    </div>
  </div>
  <div class="clear"></div>
</div>
友荐云推荐

上一篇:FireFox下截取字符串显示省略号

下一篇:兼容各大浏览器的DIV固定定位方法

站长常用工具

最新代码

热门代码

赞助商链接