使用定位制作轮播图样式：
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> <!-- ret.css文件内容参考：https://www.cnblogs.com/lanshanxiao/p/12663192.h安徽滁州技师学院tml --> <link rel="stylesheet" href="./ret.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="/d/file/titlepic/u=3236871529,935574866&fm=26&gp=0.jpg" alt=""> </a> <a href=""> <img src="/d/file/titlepic/u=3236871529,935574866&fm=26&gp=0.jpg" alt=""> </a> <a href=""> <img src="/d/file/titlepic/u=3236871529,935574866&fm=26&gp=0.jpg" alt=""> </a> </div> <!-- 切换图片的左右按钮 --> <div class="left"><&优秀作文250字lt;/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>效果展示：
本文发布于:2023-04-03 17:48:33，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/91cb592550a6b7388691d9fb843f380f.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：7.使用定位制作轮播图样式.doc
本文 PDF 下载地址：7.使用定位制作轮播图样式.pdf
| 留言与评论（共有 0 条评论） |
