百度前端学院第九天到第11天笔记

预览页面建议在125%的大小下查看

笔记

inline-block不接受margin: auto

固定宽高时top left right``bottom 都设置为0,然后margin auto可以实现垂直水平居中
居中详解

css overflow失效的原因

html文件

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8">
        <meta http-equiv="refresh" content="30">
        <link rel="stylesheet" href="normalize.css" type="text/css">
        <link rel="stylesheet" href="index.css" type="text/css">
    </head>
    <body>
        <div id=head>
            <div class=headback>
                <img src="sucai/head-back.png" alt="头部背景" class="head-image">
                <div class="headbackcolor"></div>
            </div>
            <div class="headfont">
                <h1 class="headfonttittle">Hello World</h1>
                <p class="headfonttext">China is speeding up strategic plan, standards, traffic rules, laws and regulations on  </p>
                <p class="headfonttext">accident-incurred liabilities for its smart car industry, Economic Information Daily </p>
                <p class="headfonttext">reported Thursday.</p>
            </div>
            <div class="headform">
                <h2 class="tittle">Create Your Account</h2>
                <p class="text">It is absolutely free</p>
                <form action="#">
                    <input class="input-field" type="email" name="email" id="email" placeholder="Create your email">
                    <input class="input-field" type="password" name="pws" id="pws" placeholder="Create your password">
                    <input class="sign-up" type="button" value="Sign Up">
                </form>
            </div>
        </div>
        <div id="page2">
            <div class="p2head">
                <p>Boatloads of Awesome</p>
                <h2>Ready-made, customizable, HTML <br>landing page sections</h2>
            </div>
            <div class="p2text">
                <div class="iphone">
                    <img src="sucai/Iphone Icon.png" alt="iphone">
                    <div class="texto">
                    <p class="tittle">Mobile First</p>
                    <p class="text">All modulz are built mobile-first for maximum<br>device compatibil </p>
                    </div>
                </div>
                <div class="check">
                    <img src="sucai/Check Icon.png" alt="check">
                    <div class="texto">
                    <p class="tittle">Accessibility</p>
                    <p class="text">Support for IE8, mobile and tablet devices,<br> screenreaders and color blind</p>
                    </div>
                </div>
                <div class="pencil">
                    <img src="sucai/Pencil Icon.png" alt="pencil">
                    <div class="texto">
                    <p class="tittle">Fluid Typography</p>
                    <p class="text">On different screen sizes, fonts automagically<br> scale with the viewport.</p>
                    </div>
                </div>
                <div class="setting">
                    <img src="sucai/Settings Icon.png" alt="setting">
                    <div class="texto">
                    <p class="tittle">Customization</p>
                    <p class="text">Make any design your own using the Style<br> Editor. Personalize fonts, colors, and layouts to<br> create the custom look you want.</p>
                    </div>
                </div>
            </div>
        </div>
        <div id=page3>
            <div class=page3back>
                <img src="sucai/page3background.png" alt="第三张背景" class="page3-image">
                <!-- <img src="sucai/page3Screen.png" alt="ipad屏幕" class="page3-screen"> -->
                <div class="headbackcolor"></div>
                <img src="sucai/page3Screen.png" alt="ipad屏幕" class="page3-screen">
            </div>
            <div class="page3text">
                <p class="tittle">Supportive policies<br> for China's smart<br> car</p>
                <p class="text">China will come up with its own smart car<br> standards, traffic rules, laws and regulations<br> relating to safety, according to the China<br> Industry Innovation Alliance for the Intelli-<br>gent and Connected Vehicles.</p>
                <input class="CheckoutFeatures" type="button" value="CHECK OUT FEATURES">
                <input class="TryproductforFree" type="button" value="Try product for Free">
            </div>
        </div>
        <div id="page4">
            <h2 class="tittle">Try Our Awesome Products</h2>
            <div class="text">
                <div class="singleton">
                    <img src="sucai/Singleton.png" alt="singleton">
                    <p>Li Jun, a China Academy of Engi-<br>neering academician and also<br> director of the alliance's experts'<br> committee, said that China will<br> also launch design guidance for<br> smart cars, smart map architec-<br>ture and standards for test<br> grounds.</p>
                </div>
                <div class="hero">
                    <img src="sucai/Hero.png" alt="hero">
                    <p>Li said the smart car industry is<br> able to enlarge the current car<br> industry by 1 trillion yuan ($158.15<br> billion) and also able to boost fast<br> development in 5G, internet of<br> cars, big data, artificial intelligence<br> and new-energy vehicles.</p>
                </div>
                <div class="portlaned">
                    <img src="sucai/Portland.png" alt="portland">
                    <p>Zhang Junyi, a partner with NIO<br> Capital, said that the smart car is<br> the trend for the car industry and<br> China's auto sector will usher in a<br> new key development stage with<br> the improvement of infrastructure,<br> technology, policies and laws</p>
                </div>
            </div>
        </div>
        <div id="page5">
            <div class="p5text">
            <div class="tree">
                <img src="sucai/tree.png" alt="树木">
                <div class="tree-text">
                    <h3>Learn How to Improve Your <br>Personal Business</h3>
                    <p>Li Jun, a China Academy of Engineering<br> academician and also director of the<br> alliance's experts' committee, said that<br> China will also launch design guidance<br> for smart cars, smart map architecture<br> and standards for test grounds.</p>
                </div>
            </div>
            <div class="bird">
                <!-- <img src="sucai/bird.png" alt="鸟"> -->
                <div class="bird-text">
                    <h3>Choose Between Two Beautifully<br> Designed Color Schemes.</h3>
                    <p>China will come up with its own smart<br> car standards, traffic rules, laws and reg-<br>ulations relating to safety, according to<br> the China Industry Innovation Alliance<br> for the Intelligent and Connected<br> Vehicles.</p>
                </div>
                <img src="sucai/bird.png" alt="鸟">
            </div>
            </div>
        </div>
        <div id="page6">
            <div class="tittle">
                <h2>Our Awesome Crew</h2>
                <p>Our unique online teaching style makes learning easy for everyone. Whether you<br> are trying to land a new job, brush up on your skills.</p>
            </div>
            <div class="text">
                <div class="one">
                    <img src="sucai/张思远大.png" alt="张思远大.png">
                    <div class="one-des">
                            <h4>Ethan Dutton</h4>
                            <p>Senior Visual Designer</p>
                            <ul class="social-buttons">
                                <li><a href="#" class="icon icon-facebook"></a></li>
                                <li><a href="#" class="icon icon-instagram"></a></li>
                                <li><a href="#" class="icon icon-twitter"></a></li>
                            </ul>
                    </div>
                </div>
                <div class="one">
                    <img src="sucai/ren2.png" alt="ren3">
                    <div class="one-des">
                            <h4>Ethan Dutton</h4>
                            <p>Senior Visual Designer</p>
                            <ul class="social-buttons">
                                <li><a href="#" class="icon icon-facebook"></a></li>
                                <li><a href="#" class="icon icon-instagram"></a></li>
                                <li><a href="#" class="icon icon-twitter"></a></li>
                            </ul>
                    </div>
                </div>
                <div class="one">
                    <img src="sucai/ren3.png" alt="ren3">
                    <div class="one-des">
                            <h4>Ethan Dutton</h4>
                            <p>Senior Visual Designer</p>
                            <ul class="social-buttons">
                                <li><a href="#" class="icon icon-facebook"></a></li>
                                <li><a href="#" class="icon icon-instagram"></a></li>
                                <li><a href="#" class="icon icon-twitter"></a></li>
                            </ul>
                    </div>
                </div>
                <div class="one">
                    <img src="sucai/沈大.png" alt="shenda">
                    <div class="one-des">
                            <h4>Ethan Dutton</h4>
                            <p>Senior Visual Designer</p>
                            <ul class="social-buttons">
                                <li><a href="#" class="icon icon-facebook"></a></li>
                                <li><a href="#" class="icon icon-instagram"></a></li>
                                <li><a href="#" class="icon icon-twitter"></a></li>
                            </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="page7">
            <div class="page7form">
                <form action="#" class="form">
                <h1>Fell free to Write Us</h1>
                    <input type="email" name="email" class="input-filed" id="email" placeholder="E-mail">
                    <input name="sub" class="input-filed" placeholder="Subject">
                    <input type="text"class="input-fielde" placeholder="Message">
                    <input type="button" class="send" value="Send">
                </form>
            </div>
            <div class="p7text">
                <div class="text">
                    <h1>Contacts</h1>
                    <p>Make any design your own using the Style<br> Editor. Personalize fonts, colors, and layouts to<br> create the custom look you want.</p>
                    <div class="contacts">
                            <div class="contacts-item">
                                <i class="icon icon-map"></i><p>360 King Street<br/>Feastrvale Trevose, PA 19057  </p>
                            </div>
                            <div class="contacts-item">
                                <i class="icon icon-tel"></i><p>(755) 564-84-12</p>
                            </div>
                            <div class="contacts-item">
                                <i class="icon icon-email"></i><p>youname@mail.com</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

