<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../reset.css"> <meta charset="UTF-8"> <title>轮播图</title> <style> .box1{ width: 132px; height: 132px; margin: 50px auto; /* 将父元素开启相对定位， 子元素中的绝对定位则会参考父元素的位置； 且父元素的样式不发生改变 */ position: relative; } .box1 li{ position: absolute; } .box1 li:nth-child(1){ /* z-index: 1; */ } .box2{ position: absolute; bottom: 10px; margin-left: 4px; } .box2 a{ width: 4px; height: 4px; background-color: rgb(255, 255, 255, 0.6); /* display: block; */ float: left; border-radius: 50%; margin: 0 1px; /* 将所有点的边框颜色设置为透明，点的大小变得相同； 但背景颜色默认延伸到边框下边 */ border: 1px solid transparent; /* 设置背景颜色只在内容区下边 */ background-clip: content-box; z-index: 999; } /* 怎么对单独的点进行样式设计 */ .box2 a:hover{ background-color: white; border:1px solid rgb(255, 255, 255, 0.6); /* 怎么让所有的点横向对齐 */ } </style> </head> <body> <ul class="box1"> <li><a href="javascript:;"><img src="../1.jpg"></a></li> <li><a href="javascript:;"><img src="../2.jpg"></a></li> <li><a href="javascript:;"><img src="../3.jpg"></a></li> <li><a href="javascript:;"><img src="../4.jpg"></a></li> <li><a href="javascript:;"><img src="../5.jpg"></a></li> <div class="box2"> <a class="point1" href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </ul> </body> </html>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #用CSS呈现轮播图效果 #ampltDOCTYPE #ampltlink
