前端作业7.18（仿苹果页面）

哇，感觉这次的苹果页面比上次的百度要做的东西多，有很多东西没有放出来。果然，与苹果的哪些工作者还是有亿点差距的。。。对页面的总体布局也不是很好，代码的掌握程度也有点low了，总之需要学的还有很多，继续加油吧。。。

效果图：

html代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Apple</title><link rel="stylesheet" href="../css/apple.css"></head><body><div class="nav"><div class="nav1"><ul><li><a href="https://www.apple.com/" target="_blank" ><span class="apple"> &nbsp &nbsp &nbsp &nbsp</span></a></li><li><a href="https://www.apple.com/mac/" target="_blank">Mac</a></li><li><a href="https://www.apple.com/ipad/" target="_blank">iPad</a></li><li><a href="https://www.apple.com/iphone/" target="_blank">iPhone</a></li><li><a href="https://www.apple.com/watch/" target="_blank">Watch</a></li><li><a href="https://www.apple.com/tv/" target="_blank">TV</a></li><li><a href="https://www.apple.com/music/" target="_blank">Music</a></li><li><a href="#" target="_blank">Support</a></li><li><a href="https://support.apple.com/" target="_blank"><span class="sousuo">&nbsp &nbsp &nbsp &nbsp</span></a></li><li><a href="#" target="_blank"><span class="shop1">&nbsp &nbsp &nbsp &nbsp</span></a></li></ul></div></div><div class="navfix"><div class="nav11"></div></div><div class="div2"><div class="shop"><ul><li><a href="https://www.apple.com/shop">Shop online&nbsp </a></li><li>and get Specialist help, free no-contact delivery, and more.</li></ul></div></div><div class="beijing"><div class="beijing1"><div class="beij1"><a href="https://www.apple.com/us-hed/shop/back-to-school"></a></div></div><div class="beijing2"><div class="beij2"></div></div><div class="beijing3"><div class="beij3"></div></div><div class="beijing4"><div class="beij4"></div></div><div class="beijing5"><div class="beij5"><span class="beij51"></span><span class="beij52"></span></div></div><div class="beijing6"><div class="beij6"><span class="beij61"></span><span class="beij62"></span></div></div><div class="beijing7"><div class="beij7"><span class="beij71"></span><span class="beij72"></span></div></div><div class="beijing8"><div class="beij8"><p>1. Price includes a $30 AT&T, T-Mobile, Sprint, or Verizon discount. Requires activation with carrier. Monthly pricing: Available to qualified customers and requires 0% APR, 24-month installment loan with Citizens One or Apple Card Monthly Installments and iPhone activation with AT&T, Sprint, T-Mobile, or Verizon for purchases in an Apple Store. Taxes and shipping not included. Additional Apple Card Monthly Installments and iPhone Payments terms apply.</p><p>2. Monthly pricing: Available to qualified customers and requires 0% APR, 24-month installment loan with Citizens One or Apple Card Monthly Installments and iPhone activation with AT&T, Sprint, T-Mobile, or Verizon for purchases in an Apple Store. Taxes and shipping not included. Additional Apple Card Monthly Installments and iPhone Payments terms apply.</p><p>3. Qualified Purchasers receive Promotion Savings when they purchase an eligible Mac or eligible iPad with eligible AirPods at a Qualifying Location. Only one Promotion Product per eligible Mac or eligible iPad per Qualified Purchaser. Offer subject to availability. While supplies last. Qualified Purchasers selecting Apple Card Monthly Installments (“ACMI”) as payment type at checkout shall receive a discount equal to the value of the eligible AirPods off the price of the eligible Mac or iPad. This will result in one ACMI installment plan over 12 months for the eligible iPad or Mac discounted by the instant credit, and a second ACMI installment plan over 6 months for the full price of the eligible AirPods. Qualified Purchasers will be charged for all items in their cart, including the eligible AirPods plus any additional Upgrade Cost. If you choose the pay-in-full or one-time-payment option for an ACMI eligible purchase instead of choosing ACMI as the payment option at checkout, that purchase will be subject to the variable APR assigned to your Apple Card. Taxes and shipping are not included in ACMI transactions and are subject to your standard purchase APR. ACMI is subject to credit approval and credit limit. Variable APRs for Apple Card other than ACMI range from 10.99% to 21.99% based on creditworthiness. Rates as of April 1, 2020. See the Apple Card Customer Agreement for more information. Apple Card is issued by Goldman Sachs Bank USA, Salt Lake City Branch. Available for qualifying applicants in the United States. If you reside in the U.S. territories, please call Goldman Sachs at 877-255-5923 with questions about accessing this offer or applying for Apple Card. This offer cannot be combined with the Apple Employee Purchase Plan or business loyalty pricing. Availability of in-store promotion offerings may be limited by Apple Store location closures as a result of COVID-19. Additional restrictions apply. View full terms and conditions of offer here.</p><p>4. Not available in India.   </p><p>Apple TV+ is $4.99/month after free trial. One subscription per Family Sharing group. Offer good for 3 months after eligible device activation. Plan automatically renews until cancelled. Restrictions and other terms apply.</p><p> &nbsp </p><hr /><br /></span></div></div><div class="beijing9"><div class="beij91"><div class="bj91"><label class="lbl">Shop and Learn</label><ul><li><a href="https://www.apple.com/mac/" target="_self">Mac</a></li><li><a href="https://www.apple.com/mac/" target="_self">iPad</a></li><li><a href="https://www.apple.com/mac/" target="_self">Watch</a></li><li><a href="https://www.apple.com/mac/" target="_self">TV</a></li><li><a href="https://www.apple.com/mac/" target="_self">Music</a></li><li><a href="https://www.apple.com/mac/" target="_self">AirPods</a></li><li><a href="https://www.apple.com/mac/" target="_self">HomePod</a></li><li><a href="https://www.apple.com/mac/" target="_self">iPod touch</a></li><li><a href="https://www.apple.com/mac/" target="_self">AirTag</a></li><li><li><a href="https://www.apple.com/mac/" target="_self">Accessories</a></li><li><a href="https://www.apple.com/mac/" target="_self">Gift Cards</a></li></ul></div></div><div class="beij92"><div class="bj91"><label class="lbl">Shop and Learn</label><ul><li><a href="https://www.apple.com/mac/" target="_self">Mac</a></li><li><a href="https://www.apple.com/mac/" target="_self">iPad</a></li><li><a href="https://www.apple.com/mac/" target="_self">Watch</a></li><li><a href="https://www.apple.com/mac/" target="_self">TV</a></li><li><a href="https://www.apple.com/mac/" target="_self">Music</a></li><li><a href="https://www.apple.com/mac/" target="_self">AirPods</a></li><li><a href="https://www.apple.com/mac/" target="_self">HomePod</a></li><li><a href="https://www.apple.com/mac/" target="_self">iPod touch</a></li><li><a href="https://www.apple.com/mac/" target="_self">AirTag</a></li><li><li><a href="https://www.apple.com/mac/" target="_self">Accessories</a></li><li><a href="https://www.apple.com/mac/" target="_self">Gift Cards</a></li></ul></div></div><div class="beij93"><div class="bj91"><label class="lbl">Shop and Learn</label><ul><li><a href="https://www.apple.com/mac/" target="_self">Mac</a></li><li><a href="https://www.apple.com/mac/" target="_self">iPad</a></li><li><a href="https://www.apple.com/mac/" target="_self">Watch</a></li><li><a href="https://www.apple.com/mac/" target="_self">TV</a></li><li><a href="https://www.apple.com/mac/" target="_self">Music</a></li><li><a href="https://www.apple.com/mac/" target="_self">AirPods</a></li><li><a href="https://www.apple.com/mac/" target="_self">HomePod</a></li><li><a href="https://www.apple.com/mac/" target="_self">iPod touch</a></li><li><a href="https://www.apple.com/mac/" target="_self">AirTag</a></li><li><li><a href="https://www.apple.com/mac/" target="_self">Accessories</a></li><li><a href="https://www.apple.com/mac/" target="_self">Gift Cards</a></li></ul></div></div><div class="beij94"><div class="bj91"><label class="lbl">Shop and Learn</label><ul><li><a href="https://www.apple.com/mac/" target="_self">Mac</a></li><li><a href="https://www.apple.com/mac/" target="_self">iPad</a></li><li><a href="https://www.apple.com/mac/" target="_self">Watch</a></li><li><a href="https://www.apple.com/mac/" target="_self">TV</a></li><li><a href="https://www.apple.com/mac/" target="_self">Music</a></li><li><a href="https://www.apple.com/mac/" target="_self">AirPods</a></li><li><a href="https://www.apple.com/mac/" target="_self">HomePod</a></li><li><a href="https://www.apple.com/mac/" target="_self">iPod touch</a></li><li><a href="https://www.apple.com/mac/" target="_self">AirTag</a></li><li><li><a href="https://www.apple.com/mac/" target="_self">Accessories</a></li><li><a href="https://www.apple.com/mac/" target="_self">Gift Cards</a></li></ul></div></div><div class="beij95"><div class="bj91"><label class="lbl">Shop and Learn</label><ul><li><a href="https://www.apple.com/mac/" target="_self">Mac</a></li><li><a href="https://www.apple.com/mac/" target="_self">iPad</a></li><li><a href="https://www.apple.com/mac/" target="_self">Watch</a></li><li><a href="https://www.apple.com/mac/" target="_self">TV</a></li><li><a href="https://www.apple.com/mac/" target="_self">Music</a></li><li><a href="https://www.apple.com/mac/" target="_self">AirPods</a></li><li><a href="https://www.apple.com/mac/" target="_self">HomePod</a></li><li><a href="https://www.apple.com/mac/" target="_self">iPod touch</a></li><li><a href="https://www.apple.com/mac/" target="_self">AirTag</a></li><li><li><a href="https://www.apple.com/mac/" target="_self">Accessories</a></li><li><a href="https://www.apple.com/mac/" target="_self">Gift Cards</a></li></ul></div></div><div class="bj96">More ways to shop: <a href="https://www.apple.com/mac/" target="_self">Find an Apple Store</a> or <a href="https://www.apple.com/mac/" target="_self">other retailer</a> near you. Or call 1-800-MY-APPLE.</div><br /><div class="hrr"><hr /></div><div class="bj97"><span>Copyright © 2021 Apple Inc. All rights reserved.</span><span><a href="https://www.apple.com/mac/" target="_self">Privacy Policy </a> &nbsp |</span><span><a href="https://www.apple.com/mac/" target="_self"> Terms of Use</a> &nbsp |</span><span><a href="https://www.apple.com/mac/" target="_self">Sales and Refunds</a> &nbsp |</span><span><a href="https://www.apple.com/mac/" target="_self"> Legal</a> &nbsp |</span><span><a href="https://www.apple.com/mac/" target="_self"> Site Map</a></span><span class="bj98"><a href="https://www.apple.com/mac/" target="_self">United states</a></span></div></div></div></body>
</html>

