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

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

笔记

inline-block不接受margin: auto

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

css overflow失效的原因

html文件

    
        
        
        
        
    
    
        

            

                
                

            
            

                
Hello World
                
China is speeding up strategic plan, standards, traffic rules, laws and regulations on  
                
accident-incurred liabilities for its smart car industry, Economic Information Daily 
                
reported Thursday.
            
            

                
Create Your Account
                
It is absolutely free
                

                    
                    
                    
                
            
        
        

            

                
Boatloads of Awesome
                
Ready-made, customizable, HTML 
landing page sections
            
            

                

                    
                    

                    
Mobile First
                    
All modulz are built mobile-first for maximum
device compatibil 
                    
                
                

                    
                    

                    
Accessibility
                    
Support for IE8, mobile and tablet devices,
 screenreaders and color blind
                    
                
                

                    
                    

                    
Fluid Typography
                    
On different screen sizes, fonts automagically
 scale with the viewport.
                    
                
                

                    
                    

                    
Customization
                    
Make any design your own using the Style
 Editor. Personalize fonts, colors, and layouts to
 create the custom look you want.
                    
                
            
        
        

            

                
                
                

                
            
            

                
Supportive policies
 for China's smart
 car
                
China will come up with its own smart car
 standards, traffic rules, laws and regulations
 relating to safety, according to the China
 Industry Innovation Alliance for the Intelli-
gent and Connected Vehicles.
                
                
            
        
        

            
Try Our Awesome Products
            

                

                    
                    
Li Jun, a China Academy of Engi-
neering academician and also
 director of the alliance's experts'
 committee, said that China will
 also launch design guidance for
 smart cars, smart map architec-
ture and standards for test
 grounds.
                
                

                    
                    
Li said the smart car industry is
 able to enlarge the current car
 industry by 1 trillion yuan ($158.15
 billion) and also able to boost fast
 development in 5G, internet of
 cars, big data, artificial intelligence
 and new-energy vehicles.
                
                

                    
                    
Zhang Junyi, a partner with NIO
 Capital, said that the smart car is
 the trend for the car industry and
 China's auto sector will usher in a
 new key development stage with
 the improvement of infrastructure,
 technology, policies and laws
                
            
        
        

            

            

                
                

                    
Learn How to Improve Your 
Personal Business
                    
Li Jun, a China Academy of Engineering
 academician and also director of the
 alliance's experts' committee, said that
 China will also launch design guidance
 for smart cars, smart map architecture
 and standards for test grounds.
                
            
            

                
                

                    
Choose Between Two Beautifully
 Designed Color Schemes.
                    
China will come up with its own smart
 car standards, traffic rules, laws and reg-
ulations relating to safety, according to
 the China Industry Innovation Alliance
 for the Intelligent and Connected
 Vehicles.
                
                
            
            
        
        

            

                
Our Awesome Crew
                
Our unique online teaching style makes learning easy for everyone. Whether you
 are trying to land a new job, brush up on your skills.
            
            

                

                    
                    

                            
Ethan Dutton
                            
Senior Visual Designer
                            

                                

                                

                                

                            
                    
                
                

                    
                    

                            
Ethan Dutton
                            
Senior Visual Designer
                            

                                

                                

                                

                            
                    
                
                

                    
                    

                            
Ethan Dutton
                            
Senior Visual Designer
                            

                                

                                

                                

                            
                    
                
                

                    
                    

                            
Ethan Dutton
                            
Senior Visual Designer
                            

                                

                                

                                

                            
                    
                
            
        
        

            

                

                
Fell free to Write Us
                    
                    
                    
                    
                
            
            

                

                    
Contacts
                    
Make any design your own using the Style
 Editor. Personalize fonts, colors, and layouts to
 create the custom look you want.
                    

                            

                                
360 King Street
Feastrvale Trevose, PA 19057  
                            
                            

                                
(755) 564-84-12
                            
                            

                                
[email protected]
                            
                        
                    
                
            
        

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");
}