纯css制作网页轮播图
来源：互联网 发布：js prototype 继承 编辑：程序博客网 时间：2024/06/10 05:12
<html>
<head>
<title></title>
<style type="text/css">
a{text-decoration: none;}
.hoverbox{cursor: default;list-style: none;}
.hoverbox a .preview{display: none;}
.hoverbox a:hover .preview{display: block;position: absolute;top: 75px;left: 0px;z-index: 1;}
.hoverbox img{width: 100px;height: 75px;}
.hoverbox li{color: inherit;display: inline;float: left;position: relative;}
.hoverbox .preview{border-color: #000;width: 500px;height: 350px;}
</style>
</head>
<body>
<ul class="hoverbox">
<li>
<a href="#"><img src="1.jpg" /><img src="1.jpg" class="preview" /></a></li>
<li>
<a href="#"><img src="2.jpg" /><img src="2.jpg" class="preview" style="margin-left:-100px;"/></a></li>
<li>
<a href="#"><img src="3.jpg" /><img src="3.jpg" class="preview" style="margin-left:-200px;"/></a></li>
<li>
<a href="#"><img src="4.jpg" /><img src="4.jpg" class="preview" style="margin-left:-300px;"/></a></li>
<li>
<a href="#"><img src="5.jpg" /><img src="5.jpg" class="preview" style="margin-left:-400px;"/></a></li>
<li>
</ul>
</body>
</html>
<head>
<title></title>
<style type="text/css">
a{text-decoration: none;}
.hoverbox{cursor: default;list-style: none;}
.hoverbox a .preview{display: none;}
.hoverbox a:hover .preview{display: block;position: absolute;top: 75px;left: 0px;z-index: 1;}
.hoverbox img{width: 100px;height: 75px;}
.hoverbox li{color: inherit;display: inline;float: left;position: relative;}
.hoverbox .preview{border-color: #000;width: 500px;height: 350px;}
</style>
</head>
<body>
<ul class="hoverbox">
<li>
<a href="#"><img src="1.jpg" /><img src="1.jpg" class="preview" /></a></li>
<li>
<a href="#"><img src="2.jpg" /><img src="2.jpg" class="preview" style="margin-left:-100px;"/></a></li>
<li>
<a href="#"><img src="3.jpg" /><img src="3.jpg" class="preview" style="margin-left:-200px;"/></a></li>
<li>
<a href="#"><img src="4.jpg" /><img src="4.jpg" class="preview" style="margin-left:-300px;"/></a></li>
<li>
<a href="#"><img src="5.jpg" /><img src="5.jpg" class="preview" style="margin-left:-400px;"/></a></li>
<li>
</ul>
</body>
</html>
0 0
- 纯css制作网页轮播图
- 纯CSS制作网页导航栏
- 无javascript,纯CSS制作的网页下拉菜单
- 纯CSS制作的网页中的lightbox效果
- 无javascript,纯CSS制作的网页下拉菜单
- 纯css制作 虾
- 纯css制作三角形箭头
- 纯CSS制作各种图形
- 纯CSS制作下拉导航
- 纯CSS小三角制作
- 纯CSS制作简单几何图形
- 纯css制作旋转图片
- 纯css制作三级菜单
- 纯css制作遮罩层特效
- 纯CSS制作各种图形
- 【css】制作网页图标
- div+CSS网页制作
- 制作网页---CSS定位
- Activity-Spinner
- div的变宽和变高 _复杂版
- 一些日常忽略的细节程序设置
- Android开源项目第五篇——优秀个人和团体篇
- 一次买卖问题（single sell profit）
- 纯css制作网页轮播图
- 编程从业五年的十四条经验，句句朴实
- 八皇后问题-回溯算法-c++
- 宏定义函数用法
- 如何解决硬盘数据恢复问题
- Poj 1061 青蛙的约会(扩展欧几里得)
- Java 猜数字游戏
- 编码规范集锦
- 今天下大雨我想起了吴若希的歌曲
