<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的主页</title>
<style type="text/css">
#container{
width:90%;
margin:0 auto;
}
#top h1{
text-align:center;
}
#content{
background:url(bg.jpg) no-repeat;
width:1024px;
height:769px;
margin:0 auto;
position:relative;
z-index:9;
overflow:hidden;
}
#content > div{
position:absolute;
border:solid 0px #999;
width:100px;
height:100px;
z-index:10;
}
#content > div>span{
color:#F00;
font-size:18px;
position:absolute;
top:45px;
left:1000px;
}
#content:hover >div{
border:solid 1px #999;
}
#hot1{
left:220px;
top:300px;
}
#hot2{
left:460px;
top:130px;
}
#hot3{
left:720px;
top:400px;
}
#hot4{
left:520px;
top:500px;
}
#hot5{
left:350px;
top:560px;
}
#content > div:hover>span
{
left:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>我的主页</h1>
</div>
<div id="content">
<div id="hot1">
<span>小山</span>
</div>
<div id="hot2">
<span>极光</span>
</div>
<div id="hot3">
<span>极光下的草地</span>
</div>
<div id="hot4">
<span>石头</span>
</div>
<div id="hot5">
<span>极光下的石头</span>
</div>
</div>
<div id="floor"></div>
</div>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
图片焦点效果--让浏览者更容易找到自己想要的信息
共3个文件
jpg:2个
html:1个
4星 · 超过85%的资源 需积分: 9 15 下载量 54 浏览量
2010-12-04
17:46:17
上传
评论
收藏 247KB RAR 举报
温馨提示
图片焦点效果 鼠标悬浮图片上后弹出若干个小框 可以用在提提醒用户某些需要注意的地方
资源推荐
资源详情
资源评论
收起资源包目录
图片焦点效果.rar (3个子文件)
图片焦点效果
bg.jpg 175KB
index.html 1KB
Snap15.jpg 76KB
共 3 条
- 1
资源评论
- kylecust2014-11-17资源很好,不过,不是我要的那种效果
JeffXiong
- 粉丝: 974
- 资源: 69
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功