CSS是实现轮播图效果--position定位学习

最新推荐文章于 2022-12-26 18:08:10 发布

程序员阿卢

最新推荐文章于 2022-12-26 18:08:10 发布

阅读量793

点赞数

本文链接：https://blog.csdn.net/ljq54/article/details/106803451

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>css轮播图效果</title>
   </head>
   <style type="text/css">
       *{
       padding: 0;
       margin: 0;
   }
   ol{
       list-style: none;
   }
   .banager{
       margin: 0 auto;
       width: 520px;
       height: 280px;
       /*background: url(img/banager.jpg);*/
       position: relative;

   }
   .next,.prev{
       width: 30px;
       height: 50px;
       position: absolute;
       top: 50%;
       margin-top: -25px;
   }
   .next{
       right: 0;
       background: url(img/btn2.jpg);
       background-repeat: no-repeat;
   }
   .prev{
       left: 0;
       background: url(img/btn1.jpg);
       background-repeat: no-repeat;
   }
   ol{
       width: 120px;
       height: 30px;
       position: absolute;
       bottom: 10px;
       right: 50%;
       margin-right: -60px;

   }
   ol li{
       width: 28px;
       height: 30px;
       float: left;
       background-color: gold;
       text-align: center;
       line-height: 30px;
       border-radius: 50%;
       color: black;
   }
   .curr{
       background-color: blue;
   }
   a{
       /**
       * 去掉下划线
       */
       text-decoration:none;
   }

   </style>
   <body>
       <div class="banager">
           <a href="#"><img src="img/banager.jpg" title="轮播图"></a>
           <span class="prev"></span>
   <span class="next"></span>
   <ol>
       <li class="curr"><a href="#">1</a></li>
       <li><a href="#">2</a></li>
       <li><a href="#">3</a></li>
       <li><a href="#">4</a></li>
   </ol>
       </div>

   </body>
</html>