头闻号

宜兴市盛凯化工有限公司

精细化学品加工

首页 > 新闻中心 > 科技常识:css实现点击滚动翻页的效果(无js)
科技常识:css实现点击滚动翻页的效果(无js)
发布时间:2024-11-09 01:47:50        浏览次数:3        返回列表

今天小编跟大家讲解下有关css实现点击滚动翻页的效果(无js) ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css实现点击滚动翻页的效果(无js) 的相关资料,希望小伙伴们看了有所帮助。

复制代码代码如下: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <style> dl { position:absolute; width:389px; height:154px; border:10px solid #eee; } dd { margin:0; width:389px; height:154px; 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> </head> <body> <dl> <dt><a href=""title="">1</a><a href=""title="">2</a><a href=""title="">3</a></dt> <dd> <img src="https://www.aidi.net.cn/uploadfile/200806/17/86181645617.jpg"alt=""title=""id="a"/> <img src="https://www.aidi.net.cn/uploadfile/200806/17/61181646102.jpg"alt=""title=""id="b"/> <img src="https://www.aidi.net.cn/uploadfile/200806/17/D9181646550.jpg"alt=""title=""id="c"/> </dd> </dl> </body> </html>

来源:爱蒂网