只用css控制的图片切换

一个纯DIV+CSS制作的图片切换的实例，高手制作，值得收藏，纯css制作的图片切换更有利于搜索引擎的收录和友好。下面我们看一下高手是怎么写的纯CSS图片切换的。

<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt-->
<meta http-equiv="content-language" content="zh-cn" />
<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><dl><dt><a title="" href="#a">1a><a title="" href="#b">2a><a title="" href="#c">3a> dt><dd><img id="a" title="" alt="" src="/uploads/allimg/080930/1124120.jpg" /> <img id="b" title="" alt="" src="/uploads/allimg/080930/1124121.jpg" /> <img id="c" title="" alt="" src="/uploads/allimg/080930/1124122.jpg" /> dd>dl><br />

版权所有，转载时必须以链接形式注明作者和原始出处及本声明。