写这个页面的时候自己竟然写了300多行css,什么代码的复用什么的都没用用到,用到最笨的方法,一个页面一个页面老老实实的写
,觉得几种布局方式确实有效,3天我也确实没做完,用了大概5天左右,权当记录一下了,毫无参考价值,总之慢慢变好,慢慢学
习吧
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>完美的网页</title>
<link rel="stylesheet" type="text/css" href="完美的网页(切图).css">
</head>
<body background="images/背景.jpg">
<div class="title1">
<div class="helloworld">Hello World</div>
<div class="duanluo"><p>
china is speeding up strategic plan. standards.traffic rules. laws and rugulations on accident-incurred liabilities for its smart car industry. Economic information </p>
<p style="text-align: center;">Daily reported Thursday</p></div>
<div class="signup">
<div class="title">CREATE YOUR ACCOUNT</div>
<div class="title2">IT IS ABSOLUTELY FREE</div>
<div class="diyi">neirong</div>
<div class="dier">neirong2</div>
<div class="disan">sign up</div>
</div>
<div class="white">
<div class="white1">
<div class="title01"> BOATLOADS OF AWESCME</div>
<div class="title02">Ready-made,customizable,HTML
landing page sections</div>
<div class="logoinput">
<div class="top">
<div class="li1"><img src="images/logo图标_03.png"/></div>
<div class="li2"><img src="images/logo图标_05.png"/></div>
</div>
<div class="bottom">
<div class="li3"><img src="images/logo图标_07.png"/></div>
<div class="li4"><img src="images/logo图标_08.png"/></div>
</div>
</div>
</div>
</div>
<div class="background2"><div class="limian">
<div class="hezizuo">
<p style="font-size: 30px;color: white;">Supportive policies <br> China's smart <br>car</p>
<p style="font-size: 12px;color: white;">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>
<div class="changfang">
<div class="xiaohe1">CHECK OUT FEATURES</div>
<div class="xiaohe2">TRY PRODUCT FOR FREE</div>
</div>
</div>
<div class="heziyou"><img src="images/youcetu_03.png"/></div>
</div>
</div>
<div class="wenzi"><div class="title111">
try Our Awesome Proudcts
</div>
<div class="fangge">
<div class="neihezi1">
<img src="images/小图_07.png"/>
</div>
<div class="neihezi2">
<img src="images/小图_09.png" />
</div>
<div class="neihezi3">
<img src="images/小图_11.png"/>
</div>
</div>
</div>
<div class="xiaoniao">
<div class="juzhong">
<div class="zuoshangtu"><img src="images/小鸟_16.png"></div>
<div class="youshangtu"><img src="images/小鸟_18.png"></div>
<div class="zuoxiatu"><img src="images/小鸟_26.png"></div>
<div class="youxiatu"><img src="images/小鸟_23.png"></div>
</div>
</div>
<div class="author">
<div class="author1">
<h1 style="text-align: center;">Our Awesome Crew</h1>
<p style="font-size: 12px; text-align: center; ">our unique online teaching style easy for everyone.Whether you <br>are trying to land a new jot. brush up on your skills.</p>
<div class="author11">
<img src="images/author_31.png">
</div>
</div>
</div>
<div class="aaa">
<div class="bbb">
<div class="box2">
<div class="zuobox2"><img src="images/dierdaoshu_35.png"></div>
<div class="youbox2"><img src="images/dierdaoshu_37.png"></div>
</div>
</div>
</div>
<div class="zuihou">
<img src="images/zuihouyizhangtu_42.png">
</div>
</div>
</body>
</html>
css部分
.title1{
position: relative;
}
*{
margin: 0;
padding: 0;
}
.helloworld{
color: white;
position: absolute;
top: 40px;
left: 550px;
font-size: 30px;
/* background-color: red; */
}
.duanluo{
color: white;
position:absolute;
top: 100px;
left: 300px;
width: 610px;
height: 200px;
/* background-color: green; */
}
.signup{
width: 960px;
height: 200px;
border: 1px solid black;
/* background-color: red; */
position: absolute;
left: 150px;
top: 250px;
text-align: center;
color: white;
}
.diyi,.dier{
/* background-color: red; */
color: white;
width: 250px;
height: 4px;
line-height: 4px;
float: left;
margin: 45px 20px;
padding: 20px;
border: 1px solid bisque;
}
.disan{
background-color: white;
color: black;
width: 90px;
height: 4px;
line-height: 4px;
float: left;
margin: 45px 20px;
padding: 20px;
/* border: 1px solid bisque; */
}
.title{
/* background-color: red; */
margin-top: 40px;
}
.title2{
/* background-color: red; */
margin-top: 2px;
font-size: 10px;
color: rosybrown;
}
.white{
width: 100%;
height: 480px;
background-color: white;
position: absolute;
top: 550px;
}
.white1{
margin: 0 auto;
/* background-color: red; */
width: 960px;
height: 480px;
/* border: 1px solid green; */
position: relative;
}
.title01{
/* position: absolute;
top: 70px;
left: 30px; */
margin: 30px auto 10px auto;
width: 300px;
height: 30px;
/* background-color: red; */
font-size: 13px;
font-family: sans-serif;
}
.title02{
width: 400px;
height: 70px;
margin: 10px auto 10px auto;
/* background-color: gray; */
font-size: 22px;
font-family: sans-serif;
}
.logoinput{
margin: 20px auto;
width: 870px;
height: 310px;
}
.top{
display: flex;
}
.top li1{
flex: 1;
margin: 0 auto;
}
.top li2{
flex: 1;
}
.bottom{
display: flex;
}
.bottom li3{
flex: 1;
}
.bottom li4{
flex: 1;
}
.background2{
width: 100%;
height: 500px;
position: absolute;
top: 1100px;
background-color: red;
background-image: url(images/dierbeijing_02.png);
}
.limian{
width: 1300px;
height: 500px;
/* border: 1px solid blue; */
margin: 0 auto;
display: flex;
overflow: hidden;
}
.hezizuo{
width: 350px;
height: 370px;
/* border: 1px solid red; */
/* background-color: grey; */
margin: 90px;
flex: 1;
padding: 0px 20px 40px 100px;
}
.changfang{
width: 340px;
height: 100px;
/* border: 1px solid red; */
margin: 40px 0px;
display: flex;
}
.xiaohe1{
height: 30px;
width: 30px;
/* border: 1px solid red; */
flex: 1;
margin: 20px 5px 10px 1px;
font-size: 12px;
color: black;
background-color: white;
line-height: 30px;
}
.xiaohe2{
height: 30px;
width: 30px;
/* border: 1px solid red; */
flex: 1;
margin: 20px 5px 10px 1px;
font-size: 12px;
color: white;
line-height: 30px;
}
.heziyou{
width: 800px;
height: 410px;
border: 1px solid red;
/* background-color: blue; */
flex: 1;
margin: 80px 0px;
/* float: left; */
}
.heziyou img{
width: 500px;
height: 370px;
margin: 20px;
}
.wenzi{
width: 100%;
height: 420px;
/* border: 1px solid red; */
position: absolute;
top: 1600px;
}
.title111{
width: 300px;
height: 40px;
/* background-color: red; */
margin-left: 500px;
color: black;
font-size: 20px;
}
.fangge{
height: 370px;
width: 960px;
/* border: 1px solid red; */
margin: 5px auto;
display: flex;
}
.neihezi1,.neihezi2,.neihezi3{
height: 340px;
/* border: 1px solid red; */
flex: 1;
margin: 10px;
/* background-color: red; */
}
.neihezi1 img{
width: 250px;
height: 320px;
/* margin: 2px; */
padding: 10px;
margin: 2px;
}
.xiaoniao{
width: 100%;
height: 500px;
/* border: 1px solid red; */
/* background-color: red; */
position: absolute;
top: 2010px;
/* overflow: hidden; */
}
.juzhong{
width: 960px;
height: 500px;
/* border: 1px solid green; */
margin: 0 auto;
}
.zuoshangtu{
width: 420px;
height: 200px;
/* border: 1px solid green; */
float: left;
margin: 15px 1px 15px 37px;
}
.youshangtu{
width: 290px;
height: 180px;
/* border: 1px solid red; */
float: right;
margin: 25px 40px;
}
.zuoxiatu{
width: 290px;
height: 180px;
/* border: 1px solid blue; */
float: left;
margin: 40px 15px 2px 37px;
}
.youxiatu{
width: 420px;
height: 220px;
/* border: 1px solid green; */
float: right;
margin: 15px;
}
.zuoshangtu img{
width: 420px;
height:200px;
margin: 0px;
}
.youshangtu img{
width: 290px;
height:180px;
}
.zuoxiatu img{
width: 290px;
height: 180px;
}
.youxiatu img{
width: 420px;
height: 220px;
}
.author{
width: 100%;
height: 550px;
/* background-color: red; */
position: absolute;
top: 2510px;
}
.author1{
width: 960px;
height: 520px;
/* border: 2px solid red; */
margin: 0 auto;
/* background-color: blue; */
}
.author11{
width: 500px;
height: 400px;
margin: 10px 80px;
}
.author11 img{
width: 700px;
height: 400px;
}
.aaa{
width: 100%;
height: 450px;
position: absolute;
top: 3030px;
}
.bbb{
width: 960px;
height: 450px;
margin: 0 auto;
/* border: 1px solid red; */
}
.zuobox2,.youbox2{
width: 280px;
height: 320px;
/* border: 1px solid red; */
float: left;
margin: 80px 80px;
}
.zuobox2 img{
width: 280px;
height: 320px;
}
.youbox2 img{
width: 280px;
height: 320px;
}
.zuihou{
width: 100%;
height: 300px;
position: absolute;
top: 3500px;
border: 1px solid cadetblue;
background-color: red;
}
.zuihou img{
width: 100%;
height: 300px;
}