美文网首页
bootStrap作业1

bootStrap作业1

作者: wudimingwo | 来源:发表于2018-11-17 19:58 被阅读0次
<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewprot" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>dddd</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">
      /*导航条部分 #start*/
      
      .banner-top {
        background-color: #333;
      }
      
      .navbar {
        background: none;
        border: none;
        height: 125px;
      }
      
      .navbar .navbar-header {
        color: white;
      }
      
      .navbar .navbar-header .glyphicon-camera {
        font-size: 30px;
      }
      
      .navbar .navbar-header h1 {
        display: inline-block;
      }
      
      .navbar .collapse{
        position: relative;
        z-index: 3;
      }
      
      .navbar .collapse .nav.navbar-nav.navbar-right a {
        color: white;
        font-size: 25px;
        background-color: #333;
        text-align: center;
      }
      
      .navbar .collapse .nav.navbar-nav.navbar-right a:hover {
        color: #F08080;
      }
      /*导航条部分 #end*/
      /*轮播图部分#start*/
     
     
     
      /*轮播图部分#end*/
      /*关于部分#start*/
     
     .about .about-body p{
       background-color: #F08080;
       height: 100%;
     }
     
     .about .about-head.text-center{
       font-size: 30px;
       font-weight: bold;
       height: 100px;
       line-height: 100px;
     }
      /*关于部分#end*/
     
      /*gallery部分#start*/
     .gallery{
       margin-top: 100px;
     }
     .gallery .item{
       position: relative;
       background-color: #000;
       padding: 0;
     }
     .gallery .item a,.gallery .item img{
       display: inline-block;
       width: 100%;
       height: 100%;
     }
     
     .gallery .item .bg{
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background-color:rgba(0,0,0,.5);
       z-index: 1;
       transform: scale(0);
       transition: transform .5s;
     }
     .gallery .item:hover .bg{
       transform: scale(1);
     }
     .gallery .item .bg .bg-center{
       position: absolute;
       left: 0;
       top: 0;
       right: 0;
       bottom: 0;
       margin: auto;
       background-color: rgba(255,255,255,.5);
       width: 100%;
       height: 50px;
       text-align: center;
       font-size: 30px;
       line-height: 50px;
     }
     
      /*gallery部分#end*/
     
     
    </style>
  </head>

  <body>

    <div class="banner-top">
        <!--导航条 #start-->
      
      <div class="container">
        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
              <span class="glyphicon glyphicon-camera"></span>
              <h1>Camera photo</h1>
              <h3>something happen</h3>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                <li>
                  <a href="#banner-top">Home</a>
                </li>
                <li>
                  <a href="#about">about</a>
                </li>
                <li>
                  <a href="#gallery">gallery</a>
                </li>
                <li>
                  <a href="#footer">footer</a>
                </li>
              </ul>
            </div>
            <!-- /.navbar-collapse -->
          </div>
          <!-- /.container-fluid -->
        </nav>

      </div>
        <!--导航条 #end-->
        <!--轮播图 #start-->
        
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1300">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="img/2test.jpg" class="center-block" alt="...">
            <div class="carousel-caption">
              <h1>妹子1</h1>
            </div>
          </div>
          <div class="item">
            <img src="img/3test.jpg" class="center-block" alt="...">
            <div class="carousel-caption">
              <h1>妹子2</h1>
            </div>
          </div>
          <div class="item">
            <img src="img/4test.jpg" class="center-block" alt="...">
            <div class="carousel-caption">
              <h1>妹子3</h1>
            </div>
          </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>


        <!--轮播图 #end-->
    </div>
        <!--关于#start-->
    
    <div id="about" class="about">
      <div class="container">
        <div class="row">
          <div class="about-head text-center">About</div>
        </div>
        
        <div class="row">
          <div class="about-body">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
             <img class="img-responsive" src="img/test1.jpg" />
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
              <p>text</p>
            </div>
          </div>
          
        </div>
      </div>
      
      
      
    </div>
        <!--关于#end-->
        
        
        <!--关于#start-->
    <div id="gallery" class="gallery">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item">
            <a href="./img/test1.jpg">
            <img src="img/test1.jpg"/>
            </a>
            <div class="bg">
              <div class="bg-center center-block">
                <span class="glyphicon glyphicon-camera"></span>
              </div>
            </div>
          </div>
          </div>
        </div>
      </div>
      
      
    </div>
        <!--关于#start-->
    
    <div id="footer" class="footer"></div>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script type="text/javascript">
    </script>
  </body>

</html>

相关文章

网友评论

      本文标题：bootStrap作业1

      本文链接：https://www.haomeiwen.com/subject/fiapfqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|bootStrap作业1|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！