[Demo]用简单的html，css做一个漂亮的网页！
下面是实现效果：
预览地址：https://jh-leong.github.io/Dmeo/ife_1/index.html
![[Demo]用简单的html，css做一个漂亮的网页！_第1张图片](http://img.e-com-net.com/image/info8/4adca277110844c09469ff7dddec4576.jpg)
![[Demo]用简单的html，css做一个漂亮的网页！_第2张图片](http://img.e-com-net.com/image/info8/5e70a12fedac4807b7eff2895bf8e91a.jpg)
代码如下：
html
<html lang="zh_cn">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<link rel="stylesheet" href="sheji.css">
head>
<body>
<header>
<div id="title">Hello worlddiv>
<div id="passages">
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.
div>
<div id="login">
<div>CREATE YOUR ACCOUNTdiv>
<div>IT IS ABSOLUTELY FREEdiv>
<div>
<input type="text" placeholder=" [email protected]">
<input type="text" placeholder=" Create your password">
<input type="submit" value=" SIGN UP ">
div>
div>
header>
<section>
<div id="second">
<div>BOATLOADS OF AWESOMEdiv>
<div>
Ready-made, customizable, HTML
<br>landing page sections
div>
<div id="info">
<div id="phone">
<img src="img/Iphone Icon.png">
<h1>Mobile Firsth1>
<p>
This scenario might have seemed more likely in the universe imagined by Aristotle and Ptolemy.
p>
div>
<div id="check">
<img src="img/Check Icon.png">
<h1>Accessibilityh1>
<p>Today they estimate as many as 500 billion billion sunlike stars, with 100 billion billion Earthlike
planets.
p>
div>
<div id="pencil">
<img src="img/Pencil Icon.png"/>
<h1>Fluid Typographyh1>
<p>
The more we learn about the universe, the more absurd it would seem if all but one of those bodies were
bereft of life.
p>
div>
<div id="setting">
<img src="img/Settings Icon.png">
<h1>Customizationh1>
<p>
Maybe humanity is still so basic and primitive that advanced civilizations don’t think we’re worth talking
to.
p>
div>
div>
div>
section>
<section id="third">
<div>
<div id="supportive">
<h1>Supportive policies for <br> China's smart carh1>
<br>
<p>
Fermi wasn’t the first person to ask a variant of this question about alien intelligence. But he owns it. The query is known
around the world as the Fermi paradox. It’s typically summarized like this: If the universe is unfathomably
large, the probability of intelligent alien life seems almost certain.
p>
<br>
<br>
<button id="button1">CHECK OUR FEATURESbutton>
<button id="button2">TRY PRODUCT FOR FREEbutton>
div>
<div id="ipad">
<img src="img/IPad.png">
div>
div>
section>
<section id="fourth">
<div id="crew">
<div>Our Awesome Crewdiv>
<br>
<div>
Our unique online teaching style makes learning easy for everyone.Whether you are trying to land a new job, brush
up on your skills.
div>
<div id="crewphoto">
<div class="img_div">
<img class="who" src="img/3.png" />
<div class="mask">
<h1>Ethan Duttonh1>
<p>SENIOR VISUAL DESINCERp>
<div>
<img src="img/Facebook Icon.png">
<img src="img/Facebook Icon.png">
<img src="img/Facebook Icon.png">
div>
div>
div>
<div class="img_div">
<img class="who" src="img/3.png" />
<div class="mask">
<h1>Ethan Duttonh1>
<p>SENIOR VISUAL DESINCERp>
<div>
<img src="img/Facebook Icon.png">
<img src="img/Facebook Icon.png">
<img src="img/Facebook Icon.png">
div>
div>
div><div class="img_div">
<img class="who" src="img/3.png" />
<div class="mask">
<h1>Ethan Duttonh1>
<p>SENIOR VISUAL DESINCERp>
<div>
<img src="img/Facebook Icon.png">
<img src="img/Facebook Icon.png">
<img src="img/Facebook Icon.png">
div>
div>
div><div class="img_div">
<img class="who" src="img/3.png" />
<div class="mask">
<h1>Ethan Duttonh1>
<p>SENIOR VISUAL DESINCERp>
<div>
<img src="img/Facebook Icon.png">
<img src="img/Facebook Icon.png">
<img src="img/Facebook Icon.png">
div>
div>
div>
div>
div>
section>
body>
html>
CSS
*{margin: 0;padding: 0;}
body{
font-family: "Microsoft Yahei",sans-serif;
}
header{
font-weight: lighter;
background-image: url(img/Background.png);
color: white;
width: 100%;
height: 990px;
text-align: center;
margin: 0 auto;
}
#title{
display: inline-block;
margin-top: 200px;
font-size: 64px;
}
#passages{
padding: 100px 25% 70px 25%;
font-size: 20px;
color: #BFBFBF;
}
#login{
display: inline-block;
width: 65%;
height: 240px;
border: 1px solid #808080;
}
#login div:first-child{
padding: 60px 0 15px 0;
font-size: 22px;
}
#login div:nth-child(2){
padding-bottom: 30px;
color: rgb(90, 90, 90);
}
#login div input:first-child{
width: 25%;
height: 40px;
border: 1px solid #808080;
background:rgba(0,0,0,0);
}
#login div input:first-child::placeholder{
color: white;
}
#login div input:nth-child(2) {
width: 25%;
height: 40px;
border: 1px solid #808080;
background:rgba(0,0,0,0);
margin-left: 5px;
}
#login div input:nth-child(3) {
width: 10%;
height: 40px;
background-color: #000000;
color: #ffffff;
border: none;
margin-left: 5px;
}
section{
width: 100%;
text-align: center;
margin: 0 auto;
/*border-bottom: 2px solid rgb(200, 200, 200);*/
}
#second{
height: 700px;
}
#second>div:nth-child(1){
display: inline-block;
margin-top: 120px;
}
#second>div:nth-child(2){
margin-top: 60px;
font-size: 48px;
height: 170px;
font-weight: lighter;
}
#info{
width: 80%;
height: 450px;
margin: 0px auto;
margin-top: 50px;
}
#info div{
width: 50%;
height: 120px;
text-align: left;
padding-bottom: 20px;
}
#phone,#pencil{
float: left;
}
#check,#setting{
float: right;
}
#info div img{
display: block;
float: left;
padding: 0 15px 80px 20px;
}
#info div h1{
padding-bottom: 10px;
}
#third{
height: 750px;
/*图片路径不能有空格*/
background-image: url(img/Background2.png);
text-align: left;
color: white;
font-weight: lighter;
}
#supportive{
width: 32%;
height: 430px;
float: left;
padding: 150px 0 0 10%;
}
#supportive h1{
font-size: 40px;
font-weight: lighter;
}
#supportive p{
font-size: 18px;
color: black;
}
#supportive button{
width: 50%;
height: 50px;
text-align: center;
margin-bottom: 10px;
/*border: none;*/
border-radius: 5px;
border: 1px solid black;
}
#button1{
background: white;
}
#button2{
background: rgb(0,0,0,0);
color: white;
}
#ipad{
width: 40%;
height: 100%;
float: right;
margin-top: 75px;
}
#ipad img{
width: 100%;
}
#fourht{
width: 100%;
height: 1000px;
}
#crew>div:nth-child(1){
padding-top: 50px;
font-size: 40px;
font-weight: lighter;
}
#crew>div:nth-child(3){
width: 30%;
padding-bottom: 30PX;
margin: 0 auto;
font-weight: lighter;
}
#crewphoto{
width: 50%;
height: 500px;
margin: 0 auto;
}
.img_div {
width: 40%;
position: relative;
float: left;
margin: 5%;
}
.who{
width: 100%;
}
.mask {
background-image: url(img/Background拷贝.png);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
color: white;
opacity: 0;
}
.mask h1{
font-weight: lighter;
padding-top: 10%;
}
.mask p{
/*font-weight: lighter;*/
padding-top: 5%;
color: black;
}
.mask img{
padding-top: 20%;
}
.mask:hover{
opacity: 1;
}
总结：
几个页面实现下来，我的收获还是很多的，对页面的布局，浮动和定位有了进一步的认识。
做的过程中踩过一个坑，背景图片设置了url之后一直都没有显示，找了半天原因在哪…后来才发现原来是图片路径里有一个空格…