html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>切图侠</title>
<link rel="stylesheet" href="css/demo1.css">
</head>
<body>
<!-- 第一个 -->
<header>
<div class="header-wrap">
<div class="firstContent">
<div class="header-title">Hello World</div>
<p>China is speeding up strategic plan, standards, traffic rules, laws and regulations</p>
<p>on accident-incurred liabilities for its smart car industry, Economic Information</p>
<p>Daily reported Thursday.</p>
<div class="form-wrap">
<p>CREATE YOUR ACCOUNT</p>
<p>IT IS ABSOLUTELY FREE</p>
<ul>
<input type="text" placeholder="denis@getcraftwork.com">
<input type="text" placeholder="Create your password">
<button class="sign">SIGN UP</button>
</ul>
</div>
</div>
</div>
</header>
<!-- 第二个 -->
<section>
<div class="second">
<div class="second-wrap">
<div class="above">
<p>BOATLADS OF AWESOME</p>
<p>Ready-made, customizable, HTML<br>landing page sections</p>
</div>
<div class="below">
<div class="one">
<div class="logo"><img src="img/01.png" alt="logo"></div>
<div class="intro">
<p>Mobile first</p>
<p>All modulz are built mobile-first for maximum device<br> compatibility.</p>
</div>
</div>
<div class="two">
<div class="logo"><img src="img/02.png" alt="logo"></div>
<div class="intro">
<p>Fluid Typography</p>
<p> On different screen sizes, fonts automagically<br> scale with the viewport.</p>
</div>
</div>
<div class="three">
<div class="logo"><img src="img/03.png" alt="logo"></div>
<div class="intro">
<p>Accessibility</p>
<p> Support for IE8, mobile and tablet devices, scr<br>eenreaders and c.</p>
</div>
</div>
<div class="four">
<div class="logo"><img src="img/04.png" alt="logo"></div>
<div class="intro">
<p>Customization</p>
<p> Make any design your own using the Style E<br>ditor. Personalize fo</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 第三部分 -->
<section>
<div class="third">
<div class="third-wrap">
<div class="third-wrap-left">
<!-- <div class="third-wrap-left-text"> -->
<p style="color: white;">Supportive policies<br> for China's smart car</p>
<p style="color: white;">China will come up with its own smart car<br> standards, traffic
rules, laws and regulations<br>relatingto safety, according to the China<br> Industry Innovation
Alliance for the Intell-<br>igent andConnectedVehicles.</p>
<input type=" button" value="CHECK OUT FEATURES">
<input type="button" value="TRY PRODUCT FOR FREE">
<!-- </div> -->
</div>
<!-- <div class="third-wrap-right">
<img src="img/Screen.jpg" alt="pic">
</div> -->
</div>
<!-- 写在这，好定位 -->
<div class="third-wrap-right">
<img src="img/Screen.jpg" alt="pic">
</div>
</div>
</section>
<!-- 第四部分 -->
<section>
<div class="forth">
<div class="forth-wrap">
<div class="forth-wrap-top">
<p>Try Our Awesome Products</p>
</div>
<div class="forth-wrap-bottom">
<div class="forth-wrap-bottom-left">
<div class="forth-wrap-bottom-left-pic"><img src="img/Singleton.png" alt="Singleton"></div>
<div class="forth-wrap-bottom-left-text">
<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 andstandards for test grounds.</p>
</div>
</div>
<div class="forth-wrap-bottom-middle">
<div class="forth-wrap-bottom-middle-pic"><img src="img/Hero.png" alt="Hero"></div>
<div class="forth-wrap-bottom-middle-text">
<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>
<div class="forth-wrap-bottom-right">
<div class="forth-wrap-bottom-right-pic" right><img src="img/Portland.png" alt="Portland"></div>
<div class="forth-wrap-bottom-right-text">
<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>
</div>
</section>
<!-- 第五部分 -->
<hr>
<section>
<div class="fifth">
<div class="fifth-wrap">
<div class="fifth-wrap-top">
<div class="fifth-wrap-top-pic">
<img src="img/图层 3.png" alt="">
</div>
<div class="fifth-wrap-top-text">
<p>Learn How to Improve Your<br> Personal Business</p>
<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="fifth-wrap-bottom">
<div class="fifth-wrap-bottom-text">
<p>Choose Between Two Beautifully<br> Designed Color Schemes.</p>
<p>China will come up with its own smart<br> car standards, traffic rules, laws and re-<br>gulations
relating to safety, according <br>to the China Industry Innovation Alliance<br> for the Intelligent and
Connected Vehicles.
</p>
</div>
<div class="fifth-wrap-bottom-pic">
<img src="img/图层 4.png" alt="pic">
</div>
</div>
</div>
</div>
</section>
<!-- 第六部分 -->
<hr>
<section>
<div class="sixth">
<div class="sixth-wrap">
<div class="sixth-wrap-top">
<p>Our Awesome Crew</p>
<p>Our unique online teaching style makes learning easy for everyone. Whether<br>you are trying to land a new
job, brush up on your skills.
</p>
</div>
<div class="sixth-wrap-bottom">
<div class="sixth-wrap-bottom-box1">
<!-- <p>Ethan Dutton</p>
<p>SENIOR VISUAL DESIGNER</p> -->
<img src="img/box1.png" alt="">
<!-- <ul>
<li> <a href="#"><img src="img/Facebook.png" alt="facebook"></a></li>
<li><a href="#"><img src="img/Twitter.png" alt="twitter"></a></li>
<li><a href="#"><img src="img/Instagram.png" alt="Instagram"></a></li>
</ul> -->
</div>
<div class="sixth-wrap-bottom-box2">
<img src="img/box2.png" alt="box2">
</div>
<div class="sixth-wrap-bottom-box3">
<img src="img/box3.png" alt="box3">
</div>
<div class="sixth-wrap-bottom-box4">
<img src="img/box4.png" alt="box4">
</div>
</div>
</div>
</div>
</section>
<!-- 第七部分 -->
<hr>
<section>
<div class="seventh">
<div class="seventh-wrap">
<div class="Seventh-wrap-left">
<form action="" method="POST">
<p>Fell free to Write Us</p>
<input id="email" type="text" placeholder="E-mail">
<input id="subject" type="text" placeholder="Subject">
<input id="message" type="text" placeholder="Message">
<input id="send" type="button" value="SEND">
</form>
</div>
<div class="seventh-wrap-right">
<div class="seventh-wrap-right-top">
<p>Contact</p>
<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>
<div class="seventh-wrap-right-bottom">
<div class="address">
<div class="address-logo"><img src="img/Map Icon.png" alt=""></div>
<div class="address-text">
<p>360 King Street<br>Feastrvale Trevose, PA 19057
</p>
</div>
</div>
<div class="tel">
<div class="tel-logo"><img src="img/Phone Icon.png" alt=""></div>
<div class="tel-text">
<p>3(755) 564-84-12
</p>
</div>
</div>
<div class="email">
<div class="email-logo"><img src="img/Mail Icon.png" alt=""></div>
<div class="email-text">
<p>youname@mail.com
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 尾部 -->
<footer>
<div class="footer">
<div class="footer-wrap">
<ul>
<li>LEARN MORE</li>
<li>How it works?</li>
<li>Meeting tools</li>
<li>Live streaming</li>
<li>Contact method</li>
</ul>
<ul>
<li>ABOUT US</li>
<li>About us</li>
<li>Features</li>
<li>Privacy police</li>
<li>Terms & Conditions</li>
</ul>
<ul>
<li>Support</li>
<li>F.A.Q.</li>
<li>Contact us</li>
<li>Live chat</li>
<li>Phone call</li>
</ul>
<ul>
<li>ENJOY YOUR LIFE</li>
<li>Great web UI kit for designers,</li>
<li>freelancers or business.</li>
<li>
<a href="#"><img style="margin-left: 0;" src="img/Twitter Icon.png" alt=""></a>
<a href="#"><img src="img/Facebook Icon.png" alt=""></a>
<a href="#"><img src="img/Google Icon.png" alt=""></a>
<a href="#"><img src="img/Tumbler Icon.png" alt=""></a>
<a href="#"><img src="img/Pinterest Icon.png" alt=""></a>
<a href="#"><img src="img/LinkedIn Icon.png" alt=""></a>
</li>
</ul>
</div>
</div>
</footer>
</body>
</html>
css
body {
margin: 0;
padding: 0;
font-family: "Montserrat-ExtraLight";
}
/* 第一部分 */
.header-wrap {
width: 100%;
height: 990px;
background-image: url(../img/7.jpeg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: local;
background-size: cover;
position: relative;
}
/* 使div块居中 */
.firstContent {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
box-sizing: border-box;
width: 1000px;
height: 600px;
}
.header-title {
text-align: center;
font-weight: 300;
font-size: 60px;
margin-bottom: 80px;
}
.firstContent p {
text-align: center;
line-height: 20px;
}
.form-wrap {
box-sizing: border-box;
border: 1px solid white;
width: 900px;
height: 250px;
/* margin-top: 100px; */
/* padding-top: 50px; */
border-radius: 3px;
/* margin: 100px 0 0 0; */
margin: 100px auto 0 auto;
}
.form-wrap p:nth-child(1) {
font-size: 20px;
font-weight: 600;
}
.form-wrap p:nth-child(2) {
font-size: 12px;
font-weight: 400;
}
.form-wrap ul {
text-align: center;
margin-top: 40px;
}
.form-wrap input {
display: inline-block;
background-color: transparent;
width: 250px;
text-align: left;
margin: 20px;
font-size: 15px;
padding: 15px;
border-radius: 5px;
border: 1px solid white;
}
.sign {
display: inline-block;
background-color: transparent;
width: 100px;
text-align: left;
margin: 20px;
font-size: 15px;
padding: 15px;
border-radius: 5px;
border: 1px solid white;
background-color: white;
}
.sign:hover {
color: aquamarine;
}
/* 第二部分 */
.second {
width: 100%;
height: 700px;
position: relative;
}
.second-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 1000px;
height: 600px;
}
.above {
text-align: center;
margin-bottom: 100px;
width: 1000px;
}
.above p:nth-child(1) {
font-size: 12px;
font-weight: 300;
}
.above p:nth-child(2) {
font-size: 24px;
font-weight: 300;
margin-top: 12px;
}
.below {
position: relative;
height: 300px;
width: 1000px;
}
.one {
position: absolute;
top: 0;
left: 0;
}
.two {
position: absolute;
top: 0;
right: 0;
}
.three {
position: absolute;
bottom: 0;
left: 0;
}
.four {
position: absolute;
bottom: 0;
right: 0;
}
.logo {
display: inline-block;
position: relative;
}
.intro {
display: inline-block;
margin-left: 20px;
}
.intro p:nth-child(1) {
font-size: 16px;
margin: 0 0 2px 0;
}
.intro p:nth-child(2) {
font-size: 12px;
font-weight: 300;
margin: 0;
}
.two img {
margin-bottom: 12px;
}
.four img {
margin-bottom: 4px;
}
/* 第三部分 */
.third {
width: 100%;
height: 800px;
background-image: url(../img/02.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: local;
background-size: cover;
position: relative;
}
.third-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 1000px;
}
.third-wrap-left {
float: left;
width: 400px;
margin-top: 200px;
}
.third-wrap-right {
float: right;
margin-top: 120px;
border: 1px solid white;
border-radius: 10px 0 0 10px;
padding: 30px 0 30px 40px;
}
.third-wrap-left p:nth-child(1) {
font-size: 35px;
font-weight: 300;
}
.third-wrap-left p:nth-child(2) {
font-size: 16px;
font-weight: 200;
margin-bottom: 100px;
}
.third-wrap-left input:nth-of-type(1) {
width: 180px;
height: 50px;
border: 1px white solid;
padding: 0;
margin: 0;
text-align: center;
}
.third-wrap-left input:nth-of-type(1):hover {
color: chartreuse;
}
.third-wrap-left input:nth-of-type(2) {
width: 180px;
height: 52px;
border: 1px white solid;
padding: 0;
margin: 0 0 0 10px;
text-align: center;
background-color: transparent;
color: white;
}
.third-wrap-left input:nth-of-type(2):hover {
color: chartreuse;
}
/* 第四部分 */
.forth {
width: 100%;
height: 600px;
position: relative;
}
.forth-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 1000px;
}
.forth-wrap-top {
text-align: center;
margin-top: 80px;
margin-bottom: 100px;
}
.forth-wrap-top p {
font-size: 24px;
font-weight: 300;
}
.forth-wrap-bottom {
position: relative;
}
.forth-wrap-bottom-left,
.forth-wrap-bottom-middle,
.forth-wrap-bottom-right {
position: absolute;
}
.forth-wrap-bottom-left {
top: 20px;
left: 0px;
}
.forth-wrap-bottom-middle {
top: 20px;
left: 50%;
transform: translate(-50%);
}
.forth-wrap-bottom-right {
top: 20px;
right: 0;
}
.forth-wrap-bottom-left-pic,
.forth-wrap-bottom-middle-pic,
.forth-wrap-bottom-right-pic {
text-align: center;
margin-bottom: 60px;
}
.forth-wrap-bottom-left-text,
.forth-wrap-bottom-middle-text,
.forth-wrap-bottom-right-text {
text-align: center;
font-weight: 300;
}
/* 第五部分 */
.fifth {
width: 100%;
height: 1000px;
position: relative;
}
.fifth-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 1000px;
display: flex;
flex-direction: column;
}
.fifth-wrap-top {
position: relative;
height: 400px;
margin-top: 100px;
margin-bottom: 60px;
}
.fifth-wrap-top-pic {
position: absolute;
}
.fifth-wrap-top-text {
position: absolute;
top: 20%;
right: 0;
text-align: center;
}
.fifth-wrap-top-text p:nth-child(1) {
font-size: 20px;
}
.fifth-wrap-top-text p:nth-child(2) {
font-size: 12px;
font-weight: 300;
}
.fifth-wrap-bottom {
position: relative;
height: 400px;
}
.fifth-wrap-bottom-pic {
position: absolute;
right: 0;
top: 0;
}
.fifth-wrap-bottom-text {
position: absolute;
top: 20%;
text-align: center;
}
.fifth-wrap-bottom-text p:nth-child(1) {
font-size: 20px;
}
.fifth-wrap-bottom-text p:nth-child(2) {
font-size: 12px;
font-weight: 300;
}
/* 第六部分 */
.sixth {
width: 100%;
height: 1000px;
position: relative;
}
.sixth-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 1000px;
}
.sixth-wrap-top {
height: 150px;
text-align: center;
margin-top: 60px;
position: relative;
}
.sixth-wrap-top p:nth-child(1) {
font-size: 24px;
font-weight: 300;
margin-bottom: 40px;
}
.sixth-wrap-top p:nth-child(2) {
font-size: 14px;
font-weight: 200;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.sixth-wrap-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.sixth-wrap-bottom-box1,
.sixth-wrap-bottom-box2,
.sixth-wrap-bottom-box3,
.sixth-wrap-bottom-box4 {
margin-bottom: 25px;
}
/* 第七部分 */
.seventh {
width: 100%;
height: 600px;
position: relative;
}
.seventh-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 1000px;
display: flex;
}
.Seventh-wrap-left {
width: 400px;
height: 450px;
border: 1px #ededed solid;
margin: 80px 0 0 0;
/* position: relative; */
}
.Seventh-wrap-left p {
text-align: center;
font-size: 16px;
font-weight: 500;
margin-top: 30px;
}
#email {
display: block;
margin: 40px auto;
line-height: 30px;
height: 30px;
width: 300px;
border: 1px solid gainsboro;
border-radius: 3px;
}
#subject {
display: block;
margin: 40px auto;
line-height: 30px;
height: 30px;
width: 300px;
border: 1px solid gainsboro;
border-radius: 3px;
}
#message {
display: block;
margin: 40px auto;
line-height: 30px;
height: 100px;
width: 300px;
border: 1px solid gainsboro;
border-radius: 3px;
}
#send {
display: block;
box-sizing: content-box;
margin: 30px auto;
line-height: 30px;
height: 40px;
width: 300px;
border: 1px solid gainsboro;
padding: 1px 2px;
color: white;
background-color: black;
border-radius: 3px;
}
.seventh-wrap-right {
width: 400px;
height: 450px;
margin-top: 140px;
margin-left: 250px;
}
.seventh-wrap-right-top {
margin-bottom: 50px;
}
.seventh-wrap-right-top p:nth-child(1) {
font-size: 24px;
font-weight: 320;
}
.seventh-wrap-right-top p:nth-child(2) {
font-size: 14px;
font-weight: 300;
}
.address {
display: flex;
}
.address-logo {
margin-top: 19px;
margin-right: 20px;
}
.address-text {
/* margin: 0 0 20px 0; */
font-weight: 450;
}
.tel {
display: flex;
}
.tel-logo {
margin-top: 19px;
margin-right: 18px;
}
.tel-text {
/* margin: 0 0 20px 0; */
font-weight: 450;
}
.email {
display: flex;
}
.email-logo {
margin-top: 19px;
margin-right: 18px;
}
.email-text {
/* margin: 0 0 20px 0; */
font-weight: 450;
}
.seventh-wrap-right-bottom p {
font-size: 14px;
font-weight: 450;
}
/* footer */
.footer {
width: 100%;
height: 200px;
position: relative;
background-color: black;
}
.footer-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 1000px;
display: flex;
justify-content: space-between;
color: white;
}
.footer-wrap ul {
list-style: none;
margin: 0 25px;
}
.footer-wrap li {
margin: 20px 0;
font-size: 10px;
font-weight: 300;
opacity: 0.5;
}
.footer-wrap ul:nth-of-type(1) li:nth-of-type(1) {
font-size: 16px;
opacity: 1;
}
.footer-wrap ul:nth-of-type(2) li:nth-of-type(1) {
font-size: 16px;
opacity: 1;
}
.footer-wrap ul:nth-of-type(3) li:nth-of-type(1) {
font-size: 16px;
opacity: 1;
}
.footer-wrap ul:nth-of-type(4) li:nth-of-type(1) {
font-size: 16px;
opacity: 1;
}
.footer-wrap a {
margin: 0 3px;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
