预览页面。建议在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%;
100%;
/* overflow: hidden; */
}
#head,#page2,#page3,#page7{
100%;
height: 605px;
overflow: hidden;
}
#page6{
100%;
height: 900px;
overflow: hidden;
}
#page5{
100%;
height: 700px;
overflow: hidden;
}
#page4{
100%;
height: 400px;
overflow: hidden;
}
.headback{
position: relative;
100%;
height: 100%;
z-index: -1;
}
.page3back{
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);
100%;
height: 100%;
position: relative;
bottom: 605px;
}
.head-image,.page3-image{
height: 100%;
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- 2px;
border-color: rgba(236, 235, 233, 0.445);
border-radius: 10px;
box-sizing: border-box;
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{
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;
130px;
text-transform: uppercase;
font-size: 0.8em;
font-weight: bold;
border-radius: 2px;
cursor: pointer;
outline: none;
}
.page3text .CheckoutFeatures{
170px;
}
.page3text .TryproductforFree{
background-color: transparent;
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{
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;
/* 2000px; */
box-sizing: border-box;
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;
510px;
}
#page6 .tittle{
text-align: center;
margin-bottom: 50px;
}
#page6 .tittle p{
line-height: 1.5em;
font-weight: 300;
}
#page6 .text{
970px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.one{
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;
auto;
} */
.one .one-des{
background-color: #140b0b69;
color: aliceblue;
470px;
height: 340px;
position: absolute;
left: 0;
top: 340px;
transition: all 0.5s;
padding-top: 40px;
}
.one:hover .one-des{
top: 0px;
}
.social-buttons{
213px;
list-style-type: none;
margin: 40px auto;
padding: 0;
display: flex;
justify-content: space-between;
}
.icon{
display: block;
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{
1000px;
margin-left: auto;
margin-right: auto;
display: flex;
margin-top: 10px;
}
.page7form form{
border: solid 2px rgba(20, 20, 20, 0.473);
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;
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;
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{
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;
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");
}