只用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" >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 />

地址： [url]http://www.2d30.cn/CSSshili/200809/30-6.html[/url] （原文章地址） 版權全部，轉載時必須以連接形式註明做者和原始出處及本聲明。