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>

  • 相关阅读:
    "ERR unknown command 'cluster'"
    shell-url-decode
    mac-ppt-auto-open-recovery-files
    gorm-Duplicate-entry
    mac 终端光标在单词之间移动
    seelog 文件输出格式
    nginx-port-Permission-denied
    浏览器-网络
    浏览器-兼容性
    浏览器-浏览器知识
  • 原文地址:https://www.cnblogs.com/wangshengli520/p/7227172.html
Copyright © 2011-2022 走看看