百度百科的一个小效果

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

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

相关文章

来自专栏企鹅号快讯

从网站结构出发,提升搜索引擎的友好度

搜索引擎爬取网站内容都是从网站的结构出发,为了提升搜索引擎的友好的,优化网站结构是重点。和对待用户一样,对待搜索引擎也需要投其所好,才能获取它的友好度。 ? 1...

1846
来自专栏ytkah

微信公众平台原创声明和留言功能面向微信认证帐号公测

  昨天夜间微信公众平台原创声明和留言功能正式面向微信认证帐号公测了,网友直呼“那我有继续写的动力了,我要继续曾经中断的码字工作了”“支持原创,为自己代言”“知...

2675
来自专栏ThoughtWorks

无障碍性测试工具 Pa11y|技术雷达

A11y(Accessibility)指的是用来帮助身心障碍者(残疾人)更加便利的使用先进技术的能力。目前世界上主要由各种人权组织和政府通过一些民间规则和政府规...

2805
来自专栏云加新鲜事儿

云+社区版权协议及知识产权说明

1、用户在社区上发表的全部原创内容,著作权均归用户本人所有。用户可授权第三方以任何方式使用,不需要得到社区的同意。

9.9K4
来自专栏marsgis

基于 Cesium 的Web三维地球客户端程序开发框架

MarsGIS for Cesium三维地球框架 是火星科技研发的一个Web三维地图开发平台系统,是火星科技团队成员多年GIS开发和Cesium使用的技术沉淀。...

1291
来自专栏华仔的技术笔记

打包出现your account does not have permission to create iOS distribution

3506
来自专栏ytkah

如何从微信公众平台上下载关注用户(备份微信关注用户)

  最近有位网友问ytkah怎么备份微信公众平台的关注用户,她说由于种种原因有些朋友会取消微信关注,想用微信小号来加这些用户,曲线留住他们。她的出发点是好的,留...

2698
来自专栏魏艾斯博客www.vpsss.net

WordPress 百度熊掌号自动推送插件安装使用教程

百度熊掌号是百度推出的新平台,把你网站的原创内容在最短时间内展现到百度搜索结果中,有助于提高百度搜索排名和权重,也就提高了网站流量。按照百度要求,接入百度熊掌号...

552
来自专栏腾讯技术工程官方号的专栏

腾讯发布2017年代码报告

腾讯发布2017年代码报告,对过去一年研发数据进行了统计,涵盖代码、开发者、语言等基础数据。 点击下图查看↓↓↓ ?

4628
来自专栏知晓程序

首家服务于小程序插件的交易平台:知晓程序「插件市场」正式上线!

1423

扫码关注云+社区