一个纯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" >1 </a> < a title ="" href="#b" >2 </a> < a title ="" href="#c" >3 </a> </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 />
< 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" >1 </a> < a title ="" href="#b" >2 </a> < a title ="" href="#c" >3 </a> </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 />
