隻用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;

  overflow:hidden;

img {

  border:1px solid black

dt {

  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]（原文章位址）

版權所有，轉載時必須以連結形式注明作者和原始出處及本聲明。