zoukankan      html  css  js  c++  java
  • css点击轮播

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    *{ margin: 0; padding: 0;}
    .box{ 300px;margin: 100px auto; position: relative; border: 1px solid #ccc;}
    .wp{ position: absolute; top: 60px; left: 20px; font-weight:bold;">#336699; color: #fff; 50px; z-index: 6}
    label{ display: block; line-height: 40px; border-bottom: 1px dashed #ffffff; text-align: center}
    .lab_last{ border-bottom: none;}
    .view_one{background-image: url("pic/1.jpg"); position: absolute; 300px; height: 300px; background-repeat: no-repeat;}
    .view_two{background-image: url("pic/2.jpg"); position: absolute; 300px; height: 300px; background-repeat: no-repeat;}
    .view_three{background-image: url("pic/3.jpg"); position: absolute; 300px; height: 300px; background-repeat: no-repeat;}
    .box .view{ transition: left 0s .75s; left: 0; top: 0;}
    .box input[id^="get_img"]:checked + .view{ left: 0; top: 0; z-index: 4; transition: left 0s .75s;}
    </style>
    </head>
    <body>
    <div class="box">
    <div class="wp">
    <label for="get_img_btn1">风景1</label>
    <label for="get_img_btn2">风景2</label>
    <label for="get_img_btn3" class="lab_last">风景3</label>
    </div>
    <input id="get_img_btn1" type="radio" checked="checked" name="pic" >
    <span class="view view_one"></span>
    <input id="get_img_btn2" type="radio" name="pic">
    <span class="view view_two"></span>
    <input id="get_img_btn3" type="radio" name="pic">
    <span class="view view_three"></span>
    </div>
    </body>
    </html>
  • 相关阅读:
    Spark Streaming反压机制
    spark submit参数及调优
    kafka中的配额管理(限速)机制
    Kafka限流
    BlockingQueue
    Android 更改userdata的大小
    visual studio 2019 error MSB3073 exited with code 1
    ARM 链接脚本分析
    Android Bluetooth hci 命令分析
    Android 查看蓝牙hci日志
  • 原文地址:https://www.cnblogs.com/zhaocong/p/7326816.html
Copyright © 2011-2022 走看看