码迷,mamicode.com
首页 > Web开发 > 详细

css一个图片包含多个图片|网站侧栏导航

时间:2015-11-29 13:26:39      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:

<html>
<head><title>Hello World</title>
<style>
.style1{
width:60px;margin-left:570px;position:fixed;left:50%;bottom:134px;_position:absolute;_top:expression(documentElement.scrollTop+documentElement.clientHeight - this.clientHeight - 134+‘px‘);display:block;
}
.style1 a{
background:url(./img/aa.png) no-repeat;
display:block;
width:60px;height:50px;
text-decoration:none;font:16px/50px "Microsoft YaHei";text-align:center;
color:white;
}
.style1 a span{
text-align:center;
display:none;
}
.style1 a:hover span{
background-color:#39F ;
display:block;width:59px;

}
.style1 .gouwu{
background-position:-85px -185px;
}
.style1 .liren{
background-position:-85px -236px;
}
.style1 .xiuxian{
background-position:-144px -236px;
}
.style1 .huidingbu{
background-position:-144px -185px;
}
</style>
</head>
<body>
<div><span>Hello World</span></div>
<div class="style1">
<a href="javascript:window.scrollTo(0,638)" class="gouwu"><span>购物</span></a>
<a href="javascript:window.scrollTo(0,1600)" class="liren"><span>丽人</span></a>
<a href="javascript:window.scrollTo(0,2080)" class="xiuxian"><span>休闲</span></a>
<a href="javascript:window.scrollTo(0,0)" class="huidingbu"><span>回顶部</span></a>
</div>
</body>
</html>

  技术分享

css一个图片包含多个图片|网站侧栏导航

标签:

原文地址:http://www.cnblogs.com/little-aladdin/p/5004582.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!