css代码

*{margin: 0;padding: 0;
}
li{list-style: none;
}
.nav{width: 100%;height: 45px;display: flex;justify-content: center;align-items: center;background:rgba(0,0,0,0.8);position: fixed; z-index: 3;
}
.nav1{width: auto;height: auto;/* background-color: white; */}
.navfix{width: 100%;height: 45px;display: flex;justify-content: center;align-items: center;}
.nav11{width: auto;height: auto;background-color: white;}
.nav .nav1 ul li{float: left;padding-right: 77px;
}
.nav .nav1 ul li a{text-decoration: none;color:rgb(214,214,214);font-size: 14px;line-height: 3.14286;font-weight: 400;font-family: SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}
.nav .nav1 ul li a:hover{color: white;
}
.apple{background-image: url(../images/apple.png);background-size: 90% 90%;background-repeat: no-repeat;background-position: center center;
}
.sousuo{background-image: url(../images/sousuo.png);background-size: 220% 220%;background-repeat: no-repeat;background-position: center center;
}
.shop1{background-image: url(../images/shop.png);background-size: 190% 180%;background-repeat: no-repeat;background-position: center center;
}
.div2{width: 100%;height: 45px;display: flex;justify-content: center;align-items: center;background:rgba(245,245,247,0);
}
.div2 .shop ul li{float:left;font-size: 14px;line-height: 3.14286;font-weight: 400;font-family: SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}
.div2 .shop ul li a{text-decoration: none;color: rgb(0,104,204);
}
.beijing{width: 100%;}
.beijing1{width: 100%;height: 625px;background-image: url(../images/beijing1.png);background-repeat: no-repeat;background-position: center center;
}
.beij1{position: absolute;top: 265px;left: 602.2px;font-size: 25.4px;font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}
.beij1 a{text-decoration: none;color: rgb(0,104,204);
}
.beij1 a:hover{text-decoration: underline;
}
.beijing2{width: 100%;height: 625px;background-image: url(../images/beijing2.png);background-repeat: no-repeat;background-position: center center;position: absolute;top: 732px;
}
.beijing3{width: 100%;height: 625px;background-image: url(../images/beijing3.png);background-repeat: no-repeat;background-position: center center;position: absolute;top: 1372px;
}
.beijing4{width: 100%;height: 625px;background-image: url(../images/beijing4.png);background-repeat: no-repeat;background-position: center center;position: absolute;top: 2009px;
}
.beij51{width: 49.6%;height: 625px;background-image: url(../images/beijing51.png);background-repeat: no-repeat;background-position: left center;position: absolute;top: 2645px;left:0px;
}
.beij52{width: 49.6%;height: 625px;background-image: url(../images/beijing52.png);background-repeat: no-repeat;background-position: right center;position: absolute;top: 2645px;right: 0px;
}
.beij61{width: 49.6%;height: 625px;background-image: url(../images/beijing61.png);background-repeat: no-repeat;background-position: left center;position: absolute;top: 3285px;left:0px;
}
.beij62{width: 49.6%;height: 625px;background-image: url(../images/beijing62.png);background-repeat: no-repeat;background-position: right center;position: absolute;top: 3285px;right: 0px;
}
.beij71{width: 49.6%;height: 625px;background-image: url(../images/beijing71.png);background-repeat: no-repeat;background-position: left center;position: absolute;top: 3920px;left:0px;
}
.beij72{width: 49.6%;height: 625px;background-image: url(../images/beijing72.png);background-repeat: no-repeat;background-position: right center;position: absolute;top: 3920px;right: 0px;
}
.beijing8{width: 100%;position: absolute;top: 4555px;background-color: #f5f5f7;
}
.beij8{margin: auto;max-width: 980px;
}
.beij8 p{margin-top: 12px;font-size: 10px;font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;color: rgb(134,134,139);
}
.beijing9{width: 100%;position: absolute;top: 4920px;background-color: #f5f5f7;padding-left: 30px;padding-right: 30px;
}
.beij91{display: inline-block;width: 196px;margin-top: 0;margin-left: 238px;padding-right: 10px;}
.beij92{display: inline-block;width: 196px;margin-top: 0;padding-right: 10px;}
.beij93{display: inline-block;width: 196px;margin-top: 0;padding-right: 10px;}
.beij94{display: inline-block;width: 196px;margin-top: 0;padding-right: 10px;}
.beij95{display: inline-block;width: 196px;margin-top: 0;padding-right: 10px;}
.lbl{font-size: 12px;line-height: 1.337px;letter-spacing: -0.1em;font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Apple Legacy Chevron","Helvetica Neue","Helvetica","Arial",sans-serif;font-weight: 600;margin-right: 20px;margin-bottom: .8em;
}
.beijing9 ul li a{color: rgb(81,81,84);font-size: 10px;font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;text-decoration: none;
}
.beijing9 ul li a:hover{text-decoration: underline;
}
.bj96{margin-top: 40px;margin-left: 238px;font-size: 10px;font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}
.bj96 a{color: rgb(0,102,204);font-size: 10px;font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;text-decoration: none;
}
.bj96 a:hover{text-decoration: underline;
}
.bj97{margin-top: 10px;margin-left: 238px;font-size: 10px;font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}
.bj97 span{margin-right: 20px;
}
.bj97 span a{color: rgb(0,0,0);font-size: 10px;font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;text-decoration: none;
}
.bj97 span a:hover{text-decoration: underline;
}
.bj98{margin-left: 10px;
}
.hrr{margin-left: 242px;width: 990.4px;
}

