看了两天的bootstrap，顿觉框架真是漂亮又方便就照着官网推的网站写了一个响应式

本文链接：https://blog.csdn.net/qq_35765126/article/details/71597733

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>bootstrap练习</title>
     <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: #FEF2F6;
    }
    .container{
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 100;
    }
    .whiteText{
        color: white;
        line-height: 32px;
    }
    .onePageBg{
         background-image: url("images/firecracker.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .overlayImg{
        width: 100%;
         height: 100%;
        position: absolute;
    }
    .overlayImg img{
        width: 100%;
        height: 100%;
    }
    .onePageIntent{
        position: absolute;
        margin-top: 10%;
        width: 75%;
        height: 70%;
        max-height: 600px;
        margin-left: 80px;
    }
    .cuTi{
        max-width: 700px;

    }
    .duiQi{
     max-width: 460px;
         text-align: center;
          margin-top: 80px;
    }
    .PT{
       height: 50px;

    }
    .btn{
        width: 250px;
         height: 50px;
          border-radius: 50px;
          background-color:#663399;
          border:0;
    }
    .btn:hover{
        background-color:#663399;
    }
    .imgBox{
        cursor: pointer;
        margin:0 auto;
        margin-top: 1100px;
        width: 43px;
        height: 43px;
    }
     .twoPageBg{
         background-image: url(images/violine.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .threeCol{
        width: 100%;
        text-align: center;

    }
    .picBox{
        text-align: center;
    }
    .threePage{
        margin-top: 30px;
        width: 100%;
    }
    .threePageIntent div{
            font-family: Raleway-Black;
            color: #2F2F2F;
            font-size: 44px;
            letter-spacing: -0.24px;
            line-height: 50px;
            text-align: center;
    }
    .threePageIntent p{
            font-size: 18px;
            color: #747E80;
            letter-spacing: 0;
            text-align: center;
            line-height: 28px;
    }
    .threePageIntent{
        margin-bottom: 130px;
    }
    .threePageEmail{
        position: relative;
        width: 80%;
        z-index: 6;
        /*border:1px solid red;*/
    }
    .mailBox,.requestBox{
         z-index: 6;
    }
    .textAlign{
        /*position: absolute;*/
        font-size: 18px;
        color: #747E80;
        letter-spacing: 0;
        line-height: 28px;
        padding-bottom: 20px;
        text-align: center;
        font-family: Raleway-Regular;
    }
@media screen and (min-width: 1200px){
    .col-lg-6 {
         width: 43px;
         float: none;
    }
}

@media screen and (min-width: 769px) {   /*宽度大于769px*/
    .onePageBg{
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
        height: 1204px;
        background-size: cover;
        background-position: center center;
    }

    .PT{
        font-size: 30px;
    }
    .cuTi{
         font-size: 54px;
         line-height: 50px;
    }
    .twoPageBg{
         width: 100%;
        max-width: 1280px;
        margin: 0 auto;
        height: 695px;
        background-size: cover;
        background-position: center center;
        border: 1px solid BLACK;
    }
    .twoPageWord{
        margin-top: 145px;
        font-size: 14px;
        width: 100%;
        text-align: center;
    }
    .twoPageWord h1{
        font-size: 44px;
    }
    .threeCol{
        margin-top: 100px;
    }
    .threePageEmail{
        width: 550px;
        height: 42px;
        margin:20px auto;

    }
    .mailBox{
        width: 260px;
        height: 40px;
        border-radius: 25px 0 0 25px;
        padding-left: 20px;
         box-shadow: 1px 1px 35px 1px grey;
    }
    .requestBox{
        width: 260px;
        height: 42px;
        border-radius: 0 25px 25px 0;
        padding-left: 20px;
        background-color: #663399;
        line-height: 25px;
        margin-left: -10px;
        box-shadow: 1px 1px 40px 1px grey;
    }
    .requestBox:hover{
        background-color: #663399;
    }
}
@media screen and (max-width: 1200px){
        .threeCol{
            margin-top:0px;
        }
        .twoPageWord{
            margin-top: 0px;
        }
        .container{
            margin: 0;
            padding: 0;
        }
        .onePageBg,.twoPage,.threePage{
            margin: 0;
        }

    }
    @media screen and (max-width: 768px){
        .onePageBg{
        width: 100%;
        margin: 0 auto;
        height: 1204px;
        background-size: cover;
        background-position: center center;

    }
    .PT{
        font-size: 30px;
    }
    .cuTi{
         font-size: 54px;
         line-height: 50px;
    }

    .twoPageBg{
         width: 100%;
        max-width: 768px;
        margin: 0 auto;
        height: 695px;
        background-size: cover;
        background-position: center center;
        border: 1px solid BLACK;
    }
    .twoPageWord{
        margin-top: 10px;
        font-size: 14px;
        width: 100%;
        text-align: center;
    }
    .twoPageWord h1{
        font-size: 44px;
    }
    .threeCol{
        margin-top: 0px;
    }
    .threePageEmail{
        width: 550px;
        height: 42px;
        margin:20px auto;

    }
    .mailBox{
        width: 260px;
        height: 40px;
        border-radius: 25px 0 0 25px;
        padding-left: 20px;
         box-shadow: 1px 1px 35px 1px grey;
    }
    .requestBox{
        width: 260px;
        height: 42px;
        border-radius: 0 25px 25px 0;
        padding-left: 20px;
        background-color: #663399;
        line-height: 25px;
        margin-left: -10px;
        box-shadow: 1px 1px 40px 1px grey;
    }
    .requestBox:hover{
        background-color: #663399;
    }
    }
    @media screen and (max-width: 667px){
        .threePageEmail{
            width: 80%;
            height: 100px;
            /*border:1px solid red;*/
        }
        .mailBox,.requestBox{
            float: none;
            width: 100%;
            margin: 5px auto;
            border-radius: 25px;
        }
    }
    </style>


</head>

<body>
   <div class="container">
        <div class="overlayImgBox">
           <div class="overlayImg">
               <img src="images/overlay.png" alt="">
           </div>

            <div class="contentBox">
                <div class="onePageBg row">
                    <div class="onePageIntent">
                        <div class="onePageWord">
                            <h1 class="cuTi whiteText"><strong>Let's Make Our</strong><br>
                                 <strong>World Smaller</strong>
                            </h1>
                            <h3 class="whiteText">Connect to a real and unfiltered<br>
                                    world through the eyes of others
                            </h3>
                        </div>
                        <div class="duiQi">
                            <h1 class="whiteText PT"><strong>Peek:to</strong></h1>
                            <button type="button" class="btn btn-success btn-lg">
                                SIGN UP FOR BETA
                            </button>
                        </div>
                    </div>
                    <div class="imgBox col-lg-6">
                        <a href="#twoPage" class="active" data-toggle="tab">
                            <img src="images/Bitmap.png" >
                        </a>
                    </div>
                </div>
                <div class="twoPage whiteText" id="twoPage">
                    <div class="twoPageBg">
                        <div class="twoPageIntent">
                            <div class="twoPageWord whiteText">
                                <h4>A FEW WOEDS</h4>
                                <h1><strong>About Peek:to</strong></h1>
                            </div>
                            <DIV class="threeCol">
                                <div class="row">
                                    <div class="col-lg-4 cols">
                                        <img src="images/mag.png" height="69" width="67" alt="">
                                        <div class="textBox">
                                            <h3><strong>A DREAM</strong></h3>
                                            <p>We are on a mission to make our world smaller</p>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 cols">
                                        <img src="images/group.png" height="69" width="67" alt="">
                                        <div class="textBox">
                                            <h3><strong>WHY</strong></h3>
                                            <p>Had enough with likes, filters and
                                                buzzwords ? Let's connect to the real world that surrounds us all.
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 cols">
                                        <img src="images/icon.png" height="69" width="67" alt="">
                                        <div class="textBox">
                                            <h3><strong>JOIN</strong></h3>
                                            <p>If you are willing to help people explore the world through your eyes than come join the ride...</p>
                                        </div>
                                    </div>
                                </div>
                            </DIV>
                        </div>
                    </div>
                </div>
                <DIV class="threePage">
                    <div class="threePageBox">
                        <div class="picBox">
                            <img src="images/logo.png" height="104" width="104" alt="">
                        </div>
                        <div class="threePageIntent">
                            <div>
                               Want a Sneak Peek?
                            </div>
                            <p>
                                Sign up for closed beta and help us plant the early seeds of Peek:to
                            </p>
                        </div>
                        <div class="threePageEmail">
                           <input type="text" name="" class="mailBox" value="Your Email" placeholder="Your Email">

                           <input type="submit" name="" value="REQUEST INVITE" class="requestBox btn btn-success btn-lg whiteText ">
                        </div>
                    </div>
                    <div class="textAlign">
                        <p>Access to the closed beta is by invitation only. Requests<br> accepted until the 31st of May 2017</p>
                    </div>
                </DIV>
            </div>

        </div>
   </div>
</body>

<script type="text/javascript">

</script>
</html>