黑马程序员技术交流社区

标题: 技术贴 [打印本页]

作者: 魏晓冬 时间: 2020-3-4 08:56
标题: 技术贴
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
      * {
         margin: 0;
         padding: 0;
      }

      a {
         text-decoration: none;
      }

      li {
         list-style: none;
      }

      .box {
         /* 子绝父相 */
         position: relative;
         width: 520px;
         height: 280px;
         margin: 100px auto;
      }

      .box img {
         width: 100%;
      }

      .box .left,
      .box .right {
         position: absolute;
         /* 用了绝对定位,一定要给偏移量,哪怕是0 */
         /* 自动居中的公式,绝地定位后,50%父盒子高或者宽,margin自己的一半 */
         top: 50%;
         margin-top: -15px;
         /* 绝对定位后,可以直接设置高宽 */
         width: 20px;
         height: 30px;
         line-height: 30px;
         background-color: rgba(0, 0, 0, .3);
         color: #ffffff;
         text-align: center;
      }

      .box .left {
         left: 0;
         border-radius: 0 15px 15px 0;
      }

      .box .right {
         right: 0;
         border-radius: 15px 0 0 15px;
         /* border-top-left-radius: 15px;
         border-bottom-left-radius: 15px; */
      }

      .box .circle {
         position: absolute;
         bottom: 20px;
         left: 50%;
         margin-left: -35px;
         background-color: rgba(255, 2550, 255, .3);
         border-radius: 7px;
      }

      .circle li {
         float: left;
         margin: 3px;
         height: 8px;
         width: 8px;
         background-color: #fff;
         border-radius: 50%;
      }

      /* 权重问题 */
      .circle .current {
         background-color: orange;
      }
</style>
</head>

<body>
<div class="box">
      <img src="../images/tb.jpg" alt="">
      <a href="#" class="left"> < </a>
      <a href="#" class="right"> > </a>
      <ul class="circle">
         <li> </li>
         <li class="current"></li>
         <li></li>
         <li></li>
         <li></li>
      </ul>
</div>
</body>

</html>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2