纯HTML和CSS实现JD轮播图效果
发布时间:2018-06-01 14:46:42 作者:佚名 我要评论
这篇文章主要介绍了纯HTML和CSS实现JD轮播图效果,需要的朋友可以参考下
使用了纯HTML和CSS实现了JD的轮播图,没有加动态效果,主要是使用了定位的知识。
,如图为两个侧边箭头图片。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LunBo</title> <style> *{ padding: 0; margin: 0; } li{ list-style: none; } .lunbo{ margin: 40px auto; height: 470px; width: 590px; position: relative; } .left,.right{ position: absolute; top: 50%; margin-top: -18px; width: 24px; height: 36px; } .left{ left: 0; } .right{ right: 0; } .lunbo ul{ height: 18px; width: 151px; background: rgba(255,255,255,.3); position: absolute; bottom: 10px; left: 50%; margin-left: -76px; border-radius: 10px; } .lunbo li{ height: 14px; width: 14px; border-radius: 50%; background-color: #fff; float: left; margin: 2px; } .lunbo .current{ background-color: #f40; } </style> </head> <body> <div class="lunbo"> <img src="images/lunbo.jpg" alt=""> <div class="left"><img src="images/left.png" alt=""></div> <!-- 也可以使用链接然后使用backgrounf --> <div class="right"><img src="images/right.png" alt=""></div> <ul> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
实现了如下效果
总结
以上所述是小编给大家介绍的纯HTML和CSS实现JD轮播图效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- 这篇文章主要介绍了HTML5+css3:3D旋转木马效果相册,主要运用了perspective和tranlateY这两个知识点,有需要的可以了解一下。2017-01-03
- 这篇文章主要介绍了html5+css如何实现中间大两头小的轮播效果的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-12-06
- 这篇文章主要介绍了HTML+CSS+JS实现堆叠轮播效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-08
- 这篇文章主要介绍了HTML5轮播图全代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-04-22
- 本文主要介绍了HTML+CSS实现全景轮播的示例代码,实现了一个简单的网页布局,其中包含了五个不同的盒子,每个盒子都有一个不同的背景图片,并且它们之间有一些间距,下面就2024-02-02
最新评论