百度百科的一个小效果

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

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

相关文章

来自专栏未闻Code

英文文档帮查&翻译计划

以CSDN为首,知乎其次,cnblog带路的一大批博客上充斥着大量低质量的编程入门教程,代码粗制滥造,毫无缩进,没有高亮,东抄西抄。初学者如果长期参照这种垃圾博...

2338
来自专栏施炯的IoT开发专栏

How-to: 利用Web Camera模拟Windows Phone 7的重力加速度传感器

引言         目前,对于我们国内大多数的Windows Phone 7开发者来说,模拟器是调试程序的唯一选择。因此,和硬件相关的一些功能就没有办法进行...

1775
来自专栏程序员叨叨叨

【8】如何写出一篇登得上大雅之堂的技术博客

写博客之前,一定要在心里好好地问自己:我为什么要写博客?我记得自己初入简书是受学长李响同學引导,因其奇佳的段子手天赋引来了诸多粉丝,尤其是《李响同學 #你的包里...

501
来自专栏FreeBuf

利用开源工具TempestSDR实现屏显内容远程窃取

你可能还不了解“TEMPEST”,它是用来窃取远程视频信息的一种基于软件定义的无线电平台技术,可被当做间谍工具包使用,用来针对某些目标电子设备的射频信号(声音和...

2025
来自专栏编程之旅

Python——爬虫实战 爬取淘宝店铺内所有宝贝图片

之前用四篇很啰嗦的入门级别的文章,带着大家一起去了解并学习在编写爬虫的过程中,最基本的几个库的用法。

1232
来自专栏Python小屋

手把手教你使用Python+scrapy爬取山东各城市天气预报

1、在命令提示符环境使用pip install scrapy命令安装Python扩展库scrapy,详见Python使用Scrapy爬虫框架爬取天涯社区小说“大...

1113
来自专栏JackieZheng

解决Myeclipse下Debug出现Source not found以及sql server中导入数据报错

前言:在空间里回顾了我的2014,从生活、技术、家庭等各方面对自己进行总结剖析,也是给自己一个交代。也想在博客上专门写一篇2014年度菜鸟的技术路回忆录,但是...

2315
来自专栏小文博客

在线图片识别系统Ver2.0

该工具是小文博客基于Django框架开发的图片识别系统,调用腾讯云API,目前可识别身份证、驾驶证、行驶证、营业执照、印刷体、手写体等十几种图片。在Ver1.0...

5732
来自专栏xingoo, 一个梦想做发明家的程序员

我的AI之路 —— OCR文字识别快速体验版

还记得前一阵某小盆友拿过来一个全是图片的ppt,让我把里面的文字给抠出来(我当时很震惊!!!),随后在网上随便找了个OCR的在线文档转换软件,就给转过来了——这...

1402
来自专栏刘望舒

Android启动页黑屏及最优解决方案

相信做过Android的朋友都知道,当一个APP启动时,界面会首先展示一个白屏或者黑屏,然后再进入欢迎页,稍作停留最后进入APP主页。那么这个黑屏或者白屏到底是...

853

扫码关注云+社区