当前位置：网站首页>Rotation chart

Rotation chart

2022-07-27 13:22:00 【Sorry, this person doesn't exist】

Shuffling figure 

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/layout/css/reset.css">
    <style> /*  Set the container of the picture  */ .img-list{
      width: 590px; height: 470px; margin: 100px auto; /*  by ul Turn on relative positioning , The aim is to make ul Medium pointer It can be equivalent to ul Position rather than relative to the initial containing block （html） To locate  */ position: relative; } /*  Set up li */ .img-list li{
      position: absolute; } /*  Display the specified picture by modifying the level of the element  */ .img-list li:nth-child(){
      z-index: 1; } /*  Set the style of the navigation point  */ .pointer{
      position: absolute; z-index: 9999; bottom: -550px; left: 100px; } .pointer a{
      /*  Set the element to float left  */ float: left; width: 50px; height: 50px; margin-left: 15px; border-radius: 50%; background-color: rgba(255, 255, 255, .3); /*  Set the background color value to the content area , Borders and inner borders no longer have background colors , You can also use box-shadow: transparent */ background-clip: content-box; /* box-shadow: transparent; */ border: 2px solid transparent; } .pointer a.active,.pointer a:hover{
      background-color: #fff; border: 2px solid rgba(255, 255, 255, .3); } </style>
</head>
<body>
    <ul class="img-list">
        <li><a href="javascript:;"><img src="/img/1.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="/img/1.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="/img/1.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="/img/1.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="/img/1.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="/img/1.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="/img/1.jpg" alt=""></a></li>

        <div class="pointer">
            <a class="active" href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </ul>
</body>
</html>

  Some of them need to be debugged by themselves , Just change the size
原网站

版权声明
本文为[Sorry, this person doesn't exist]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/208/202207271110149317.html

边栏推荐

猜你喜欢

随机推荐