专栏首页练小习的专栏百度百科的一个小效果

百度百科的一个小效果

百度百科的一个小效果,感觉不错,取下来保存

方法就是普通的onMouseOve事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>百度</title>

<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://img.baidu.com/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://img.baidu.com/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://img.baidu.com/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>

</head>

<body>

<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="/recommend/?func=hqmore" target="_blank" class="more">更多</a></div><a href="/recommend/?func=hqmore" target="_blank" class="title">优质词条</a></h1>

<div class="good_word">

aaa

<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="/improve/" target="_blank" class="more">更多</a></div><a href="/improve/" target="_blank" class="title">待完善词条</a></h1>

<div class="good_word">

bbb

</div>

</div>

<div><b class="r2_3 l"></b><b class="r2_4 r"></b></div>

</div>

</div>

<div class="clear"></div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 可视化格式模型-clear特性

    ‘clear’特性 该特性表明一个元素框的哪一边不可以和先前的浮动框相邻。’clear’特性不考虑它自身包含的浮动子元素和不处于同一个Block formatt...

    练小习
  • 请不要忘了,有一个值叫 inherit

    请不要忘了,有一个值叫 inherit 下午在写组件的时候瞄了一眼qq群,看到有个哥们在问一道css的问题,他的问题如下图 ? 红圈部分超出主体的部分,他是用伪...

    练小习
  • css制作表单

    对于表单,很常用。但是在web standard建站的时候,他的排版往往让人遗忘,到了真正用到的时候就发现让人头疼,当然我也遇到过。我现在要介绍一个用< fie...

    练小习
  • 前端面试宝典(四)

    Hello小伙伴们,我又来了,来的太不频繁,兔妞也自惭形秽!但是真的是有机会就更新啦~最近烦心事也很多,不过还是要努力开心呀,每天都是愉快的新的一天!

    萌兔IT
  • CSS基础(五):定位

    相对定位指的是设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。

    bear_fish
  • 可视化格式模型-clear特性

    ‘clear’特性 该特性表明一个元素框的哪一边不可以和先前的浮动框相邻。’clear’特性不考虑它自身包含的浮动子元素和不处于同一个Block formatt...

    练小习
  • CSS垂直居中

    乐心湖
  • jQuery登录验证

    week
  • electron制作聊天界面(仿制qq)

    这里解释一下为什么有一个paddingRight 因为我们的滚动条是5px 如果不加 在滚动条显示的时候页面会抖动

    李昊天
  • 水平居中和垂直居中

    本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</titl...

    echobingo

扫码关注云+社区

领取腾讯云代金券