zoukankan      html  css  js  c++  java
  • 无JavaScript实现选项卡轮转切换效果

    CSS:

     

    .box{200px; height:100px; border:1px solid #ddd; overflow:hidden;}
    .list{200px; height:100px; line-height:100px; background:#ddd; font-size:80px; text-align:center;}
    .link{200px; padding-top:10px; text-align:right;}
    .click{display:inline-block; 20px; height:20px; line-height:20px; border:1px solid #ccc; background:#f7f7f7; color:#333; font-size:12px; font-weight:bold; text-align:center; text-decoration:none;}
    .click:hover{background:#eee; color:#345;}

     

    HTML部分:
    <div class="box">
        <div class="list" id="one">1</div>
        <div class="list" id="two">2</div>
        <div class="list" id="three">3</div>
        <div class="list" id="four">4</div>
    </div>
    <div class="link">
        <a class="click" href="#one">1</a>
        <a class="click" href="#two">2</a>
        <a class="click" href="#three">3</a>
        <a class="click" href="#four">4</a>
    </div>

  • 相关阅读:
    NTP服务器搭建
    Linux安装MongoDB 4.4.2
    CentOS安装Zookeeper 3.6.2
    CentOS安装Redis 6.0.9
    MacBook Home End
    SLES Install
    cucumber soapui test web services
    S/4 HANA Solution Manager
    Linux下创建新用户
    su with hyphen and without
  • 原文地址:https://www.cnblogs.com/chuangweili/p/5163169.html
Copyright © 2011-2022 走看看