百度百科的一个小效果

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

方法就是普通的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 条评论
登录 后参与评论

相关文章

来自专栏字根中文校对软件

BlockHackaThonclub 区块链初学者入门之: metamask

区块链初学者入门之: metamask 环境: 浏览器Chrome ,安装 MetaMask 插件 选择Ropsten Test Nestwork 测试网路...

3609
来自专栏小白课代表

PPT进阶之路(一)

又到年终了,学生该交各种作业的PPT了,工作的人该做各种年终报告了,作为【演示】中最常用的软件

802
来自专栏腾讯云数据库(TencentDB)

腾讯云新一代自研数据库CynosDB技术详解——架构设计

CynosDB是腾讯云新一代分布式数据库,100%兼容MySQL和PostgreSQL,支持存储弹性扩展,一主多从共享数据,性能更是超越社区原生MySQL和Po...

11.7K6
来自专栏游戏开发那些事

【UE4游戏开发】安装UE4时报SU-PQR1603错误的解决方法

  马三在开发过程中一直用的都是UE4.9版本(很久没有更新了。),因为功能都够用,所以也懒得去更新。这不最近UE4 发布了最新的4.14版本,本来想尝个鲜,试...

1453
来自专栏后端云

ceph数据存储的几个概念

最下面的蓝色长条可以看成一个个主机,里面的灰色圆柱形可以看成一个个OSD,紫色的cabinet可以也就是一个个机柜, 绿色的row可以看成一排机柜,顶端的roo...

2265
来自专栏SEO

SEOer必学网站分析神器(全新解析一)

3409
来自专栏FreeBuf

暴雪游戏存在DNS重绑定漏洞可导致玩家电脑被远程劫持

谷歌安全研究员Tavis Ormandy发现暴雪游戏存在一个严重漏洞,攻击者利用该漏洞针对游戏玩家电脑可实现远程恶意代码执行。“魔兽世界”、“守望先锋”、“暗黑...

1868

在Ubuntu 14.04上运行反恐精英:全球攻势(CS:GO)

反恐精英:全球攻势(CS:GO)是Valve出品的一款第一人称射击游戏。您可以通过自己架设服务器来完全控制您的游戏和游戏模式,以便于您设定您想要的CS:GO的精...

1224
来自专栏二进制文集

思维导图学Linux

使用思维导图 Mindjet MindManager 制作的《鸟哥的Linux私房菜基础篇-第三版》学习笔记。

813
来自专栏西枫里博客

宝塔面板下phpMyadmin曝502错误,无法正常使用

前几天修改博客界面,由于本地只有很少几篇测试文章,对内容溢出的测试不完全,虽然复制了一堆无用的内容在里面进行测试。今天就想到把服务器上的数据和本地同步一下。

1321

扫码关注云+社区