css文件

html,body{
    margin: 0;
    height: 100%;
    width: 100%;
    /* overflow: hidden; */
}
#head,#page2,#page3,#page7{
    width: 100%;
    height: 605px;
    overflow: hidden;
}
#page6{
    width: 100%;
    height: 900px;
    overflow: hidden;
}
#page5{
    width: 100%;
    height: 700px;
    overflow: hidden;
}

#page4{
    width: 100%;
    height: 400px;
    overflow: hidden;
}
.headback{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.page3back{
    width: 100%;
    height: 100%;
    z-index: -1;
}
.page3-screen{
    position: relative;
    bottom: 1210px;
    height: 70%;
    display: block;
     margin-top: 100px; 
     margin-right: 0%;
     float: right;
}
.headbackcolor{
    background-color: rgba(12, 10, 8, 0.61);
    width: 100%;
    height: 100%;
    position: relative;
    bottom: 605px;
}
.head-image,.page3-image{
    height: 100%;
    width: 100%;
    display: block;
}
.headfont{
    position: relative;
    margin: 0;
    bottom: 605px;
    text-align: center;
}
.headfonttittle,.page3text .tittle{
    margin-top: 130px;
    font-size: 3em;
    color: rgb(245, 245, 245);
    font-weight: 300;
}
.headfonttext,.page3text .text{
    font-weight: 300;
    color: rgba(255, 255, 255, 0.568);
}
.headform{
    position: relative;
    bottom: 605px;
    margin: 40px auto;
    border-style: solid ;
    border-width: 2px;
    border-color: rgba(236, 235, 233, 0.445);
    border-radius: 10px;
    box-sizing: border-box;
    width: 850px;
    display: flex;
    flex-direction: column;
    height: 230px;
}
.headform .tittle{
    color: rgba(252, 249, 246, 0.89);
    text-transform: uppercase;
    font-size: 1em;
    text-align: center;
}
.headform .text{
    color: rgba(252, 249, 246, 0.616);
    text-transform: uppercase;
    font-size: 0.3em;
    text-align: center;
    margin-top: 0;
    font-family: Montserrat-Light;
}
.headform form{
    margin: 40px auto;
}
input{
    color: rgb(245, 245, 245);
}
.headform .input-field{
    width: 292px;
    height: 50px;
    padding: 18px 0 18px 22px;
    margin-right: 30px;
    box-sizing: border-box;
    border-radius: 2px;
    border: solid 1px rgba(255, 255, 255, 0.2);
    background: transparent;
}

.headform .sign-up,.page3text .CheckoutFeatures,.page3text .TryproductforFree{
    color: rgb(0, 0, 0);
    background-color: rgb(245, 245, 245);
    text-align: center;
    border: 0;
    height: 40px;
    width: 130px;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: bold;
    border-radius: 2px;
    cursor: pointer;
    outline: none;
}
.page3text .CheckoutFeatures{
    width: 170px;
}
.page3text .TryproductforFree{
    background-color: transparent;
    width: 170px;
    border: solid 1px rgba(255, 255, 255, 0.2);
    color: rgba(245, 245, 245, 0.486);
    font-weight: 400;
    position: relative;
    left: 10px;
}
.headform .sign-up:active{
    border: 0;
    border-color: rgb(245, 245, 245);
    outline: none;
}
.p2head{
    text-align: center;
    margin-top: 90px;
}
.p2head p{
    text-transform: uppercase;
    /* letter-spacing: 0.2em; */
    font-weight: 400;
    font-size: 0.8em;
    margin-bottom: 2em;
}
.p2head h2{
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1.2em;

}
.p2text{
    margin-top: 50px;
    display: flex;
    flex-flow: row wrap;
    margin-left: 20%;
}
.iphone,.check,.pencil,.setting{
    flex: 50%;
    margin-bottom: 60px;
    margin-top: 40px;
    /* overflow: hidden; */
}
.iphone img,.iphone .texto,.check .texto,.check img,.pencil .texto,.pencil img,.setting img,.setting .texto{
    float: left;
}
.iphone .texto,.check .texto,.pencil .texto,.setting .texto{
    position: relative;
    left: 20px;
    bottom: 20px;
    margin: 0;
}
.texto .tittle{
    font-weight: bold;
}
.texto .text{
    font-size: 0.7em;
    color: rgba(0, 0, 0, 0.521);
}
.page3text{
    width: 70%;
    left: 15%;
    bottom: 605px;
    position: relative;
}
.page3text .tittle{
    font-size: 2em;;
}
.page3text .text{
    line-height: 1.5em;
}
#page4 .tittle{
    text-align: center;
    font-weight: 400;
}
#page4 .text{
    display: flex;
    flex-flow: row;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    margin-top: 50px;
    margin-left: 10%;
    margin-right: 10%;
}
.portlaned p,.singleton p,.hero p{
    font-weight: 300;
    line-height: 1.5em;
}
.hero,.portlaned{
    position: relative;
    bottom: 13px;
}
#page5 .tree,#page5 .bird{
    display: flex;
    /* width: 2000px; */
    box-sizing: border-box;
    width: 100%;
    align-items: center;
    justify-content: space-around;
    /* margin-top: 50px;
    margin-left: 10%; */
    position: relative;
    /* bottom: 605px; */
}
#page5 .bird{
    margin-top: 40px;
}
.tree .tree-text{
    position: relative;
    right: 60px;
}
 .bird .bird-text{
     position: relative;
     left: 60px;
 }
