记录我的成长过程，仿苹果官网，学HTML的第四天。完成老师布置的作业敲一个苹果官网。
一、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Apple（中国大陆）- 官方网站</title>
</head>
<style type="text/css">
.A {
border: 1px white solid;
width: 100%;
height: 40px;
text-align: center;
padding-top: 130px;
background-color: darkgray;
background-color: rgba(0, 0, 0, 0.06);
}
.B {
border: 1px white solid;
width: 100%;
height: 780px;
text-align: center;
background-color: rgba(251, 251, 253)
}
.B1 {
margin-top: 100px;
font-size: 64px;
}
.B2 {
margin-top: 10px;
}
.B3 {
margin-top: 10px;
}
a:link {
text-decoration: none;
}
a:visited {
color: blue;
}
.a {
border: 1px rgba(51, 51, 51) solid;
width: 100%;
height: 50px;
background-color: rgba(68, 68, 68, 0.97);
position: fixed;
margin-top: -10px;
}
.a1 {
margin-left: 1500px;
margin-top: 10px;
}
.b {
border: 1px rgba(51, 51, 51) solid;
width: 100%;
height: 50px;
background-color: rgba(51, 51, 51);
position: fixed;
margin-top: 40px;
padding-left: 300px;
}
.b1 {
margin-left: 115px;
margin-top: -30px;
}
.b3 {
margin-left: 1050px;
margin-top: -35px;
}
.C2 {
font-size: 64px;
}
.SE {
border: 4px #000000 solid;
width: 60px;
height: 60px;
margin-left: 1070px;
margin-top: -75px;
border-radius: 20px;
}
.second {
border: 1px white solid;
width: 100%;
height: 750px;
background-color: rgba(251, 251, 253);
}
.SEpicture {
margin-top: 100px;
}
.SEname {
font-size: 40px;
}
.SE3 {
margin-left: 45%;
margin-top: 10px;
}
.SE1 {
margin-top: 40px;
}
.SE4 {
margin-left: 47%;
margin-top: 10px;
}
.SE5 {
margin-left: 45%;
}
.air {
border: 1px white solid;
width: 100%;
height: 725px;
margin-top: 60px;
background: url(./img/ipad%20air.jpg);
}
.C2 {
margin-left: 44%;
}
.air1 {
border: 1px black solid;
width: 150px;
height: 80px;
margin-left: 21%;
margin-top: 225px;
}
.airtext {
font-size: 64px;
color: #FFFFFF;
}
.air2 {
border: 1px black solid;
width: 350px;
height: 200px;
margin-left: 20%;
}
.air2text1 {
color: #FFFFFF;
font-size: 25px;
margin-left: 50px;
margin-top: -20px;
}
.air3 {
margin-left: 18%;
margin-top: -15px;
}
.air4 a {
color: dodgerblue;
}
.air4 {
margin-left: 15px;
margin-top: 30px;
}
.fenkuai {
border: 1px white solid;
width: 100%;
height: 2250px;
}
.fenkuai1 {
border: 1px white solid;
width: 49.5%;
height: 750px;
float: left;
background-color: rgba(251, 251, 253);
}
.fenkuai2 {
border: 1px white solid;
width: 49.5%;
height: 750px;
float: right;
background-color: rgba(251, 251, 253);
}
.fenkuai3 {
border: 1px white solid;
width: 49.5%;
height: 750px;
float: left;
background-color: rgba(251, 251, 253);
}
.fenkuai4 {
border: 1px white solid;
width: 49.5%;
height: 750px;
float: right;
background-color: rgba(251, 251, 253);
}
.fenkuai5 {
border: 1px white solid;
width: 49.5%;
height: 750px;
float: left;
background-color: rgba(251, 251, 253);
}
.fenkuai6 {
border: 1px white solid;
width: 49.5%;
height: 750px;
float: right;
background-color: rgba(251, 251, 253);
}
.fenkuai1text1 {
font-size: 24px;
text-align: center;
margin-top: 70px;
}
.fenkuai2text1 {
font-size: 24px;
text-align: center;
margin-top: 70px;
}
.fenkuai3text1 {
font-size: 24px;
text-align: center;
margin-top: 70px;
}
.fenkuai4text1 {
font-size: 24px;
text-align: center;
margin-top: 70px;
}
.fenkuai5text1 {
font-size: 24px;
text-align: center;
margin-top: -50px;
}
.fenkuai6text1 {
font-size: 24px;
text-align: center;
margin-top: 70px;
}
.fenkuai1text2 {
margin-left: 45%;
margin-top: -35px;
}
.fenkuai1text3 {
margin-left: 43%;
margin-top: 15px;
}
.fenkuai1text4 {
margin-left: 38%;
margin-top: 13px;
}
.fenkuai2text2 {
margin-left: 45%;
margin-top: -35px;
}
.fenkuai2text3 {
margin-left: 43%;
margin-top: 15px;
}
.fenkuai2text4 {
margin-left: 38%;
margin-top: 13px;
}
.fenkuai2pictre {
margin-left: -350px;
}
.fenkuai3text2 {
text-align: center;
margin-top: -35px;
}
.fenkuai3text3 {
text-align: center;
margin-top: 8px;
}
.fenkuai4textwatch {
margin-top: -10px;
}
.fenkuai4text1logo {
margin-left: -240px;
margin-top: -94px;
}
.fenkuai4text3 {
text-align: center;
margin-top: -10px;
}
.fenkuai4text4 {
text-align: center;
margin-top: 10px;
}
.fenkuai5text2 {
text-align: center;
margin-top: -10px;
}
.fenkuai5text3 {
text-align: center;
margin-top: 10px;
}
.fenkuai6text1logo {
margin-left: 250px;
margin-top: -80px;
}
.fenkuai6text1ipad {}
.fenkuai6text2 {
margin-left: 10%;
margin-top: -0px;
}
.fenkuai6text3 {
margin-left: 10%;
margin-top: 10px;
}
.last {
margin-top: 30px;
border: 1px white solid;
width: 100%;
height: 640px;
background-color: rgba(251, 251, 253);
}
.last1 {
border: 1px white solid;
width: 250px;
height: 500px;
margin-top: 50px;
margin-left: 200px;
float: left;
}
.last2 {
border: 1px white solid;
width: 250px;
height: 500px;
margin-top: 50px;
margin-left: 70px;
float: left;
}
.last3 {
border: 1px white solid;
width: 250px;
height: 500px;
margin-top: 50px;
margin-left: 70px;
float: left;
}
.last4 {
border: 1px white solid;
width: 250px;
height: 500px;
margin-top: 50px;
margin-left: 70px;
float: left;
}
.last5 {
border: 1px white solid;
width: 250px;
height: 500px;
margin-top: 50px;
float: left;
margin-left: 70px;
}
.last1 ul {
list-style: none;
}
.last2 ul {
list-style: none;
}
.last3 ul {
list-style: none;
}
.last4 ul {
list-style: none;
}
.last5 ul {
list-style: none;
}
.last1 a {
color: #000000;
font-family: "楷体";
line-height: 35px;
}
.last2 a {
color: #000000;
font-family: "楷体";
line-height: 35px;
}
.last3 a {
color: #000000;
font-family: "楷体";
line-height: 35px;
}
.last4 a {
color: #000000;
font-family: "楷体";
line-height: 35px;
}
.last5 a {
color: #000000;
font-family: "楷体";
line-height: 35px;
}
.last6 {
width: 600px;
height: 20px;
border: 1px solid #white;
margin-left: 230px;
margin-top: 5px;
}
.last7 {
margin-left: 40px;
margin-top: 550px;
}
.last8 {
margin-left: 230px;
}
.last9{
margin-left: 230px;
}
</style>
<body>
<div class="a">
<div class="a1">
<font size="3px" color="darkgray">
<广告>
</font>
</div>
</div>
<div class="b">
<a href="https://www.apple.com.cn/"><img src="img/第三层div.jpg"></a>
<div class="b1">
<a href="https://www.apple.com.cn/store">
<font color="mintcream">商店</font>
</a>
<a href="https://www.apple.com.cn/mac/">
<font color="mintcream">Mac</font>
</a>
<a href="https://www.apple.com.cn/ipad/">
<font color="mintcream">iPad</font>
</a>
<a href="https://www.apple.com.cn/iphone/">
<font color="mintcream">iPhone</font>
</a>
<a href="https://www.apple.com.cn/watch/">
<font color="mintcream">Watch</font>
</a>
<a href="https://www.apple.com.cn/airpods/">
<font color="mintcream">AirPods</font>
</a>
<a href="https://www.apple.com.cn/apple-home/">
<font color="mintcream">家居</font>
</a>
<a href="https://www.apple.com.cn/services/">
<font color="mintcream">Apple独家</font>
</a>
<a href="https://www.apple.com.cn/shop/accessories/all">
<font color="mintcream">配件</font>
</a>
<a href="https://support.apple.com/zh-cn">
<font color="mintcream">技术支持</font>
</a>
<div class="b3">
<img src="img/搜索.png">
<img src="img/商店%20(1).png">
</div>
</div>
</div>
<div class="A">
<a href="https://www.apple.com.cn/store">在线选购</a>，享受免费送货、Specialist 专家支持、免息分期等服务。
</div>
<div class="B">
<div class="B1">
<b>iPhone 13 Pro</b>
</div>
<div class="B2">
<font size="5px" color="darkgray">苍岭绿色于3月18日发售</font>
</div>
<div class="B3">
<a href="https://www.apple.com.cn/iphone-13-pro/">
<font size="5px">进一步了解 ></font>
</a><a href="https://www.apple.com.cn/shop/buy-iphone/iphone-13-pro">
<font size="5px">选购 ></font>
</a>
</div>
<div class="B4">
<img src="img/第一层DIV.png" height="510px" width="100%">
</div>
</div>
<div class="second">
<div class="C">
<div class="SE1">
<h2 align="center">新一代</h2>
</div>
<div class="C2">
<b>iPhone</b>
</div>
<div class="SE">
<div class="SEname" align="center">
<b>SE</b>
</div>
</div>
<div class="SE3">
<font size="5px" color="black">重磅实力，轻松入手</font>
</div>
<div class="SE4">
<font size="5px" color="darkgray">3 月 18 日发售</font>
</div>
<div class="SE5">
<a href="https://https://www.apple.com.cn/iphone-se/">
<font size="5px">进一步了解 ></font>
</a><a href="https://https://www.apple.com.cn/shop/buy-iphone/iphone-se">
<font size="5px">预购 ></font>
</a>
</div>
<div class="SEpicture">
<img src="img/SE.png">
</div>
</div>
</div>
<div class="air">
<div class="air1">
<div class="airtext">
<b>iPad</b>
</div>
</div>
<div class="air2">
<div class="air2text1">
<h3>轻，靓，重量级。</h3>
</div>
<div class="air3">
<font size="5px" color="darkgray">3 月 18 日发售</font>
</div>
<div class="air4">
<a href="https://www.apple.com.cn/ipad-air/">
<font size="5px">进一步了解 ></font>
</a><a href="https://www.apple.com.cn/shop/buy-ipad/ipad-air">
<font size="5px">立即预购 ></font>
</a>
</div>
</div>
</div>
<div class="fenkuai">
<div class="fenkuai1">
<div class="fenkuai1text1">
<h1>Studio Display</h1>
</div>
<div class="fenkuai1text2">
<font size="5px" color="black">眼界全开</font>
</div>
<div class="fenkuai1text3">
<font size="4px" color="darkgray">3 月 18 日发售</font>
</div>
<div class="fenkuai1text4">
<a href="https://www.apple.com.cn/studio-display/">
<font size="4px">进一步了解 ></font>
</a><a href="https://www.apple.com.cn/shop/buy-mac/mac-studio-display">
<font size="4px">立即预购 ></font>
</a>
</div>
<img src="img/电脑.png" width="100%" height="68%">
</div>
<div class="fenkuai2">
<div class="fenkuai2text1">
<h1>Mac Studio</h1>
</div>
<div class="fenkuai2text2">
<font size="5px" color="black">造梦引擎</font>
</div>
<div class="fenkuai2text3">
<font size="4px" color="darkgray">3 月 18 日发售</font>
</div>
<div class="fenkuai2text4">
<a href="https://www.apple.com.cn/studio-display/">
<font size="4px">进一步了解 ></font>
</a><a href="https://www.apple.com.cn/shop/buy-mac/mac-studio-display">
<font size="4px">立即预购 ></font>
</a>
<div class="fenkuai2pictre">
<img src="img/机顶盒.png">
</div>
</div>
</div>
<div class="fenkuai3">
<div class="fenkuai3text1">
<h1>iPhone 13</h1>
<div class="fenkuai3text2">
<font size="4px" color="darkgray">绿色于3 月 18 日发售</font>
</div>
<div class="fenkuai3text3">
<a href="https://www.apple.com.cn/iphone-13/">
<font size="4px">进一步了解 ></font>
</a><a href="https://www.apple.com.cn/shop/buy-iphone/iphone-13">
<font size="4px">选购 ></font>
</a>
</div>
<img src="img/手机.png" width="100%" height="540px">
</div>
</div>
<div class="fenkuai4">
<div class="fenkuai4text1">
<div class="fenkuai4textwatch">
<h1>WATCH</h1>
</div>
<div class="fenkuai4text1logo">
<img src="img/手表的苹果logo.PNG">
</div>
<img src="img/S7代.PNG">
</div>
<div class="fenkuai4text3">
<font size="5px" color="black">更大屏幕腕上见</font>
</div>
<div class="fenkuai4text4">
<a href="https://www.apple.com.cn/apple-watch-series-7/">
<font size="4px">进一步了解 ></font>
</a><a href="https://www.apple.com.cn/shop/buy-watch/apple-watch">
<font size="4px">购买 </font>
</a>
</div>
<img src="img/手表.PNG">
</div>
<div class="fenkuai5">
<img src="img/耳机.PNG" width="100%">
<div class="fenkuai5text1">
<h1>AirPods</h1>
</div>
<div class="fenkuai5text2">
<font size="5px" color="black">全新支持空间音频</font>
</div>
<div class="fenkuai5text3">
<a href="https://www.apple.com.cn/apple-watch-series-7/">
<font size="4px">进一步了解 ></font>
</a><a href="https://www.apple.com.cn/shop/buy-watch/apple-watch">
<font size="4px">购买 </font>
</a>
</div>
</div>
<div class="fenkuai6">
<div class="fenkuai6text1">
<div class="fenkuai6text1ipad">
<h1>iPad</h1>
</div>
<div class="fenkuai6text1logo">
<img src="img/mini%20LOGO.PNG">
</div>
<div class="fenkuai6text2">
<font size="5px" color="black">小写的大</font>
</div>
<div class="fenkuai6text3">
<a href="https://www.apple.com.cn/apple-watch-series-7/">
<font size="4px">进一步了解 ></font>
</a><a href="https://www.apple.com.cn/shop/buy-watch/apple-watch">
<font size="4px">购买 </font>
</a>
</div>
</div>
<img src="img/pad迷你.PNG" width="100%">
</div>
</div>
<div class="last">
<div class="last1">
<ul>
<li><a href=""><b>选购及了解</b></a></li>
<li><a href="">商店</a></li>
<li><a href="">Mac</a></li>
<li><a href="">iPad</a></li>
<li><a href="">iPhone</a></li>
<li><a href="">Watch</a></li>
<li><a href="">AirPods</a></li>
<li><a href="">家居</a></li>
<li><a href="">Ipod touch</a></li>
<li><a href="">AirTag</a></li>
<li><a href="">配件</a></li>
<li><a href="">App Store充值卡</a></li>
</ul>
</div>
<div class="last2">
<ul>
<li><a href=""><b>服务</b></a></li>
<li><a href="">Apple Music</a></li>
<li><a href="">iCloud</a></li>
<li><a href="">Apple Pay</a></li>
<li><a href="">Apple 博客</a></li>
<li><a href="">Apple Store</a></li>
<br>
<li><a href=""><b>账户</b></a></li>
<li><a href="">管理你的Apple ID</a></li>
<li><a href="">Apple Store 账户</a></li>
<li><a href="">iCloud。com</a></li>
<li><a href="">配件</a></li>
</ul>
</div>
<div class="last3">
<ul>
<li><a href=""><b>Apple Store 商城</b></a></li>
<li><a href="">查找零售店</a></li>
<li><a href="">Genius Bar 天才吧</a></li>
<li><a href="">Today at Apple</a></li>
<li><a href="">Apple 夏令营</a></li>
<li><a href="">Apple Store App</a></li>
<li><a href="">翻新和优惠</a></li>
<li><a href="">分期付款</a></li>
<li><a href="">Apple Trade In 换购计划</a></li>
<li><a href="">订单状态</a></li>
<li><a href="">选购帮助</a></li>
</ul>
</div>
<div class="last4">
<ul>
<li><a href=""><b>商务应用</b></a></li>
<li><a href="">Apple 与商务</a></li>
<li><a href="">商务选购</a></li>
<br>
<li><a href=""><b>教育应用</b></a></li>
<li><a href="">Apple 与教育</a></li>
<li><a href="">高校师生选购</a></li>
</ul>
</div>
<div class="last5">
<ul>
<li><a href=""><b>Apple 价值观</b></a></li>
<li><a href="">辅助功能</a></li>
<li><a href="">环境责任</a></li>
<li><a href="">隐私</a></li>
<li><a href="">供应商责任</a></li>
<br>
<li><a href=""><b>关于Apple</b></a></li>
<li><a href="">Newsroom</a></li>
<li><a href="">Apple 管理员</a></li>
<li><a href="">工作机会</a></li>
<li><a href="">创造就业</a></li>
<li><a href="">商业道德与合规性</a></li>
<li><a href="">活动</a></li>
<li><a href="">联系 Apple</a></li>
</ul>
</div>
<div class="last6">更多选购方式:<a href="">查找你附近的苹果商店</a>及<a href="">更多门店</a>或者致电400-666-8800。</div>
<div class="last7">
<hr width="80%">
</div>
<div class="last8">
Copyright © 2022 Apple Inc. 保留所有权利。
<a href="">隐私政策</a> |
<a href="">使用条款</a> |
<a href="">销售政策</a> |
<a href="">法律信息</a> |
<a href="">网站地图</a>
</div>
<div class="last9">
<a href="">京ICP备10214630</a>
<a href="">营业执照</a>
无线电发射设备销售备案编号11201910351200
</div>
</div>
</body>
</html>
历时一天半，终于敲完苹果官网的首页了，第四天学习html，写的有点乱。
二、使用步骤
大体框架是用<div class=""> </div>写的，首先把页面分为7个div框架，然后在每个div里面写入相对应的代码。
第一步：div中写入官网前两个灰色的悬浮框：写入里面的汉字并且用<style type="text/css"></style>调整位置，再用<a href=""></a>加入超链接，并且修改超链接的颜色（超链接的颜色是我截图然后用ps取色器取出相对应颜色的RGB三原色这只的。以下的超链接和背景颜色颜色方法相同）。
第二步 ：第二个div写出第三行的框架，然后内部再用div写入汉字
第三步：用div和style创建一个框架，然后插入图片和内容，并且居中 ，还有一些超链接，然后设置超链接的颜色（苹果官网的超链接访问前和访问后都是蓝色的），使用link{text-decoration: none;}和visited设置颜色，最后去掉超链接的下划线。
第四、五步：和第三步一样，出来的效果就是这样 。
第六步：在使用div和style写一个比较长的一个框架，然后再把框架根据苹果官网的位置划分为三行两列的空间，然后依次给每个方框里面些内容，在style里面调整位置和颜色。（效果比较大，我就第一行就可以了。）
第七步： 创建一个发框架，然后在内部写入五个小框架调整其位置。用无序列表+超链接写入内容（然后在用list-style: none;把无序列表前的小黑点去除，在对其进行调整颜色）最底下用一个<hr width="80%">分割线，分隔开内容，效果图如下。
大功告成！
版权声明：本文为weixin_55166132原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。