前端作业7.18（仿苹果页面）相关推荐

android仿iphone页面,Android仿苹果关机界面实现代码
本文实例为大家分享了Android仿苹果关机界面的具体代码,供大家参考,具体内容如下主class 用来控制viewdialog的显示 package com.android.server.polic ...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
HTML5期末大作业：网站——仿游戏官网(龙之谷)HTML+CSS+JavaScript
HTML5期末大作业:网站--仿游戏官网(龙之谷)HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网 ...
HTML期末大作业—— 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计
HTML期末大作业-- 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感 ...
HTML期末大作业—— 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计...
HTML期末大作业-- 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感 ...
iphonex重量_精仿苹果iPhone X手机配置介绍
精仿苹果iPhone X手机配置介绍 [上市时间] 2017年10月最新版 [屏幕色彩] 1600万 [分辨率] 1920X1080 [屏幕尺寸] 5.8英寸IPS全视角电容式触摸屏 [处理器 ...
来自法国的山寨苹果系统——梨子系统PearOS，精美仿苹果风格的免费Linux操作系统(颇有iOS和OSX的神...
我们都知道苹果 OS X 和 iOS 操作系统的设计都非常讨好人,但基本上只能购买 MacBook 或 iPhone.iPad 等设备才能体验它们.不过,今天被我发现了一款可以在PC上安装的精美仿苹果 ...
仿苹果的导航,有点凹陷的感觉
仿苹果的导航也许很多人会用到吧. 网址:http://www.kriesi.at/wp-content/ ... l/kwicks_final.html 点击下载! 转载于:https://www. ...

前端作业7.18（仿苹果页面）

前端作业7.18（仿苹果页面）相关推荐

最新文章

热门文章