网页
一个网页做了好几天，终于做完了：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" href="img/www.ico.la_883ed79d201c2bc44ae63dfdc34c4ea0_16X16.ico" type="image/x-icon" />
<title>Apple</title>
<style>
* {
margin:0px;
padding:0px;
}
#dingbu {
width:100%;
height:50px;
background-color:black;
}
.a{
width:70%;
height:50px;
margin:0px auto;
}
.b1 {
width:9%;
height:50px;
/*border:1px solid red;*/
float:left;
background-image:url(img/apple666.png);
background-repeat:no-repeat;
text-align:center;
}
.b2 {
width:9%;
height:50px;
/*border:1px solid red;*/
float:left;
color:white;
/*font-size:13px;*/
margin:0px auto;
line-height:45px;
}
.b3 {
width:9%;
height:50px;
/*border:1px solid red;*/
float:left;
color:white;
font-size:13px;
margin:0px auto;
line-height:45px;
}
.b4 {
width:10%;
height:50px;
/*border:1px solid red;*/
float:left;
color:white;
font-size:13px;
margin:0px auto;
line-height:45px;
}
.b5 {
width:10%;
height:50px;
/*border:1px solid red;*/
float:left;
color:white;
font-size:13px;
margin:0px auto;
line-height:45px;
}
.b6 {
width:10%;
height:50px;
/*border:1px solid red;*/
float:left;
color:white;
font-size:13px;
margin:0px auto;
line-height:45px;
}
.b7 {
width:10%;
height:50px;
/*border:1px solid red;*/
float:left;
color:white;
font-size:13px;
margin:0px auto;
line-height:45px;
}
.b8{
width:10%;
height:50px;
/*border:1px solid red;*/
float:left;
color:white;
font-size:13px;
margin:0px auto;
line-height:45px;
}
.b9 {
width:20%;
height:50px;
float:left;
background-image:url(img/apple888.png);
background-repeat:no-repeat;
}
.dierbufen {
width:100%;
height:530px;
background-image:url(img/Apple.png)
}
.disanbufen {
width:100%;
height:200px;
margin:2px 0px 0px 0px;
}
.a1 {
width:333.5px;
height:200px;
float:left;
margin:0px 2px 0px 0px;
background-image:url(img/iphone7.png)
}
.a2 {
width:333.5px;
height:200px;
float:left;
margin:0px 2px 0px 0px;
background-image:url(img/make.png)
}
.a3 {
width:333.5px;
height:200px;
float:left;
margin:0px 2px 0px 0px;
background-image:url(img/watch.png)
}
.a4 {
width:333.5px;
height:200px;
float:left;
background-image:url(img/macbook.png)
}
.zuihouyibufen {
width:100%;
height:350px;
background-color:Lavender;
margin:2px 0px 0px 0px;
}
.c1 {
width:75%;
height:280px;
margin:0px auto;
}
.d1 {
width:19%;
height:280px;
float:left;
font-size:12px;
line-height:20px;
}
.d2 {
width:19%;
height:280px;
float:left;
font-size:12px;
line-height:20px;
}
.d3 {
width:19%;
height:280px;
float:left;
font-size:12px;
line-height:20px;
}
.d4 {
width:18%;
height:280px;
float:left;
font-size:12px;
line-height:20px;
}
.d5 {
width:24%;
height:280px;
float:left;
font-size:12px;
line-height:20px;
}
.d6 {
width:75%;
height:70px;
margin:0px auto;
font-size:12px;
}
.d61 {
width:100%;
height:25px;
margin:0px auto;
font-size:11px;
border-bottom:1px solid black;
}
.d62 {
width:100%;
height:45px;
margin:0px auto;
font-size:11px;
}
.d621 {
width:35%;
height:25px;
float:left;
font-size:11px;
line-height:25px;
}
.d622 {
width:10%;
height:25px;
float:left;
font-size:11px;
text-align:center;
line-height:25px;
}
.d623 { width:11%;
height:25px;
float:left;
font-size:11px;
text-align:center;
line-height:25px;
}
.d624 {
width:6%;
height:25px;
float:left;
font-size:11px;
text-align:center;
line-height:25px;
}
.d625 {
width:37%;
height:25px;
float:left;
font-size:11px;
line-height:25px;
}
</style>
</head>
<body>
<div id="dingbu">
<div class="a">
<div class="b1">
</div>
<div class="b2">Mac</div>
<div class="b3">iPad</div>
<div class="b4">iPhone</div>
<div class="b5">Watch</div>
<div class="b6">TV</div>
<div class="b7">Music</div>
<div class="b8">Support</div>
<div class="b9"></div>
<div class="b10"></div>
</div>
</div>
<div class="dierbufen"></div>
<div class="disanbufen">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
</div>
<div class="zuihouyibufen">
<div class="c1">
<div class="d1">
<h4>Shop and Learn</h4><br />
Mac<br />
iPad<br />
iPhone<br />
Watch<br />
TV<br />
Music<br />
iTunes<br />
iPod<br />
Accessories<br />
Gift Cards<br />
</div>
<div class="d2">
<h4>Apple Store</h4><br />
Find a Store<br />
Genius Bar<br />
Workshops and Learning<br />
Youth Programs<br />
Apple Store App<br />
Refurbished and Clearance<br />
Financing<br />
Reuse and Recycling<br />
Order Status<br />
Shopping Help<br />
</div>
<div class="d3">
<h4>For Education</h4><br />
Apple and Education<br />
Shop for College<br /><br />
<h4>For Business</h4>
Apple and Business<br />
Shop for Business<br />
</div>
<div class="d4">
<h4>Account</h4><br />
Manage Your Apple ID<br />
Apple Store Account<br />
iCloud.com<br /><br />
<h4>Apple Values</h4>
Accessibility<br />
Education<br />
Environment<br />
Inclusion and Diversity<br />
Privacy<br />
Supplier Responsibility<br />
</div>
<div class="d5">
<h4>About Apple</h4><br />
Apple Info<br />
Newsroom<br />
Job Opportunities<br />
Press Info<br />
Investors<br />
Events<br />
Contact Apple<br />
</div>
</div>
<div class="d6">
<div class="d61">More ways to shop: Visit an Apple Store, call 1-800-MY-APPLE, or find a reseller. </div>
<div class="d62">
<div class="d621">
Copyright © 2017 Apple Inc. All rights reserved. <b>Privacy Policy</b>
</div>
<div class="d622">
<b>Terms of Use</b>
</div>
<div class="d623"><b>Sales and Refunds</b> </div>
<div class="d624"><b>Legal</b> </div>
<div class="d625"><b>Site Map
United States</b>
</div>
</div>
</div>
</body>
</html>