.tree .tree-text p,.bird .bird-text p,.tree .tree-text h3,.bird .bird-text h3{
    line-height: 1.5em;
}
.tree .tree-text p,.bird .bird-text p{
    font-weight: 300;
}
/* .tree .tree-text{
    left: 200px;
} */
.p5text{
    margin-left: 5%;
    margin-right: 5%;
}
#page5 img{
    height: auto;
    width: 510px;
}
#page6 .tittle{
    text-align: center;
    margin-bottom: 50px;
}
#page6 .tittle p{
    line-height: 1.5em;
    font-weight: 300;
}
#page6 .text{
    width: 970px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.one{
    width: 470px;
    height: 340px;
    margin-bottom: 30px;
    /* margin-top: px; */
    position: relative;
    box-shadow: 1px 1px 21px 0px rgba(20, 20, 20, 0.1);
    background-color: #b8b8b8;
    border-radius: 2px;
    overflow: hidden;
}
/* .one img,.two img,.there img,.four img{
    height: 200px;
    width: auto;
} */
 .one .one-des{
     background-color: #140b0b69;
     color: aliceblue;
     width: 470px;
     height: 340px;
     position: absolute;
     left: 0;
     top: 340px;
     transition: all 0.5s;
     padding-top: 40px;
 }
 .one:hover .one-des{
     top: 0px;
 }
 .social-buttons{
    width: 213px;
    list-style-type: none;
    margin: 40px auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
}
.icon{
    display: block;
    width: 54px;
    height: 54px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.icon-facebook{
    background-image: url(sucai/Facebook.png);
}
.icon-instagram{
    background-image: url(sucai/Instagram.png);
}
.icon-twitter{
    background-image: url(sucai/Twitter.png);
}
.one-des h4{
    text-align: center;
}
.one-des p{
    text-align: center;
    font-size: 0.7em;
    color: rgba(240, 248, 255, 0.705);
}
#page7{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    margin-top: 10px;
}
.page7form form{
    border: solid 2px rgba(20, 20, 20, 0.473);
    width: 470px;
    height:550px;
    /* text-align: center; */
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
}
.page7form form h1{
    padding: 50px 0;
    font-size: 16px;
    font-weight: inherit;
    line-height: 32px;
    letter-spacing: 2px;
    color: #141414;
}
.page7form form .input-filed{
    box-sizing: border-box; 
    padding: 20px;
    margin-bottom: 30px;
    width: 370px;
    height: 50px;
    font-size: 14px;
    color: rgba(20, 20, 20, 0.7);
    border-radius: 2px;
    border: solid 1px rgba(38, 35, 33, 0.2);
}
.page7form form .input-fielde{
    box-sizing: border-box; 
    padding: 20px;
    margin-bottom: 30px;
    width: 370px;
    height: 144px;
    font-size: 14px;
    color: rgba(20, 20, 20, 0.7);
    outline: none;
    border-radius: 2px;
    border: solid 1px rgba(38, 35, 33, 0.2);
    resize: none;
}
.page7form form .send{
    width: 370px;
    height: 50px;
    background-color: #141414;
    border: none;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    outline: none;
}
.p7text{
    margin-left: 60px;
}
.p7text .text h1{
    font-size: 3.5em;
    font-weight: 300;
}
.p7text .text p{
    /* color: rgba(14, 14, 14, 0.644); */
    line-height: 2em;
    /* font-size: 2em; */
}
/* .p7text .text .ul{
    margin-top: 60px;
    font-weight: 500;
    line-height: 2em;
    list-style-position: outside;
    list-style-type: none;
}
.p7text .text .ul p{
    margin-bottom: 20px;
    font-size: 1.4em;
} */
.contacts-item {
    display: flex;
}
.contacts-item p{  
    margin: 0;
    margin-bottom: 30px;
    padding-left: 20px;
    font-size: 16px;
    font-weight: bolder;
    line-height: 26px;
    letter-spacing: 0px;
    color: #1b0202;
}
.contacts{
    margin-top: 80px;
}
.contacts .icon {
    display: block;
    width: 25px;
    height: 25px;
    background-position: center center;
    background-repeat: no-repeat;
}
.contacts .icon-map {
    position: relative;
    top: 6px;
    background-image: url("sucai/MapIcon.png");
}
.contacts .icon-tel {
    background-image: url("sucai/PhoneIcon.png");
}
.contacts .icon-email {
    background-image: url("sucai/MailIcon.png");
}
posted @ 2019-10-15 22:41 sogeisetsu 阅读(...) 评论(...) 编辑 收藏