快捷導航

css圖片切換效果代碼[不用js]

更新時間：2008年09月26日 07:42:52 作者：

非常不錯的圖片切換效果代碼，不用css，代碼比較精簡，推薦使用，注意一下多瀏覽器的兼容性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>     <head>         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />         <title>純css圖切換 練習 教程來自snwebsite</title>         <style type="text/css">             a{                 display:block;                 border:1px solid #cccccc;                 width:20px;                 height:20px;                 margin:1px;             }             dl{                 position:absolute;                 width:240px;                 height:170px;             }             dt{                 position:absolute;                 right:1px;                 top:25px;             }             dd{                 width:240px;                 height:170px;                 overflow:hidden;             }         </style>              </head>     <body>         <dl>             <dt><a href="#a">1</a><a href="#b">2</a><a href="#c">3</a></dt>             <dd>                 <img src="/upload/20080926074249449.jpg" id="a" />                 <img src="/upload/20080926074251309.jpg" id="b" />                 <img src="/upload/20080926074251902.jpg" id="c" />             </dd>         </dl>     </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: