纯CSS代码实现图片轮显

<!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 profile="http://www.w3.org/2000/08/w3c-synd/#">
    <meta http-equiv="content-language" content="zh-cn" />
    <meta http-equiv="content-type" content="text/html;charset=gb2312" />
    <style>
    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.blueidea.com/articleimg/2007/03/4549/1.jpg" alt="" title="" id="a" />
    <img src="http://www.blueidea.com/articleimg/2007/03/4549/2.jpg" alt="" title="" id="b" />
    <img src="http://www.blueidea.com/articleimg/2007/03/4549/3.jpg" alt="" title="" id="c" />
    </dd>
    </dl>
    </body>
    </html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值