zoukankan      html  css  js  c++  java
  • 响应式选项卡

    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery tabs选项卡设计效果</title>

    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">

    <style type="text/css">
    .demo { padding: 2em 0; background: #fff; }
    a:hover, a:focus { outline: none; text-decoration: none; }
    .tab .nav-tabs { border-bottom: none; position: relative; }
    .tab .nav-tabs li { margin-right: 60px; z-index: 1; }
    .tab .nav-tabs li:after { content: ""; 100%; border: 1px solid #ccc6c6; position: absolute; top: 50%; right: -60%; z-index: -1; }
    .tab .nav-tabs li:last-child:after { border: none; }
    .tab .nav-tabs li a { display: block; padding: 15px 20px; background: #fff; font-size: 15px; font-weight: 600; color: #956cae; text-transform: uppercase; border-radius: 0; margin-right: 0; border: 2px solid #956cae; position: relative; overflow: hidden; z-index: 1; transition: all 0.3s ease 0s; }
    .tab .nav-tabs li.active a, .tab .nav-tabs li a:hover { color: #fff; border: 2px solid #956cae; }
    .tab .nav-tabs li a:after { content: ""; display: block; 100%; height: 0; position: absolute; top: 0; left: 0; z-index: -1; transition: all 0.3s ease 0s; }
    .tab .nav-tabs li.active a:after, .tab .nav-tabs li a:hover:after { height: 100%; background: #956cae; }
    .tab .tab-content { padding: 20px 10px; margin-top: 0; font-size: 14px; color: #999; line-height: 26px; }
    .tab .tab-content h3 { font-size: 24px; margin-top: 0; }

    @media only screen and (max- 767px) {
    .tab .nav-tabs li { margin: 0 25px 0 0; }
    }

    @media only screen and (max- 479px) {
    .tab .nav-tabs li { 100%; text-align: center; margin: 0 0 10px 0; }
    .tab .nav-tabs li:after { 0; height: 100%; top: auto; bottom: -60%; right: 50%; }
    }
    </style>
    </head>
    <body>
    <div class="demo">
      <div class="container">
        <div class="row">
          <div class="col-md-offset-3 col-md-6">
            <div class="tab" role="tabpanel">
              <!-- Nav tabs -->
              <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">Section 1</a></li>
                <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2</a></li>
                <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">Section 3</a></li>
              </ul>
              <!-- Tab panes -->
              <div class="tab-content tabs">
                <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                  <h3>Section 1</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.</p>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="Section2">
                  <h3>Section 2</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.</p>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="Section3">
                  <h3>Section 3</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </body>
    </html>

  • 相关阅读:
    洛谷P2577 午餐【贪心】【线性dp】
    洛谷P1169 棋盘制作【悬线法】【区间dp】
    洛谷1546 最短网络Agri-Net【最小生成树】【prim】
    洛谷P1144 最短路计数【堆优化dijkstra】
    洛谷P1339 热浪【最短路】
    洛谷P1273 有线电视网【树形dp】
    洛谷P2279 消防局的设立【树形dp】
    洛谷P1220 关路灯【区间dp】
    洛谷P1341 无序字母对【欧拉路】【dfs】
    洛谷P1330 封锁阳光大学【dfs】
  • 原文地址:https://www.cnblogs.com/wangshengli520/p/7227172.html
Copyright © 2011-2022 走看看