现在的位置: 首页 > 综合 > 正文

纯CSS代码实现图片轮显

2018年05月15日 ⁄ 综合 ⁄ 共 1317字 ⁄ 字号 评论关闭

<!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>

抱歉!评论已关闭.