<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
    <title>纯CSS实现图片幻灯片效果(www.newxing.com)</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312" />
    <style type="text/css">
        dl { position:absolute;width:240px;height:170px;border:10px solid #eee;  }
        dd { margin:0;width:240px;height:170px;overflow:hidden;  }
        img{ border:1px solid black   }
        dt { position:absolute;right:3px;top:50px;   }
        a { display:block;margin:1px;width:20px;height:20px;text-align:center;font:700 12px/20px "宋体",sans-serif;color:#fff;text-decoration:none;background:#666;border:1px solid #fff;filter:alpha(opacity=40);opacity:.4;   }
        a:hover {background:#000}
    </style>
</head>
<body>
<dl>
    <dt><a href="#a" title="">1</a>
    <a href="#b" title="">2</a>
    <a href="#c" title="">3</a>
    </dt>
    <dd><img src="http://www.newxing.com/img/450/1.jpg" width="240" height="170" alt="" id="a" />
        <img src="http://www.newxing.com/img/450/2.jpg" width="240" height="170" alt="" id="b" />
        <img src="http://www.newxing.com/img/450/3.jpg" width="240" height="170" alt="" id="c" />
    </dd>
</dl>
</body>
</html>

纯css实现幻灯片效果的更多相关文章

  1. 纯css做幻灯片效果

    css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...

  2. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  3. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  4. 纯css实现打字效果

    概述 很早以前就在别人的博客上面看到打字动画了,觉得非常炫酷,以为是用js做的,找了半天也没找到js在哪里.今天看<css揭秘>,碰巧看到书上打字动画的实现了,而且是纯css实现的!我参考 ...

  5. 纯 CSS 实现幻灯片播放

    介绍:   今日看到一道面试题,关于 使用纯CSS,不利用js, 写一个简单的幻灯效果页面.于是做了一个小demo,建议使用chrome,IE11查看~~ 主要思想: 利用 CSS3的 伪类选择器 : ...

  6. IE7,8纯css实现圆角效果

    众所周知,IE7,8不支持border-radius效果.但我们同样有办法用css实现这个效果,方法就是用border来模拟. <!DOCTYPE html> <html lang= ...

  7. HTML5 CSS3专题 纯CSS打造相册效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时 ...

  8. 纯CSS实现JS效果研究

    利用CSS3:checked选择器和~配合实现tab切换 效果: 代码: <style> body,div,input,label{ margin:0; padding:0; } #tab ...

  9. 使用纯css实现波浪效果

    有时候我们需要实现水晃动的效果,其实我们可以通过css旋转动画和圆角来实现. 首先来2个div,外层div相对定位,内层div绝对定位,内层div大致位于外层div上半部分.外层div设置一个颜色较深 ...

随机推荐

  1. C# 导出word文档及批量导出word文档（1）

         这里用到了两个dll,一个是aspose.word.dll,另外一个是ICSharpCode.SharpZipLib.dll,ICSharpCode.SharpZipLib.dll是用于批量 ...

  2. java学习——集合框架(Collection,List,Set)

    集合类的由来: 对象用于封装特有数据,对象多了需要存储,如果对象的个数不确定,就使用集合容器进行存储. 集合特点:1,用于存储对象的容器.2,集合的长度是可变的.3,集合中不可以存储基本数据类型值. ...

  3. Qt5-控件-QRadioButton-单选按钮-用于从多个选项中选取一个-单选神器

    #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QRadioButton> ...

  4. C/C++中的++a和a++

    代码: #include <iostream> #include <cstdio> using namespace std; int main(){ ; (++a)+=a; / ...

  5. Secure CRT 如何连接虚拟机里面的CentOS系统 当主机没有网的时候 作者原创 欢迎转载

    当家里没有网络的时候: 1.第一步:首先保证主机所有的网卡都没有分享连接给VM8这一块网卡 如图:这个设置就保证了无线网络连接这块网卡没有分享给VM8这一块网卡 第二步:启用VM8这一块网卡,右键en ...

  6. 如何使用cocos2dx-jsbinding 来处理分辨率适配

    首先说点题外话,对于任何大型项目来说,coding的规范重要,在cocos2dx-jsbinding这个框架中,javascript是一个绝对核心的脚本语言,99%的游戏逻辑都由js完成.脚本的编写量 ...

  7. 数据库和Doctrine（转载自http://www.111cn.net/phper/332/85987.htm）

    对于任何应用程序来说最为普遍最具挑战性的任务,就是从数据库中 读取和持久化数据信息.尽管symfony完整的框架没有默认集成ORM,但是symfony标准版,集成了很多程序,还自带集成了Doctrin ...

  8. CSS强制图片大小

    相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决. 该CSS的功能是:大于600的图片自动调整为600显示. <style type ...

  9. 基于python的接口测试学习笔记一（初出茅庐）

    第一次写博客笔记,讲一下近来学习的接口自动化测试.网上查阅了相关资料,最后决定使用python语言写接口测试,使用的是python的第三方库requests.虽然python本身标准库中的 urlli ...

  10. Spark保存到HDFS或本地文件相关问题

    spark中saveAsTextFile如何最终生成一个文件 http://www.lxway.com/641062624.htm 一般而言,saveAsTextFile会按照执行task的多少生成多 ...