7.使用定位制作轮播图样式
使用定位制作轮播图样式:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- reset.css文件内容参考:https://www.cnblogs.com/lanshanxiao/p/12663192.html --> <link rel="stylesheet" href="./reset.css"> <style> .container{ width:500px; height:300px; margin:0 auto; border:1px solid #000; overflow: hidden; position:relative; } .container .imgs{ width:1500px; height:300px; } .container .imgs a img{ width:500px; height:300px; float:left; } .container .left, .container .right{ width:50px; height:50px; border-radius: 50%; background-color: rgba(0,0,0,.5); text-align: center; line-height: 50px; font-size: 40px; font-weight: bold; cursor: pointer; color:#ccc; position:absolute; top:125px; } .container .left{ left:20px; } .container .right{ right:20px; } .container .left:hover, .container .right:hover{ color:#000; } .container .shade{ width:100%; height:50px; position: absolute; left:0; bottom:0; background-color: rgba(0,0,0,.5); } .container .shade .title{ float:left; height:50px; line-height: 50px; text-align: center; color:#fff; font-size:30px; font-weight: bold; margin:0 10px; cursor: pointer; } .container .shade .circle{ margin-right:20px; } .container .shade .circle ul>li{ width:15px; height:15px; background-color:#fff; border-radius: 50%; float:right; margin: 20px 5px; cursor: pointer; } .container .shade .circle ul>li:hover{ background-color:lightblue; } </style> </head> <body> <div class="container"> <!-- 3张图片 --> <div class="imgs"> <a href=""> <img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3236871529,935574866&fm=26&gp=0.jpg" alt=""> </a> <a href=""> <img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3236871529,935574866&fm=26&gp=0.jpg" alt=""> </a> <a href=""> <img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3236871529,935574866&fm=26&gp=0.jpg" alt=""> </a> </div> <!-- 切换图片的左右按钮 --> <div class="left"><</div> <div class="right">></div> <!-- 图片下方的文字描述和圆点 --> <div class="shade"> <div class="title">西湖好风景</div> <div class="circle"> <ul> <li></li> <li></li> <li></li> </ul> </div> </div> </div> </body> </html>
效果展示: