站长资源 网络编程

css图片切换效果代码[不用js]

整理:jimmy2024/10/26浏览2次

简介纯css图切换练习教程来自snwebsite a{ display:block; border:1px solid #cccccc; width:20px;

<!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>123</dt>             <dd>                 <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20080926074249449.jpg');"><img src="/UploadFiles/2021-04-02/20080926074249449.jpg" alt="css图片切换效果代码[不用js]" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>                 <a href="javascript:;" onclick="showimg('/upload/20080926074251309.jpg');"><img src="/upload/20080926074251309.jpg" alt="css图片切换效果代码[不用js]" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>                 <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20080926074251902.jpg');"><img src="/UploadFiles/2021-04-02/20080926074251902.jpg" alt="css图片切换效果代码[不用js]" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>             </dd>         </dl>     </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：css import与link的区别

下一篇：ASP、PHP与javascript根据时段自动切换CSS皮肤的代码

站长资源 网络编程

css图片切换效果代码[不用js]

最新资源

一句话新闻