zoukankan      html  css  js  c++  java
  • 静态轮播图布局

    直接贴代码了

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>轮播图静态布局</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .tab li{
                list-style: none;
            }
            .box{
                width: 653px;
                height: 350px;
                border: 3px solid red;
                margin: 100px auto;
                position: relative;
                overflow: hidden;
            }
            .box .tab{
                position: absolute;
                bottom: 20px;
                left: 50%;
                margin-left: -68px;
                overflow: hidden;
                background-color: aqua;
                width: 130px;
                border-radius: 20px;
            }
            .box .tab li{
                width: 10px;
                height: 10px;
                margin: 5px 10px;
                background: snow;
                float: left;
                border-radius: 50%;
                cursor: pointer;
            }
            .box .tab li.active{
                background-color: red;
            }
    
            .box .btn li{
                position: absolute;
                width: 30px;
                height: 30px;
                background: rgba(0,0,0,0.5);
                font-size: 20px;
                line-height: 30px;
                text-align: center;
                font-weight: bolder;
                top: 50%;
                margin-top: -15px;
                display: none;
    
            }
            .box .btn .left{
                left: -5px;
                border-radius: 0 50% 50% 0;
            }
            .box .btn .right{
                right: -5px;
                border-radius: 50% 0 0 50%;
            }
            .box:hover .btn li{
                display: block;
            }
            .box .btn li:hover{
                background: rgba(0,0,0,0.8);
                color: white;
                cursor: pointer;
            }
    
    
    
    
    
    
    
    
    
    
        </style>
    </head>
    <body>
    
    <div class="box">
        <img src="//img.alicdn.com/tfs/TB1N6Dqff9TBuNjy0FcXXbeiFXa-520-280.jpg_q90" width="653" height="350">
        <ul class="tab">
            <li></li>
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    
        <ul class="btn">
            <li class="left">&lt;</li>
            <li class="right">&gt;</li>
        </ul>
    </div>
    
    
    </body>
    </html>
  • 相关阅读:
    istringstream、ostringstream、stringstream 类介绍 .
    istringstream、ostringstream、stringstream 类介绍 .
    Leading and Trailing(LightOJ
    欧拉函数(重要性质)
    UML——概述
    UML——用例视图
    JUnit——assertThat(acture,matcher)
    JUnit——Failure与Error
    JUnit——Annotation
    JUnit——运行多个测试方法
  • 原文地址:https://www.cnblogs.com/shuai06/p/12397502.html
Copyright © 2011-2022 走看看