我们来模仿一下Google的网页作为练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="d01">
<p class="p01">About</p>
<p class="p01">Store</p>
<img class="img01" src="head.jpg" alt="">
<p class="p02">Images</p>
<p class="p02">Gmail</p>
</div>
<div class="d02">
<img class="img02" src="logo.png" alt="">
<div class="d04">
<img class="img03" src="search.jpg" alt="">
</div>
</div>
<div class="d03"></div>
</body>
</html>
然后来看一下css
body {
margin: 0px;
padding: 0px;
}
.d01 {
height: 80px;
}
.p01 {
display: inline-block;
font-size: 13px;
color: #666;
margin-left: 20px;
margin-top: 20px;
}
.img01 {
width: 40px;
height: 40px;
float: right;
margin: 20px;
}
.p02 {
float: right;
margin-right: 20px;
margin-top: 30px;
font-size: 13px;
color: #666;
}
.d02 {
height: 530px;
text-align: center;
}
.d03 {
height: 110px;
background-color: #ddd;
}
.img02 {
width: 275px;
margin-top: 100px;
}
.img03 {
width: 600px;
}
.d04{
text-align: center;
}
然后我们来看一下效果图
还是挺像的
然后我们可以来模仿一下Apple的官网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Apple</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="d01">
<div class="d02">
<img class="img01" src="apple.png" alt="">
<ul class="ul01">
<li>Mac</li>
<li>iPad</li>
<li>iPhone</li>
<li>Watch</li>
<li>TV</li>
<li>Music</li>
<li>Support</li>
</ul>
<img class="img02" src="apple.png" alt="">
<img class="img02" src="apple.png" alt="">
</div>
</div>
<div class="d03">
<p class="p01">iPhone 11 Pro</p>
<p class="p02">Pro cameras. Pro display. Pro performance.</p>
<p class="p03">From £759 with trade-in.</p>
<p class="p03">From £30.99/mo. with trade-in at an Apple Store.</p>
<img class="img03" src="phone.jpg" alt="">
</div>
<div class="d04">
<p class="p04">iPhone 11</p>
</div>
</body>
</html>
然后是CSS
* {
padding: 0px;
margin: 0px;
}
.d01 {
height: 60px;
background-color: #313131;
}
.d02 {
width: 1024px;
margin: 0 auto;
}
.img01 {
width: 40px;
display: block;
float: left;
margin-top: 10px;
}
.ul01 li {
color: #fff;
display: block;
float: left;
margin-left: 70px;
line-height: 58px;
font-size: 13px;
}
.img02 {
width: 40px;
display: block;
float: left;
margin-top: 10px;
margin-left: 60px;
}
.d03 {
height: 550px;
background-color: black;
text-align: center;
}
.p01 {
color: white;
font-size: 60px;
padding-top: 40px;
}
.p02 {
color: white;
font-size: 30px;
}
.p03 {
color: #999;
font-size: 20px;
}
.img03 {
width: 700px;
margin-top: 50px;
}
.d04 {
text-align: center;
}
.p04 {
padding-top: 20px;
color: black;
font-size: 60px;
}
然后我们来看下效果
也挺像的,还是不错的