WEB前端开发实践仿Apple官网首页 HTML+CSS+JS

一、前言

静态页面，没有后端数据，只是单一的HTML
自写的APPLE、小米源码，严禁盗用

二、图片资源

这里用了一些iconfont-阿里巴巴矢量图标库，使用了如下几个矢量图。使用教程参考我的另一篇iconfont-阿里巴巴矢量图标库使用。(矢量图使用CSS样式导入图标，比直接导入img效果更好)

1.即使好礼苹果.jpg

2.iPone 13 Pro.jpg

3.iPhone 13.jpg

4.好礼1.jpg

5.好礼2.jpg

6.好礼3.jpg

7.Last1.jpg

8.Last2.jpg

9.Last3.jpg

10.Last4.jpg

11.Last5.jpg

12.Last6.jpg

三、主要代码

3.1Apple.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Apple(中国大陆)-官方网站</title><link type="text/css" rel="stylesheet" href="css/APPLE.css" /><link rel="stylesheet" href="css/iconfont.css"><script src="./js/鼠标.js"></script></head><body><!--整个页面大小--><div class="main"><!-- 顶部框--><div class="head"><div class="head-text"><span><广告></span></div></div><!--撑高度--><div class="hide"></div><!--导航栏框--><div class="header"><ul><li><a href="#"><i class="iconfont"></i></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="#">AirPorts</a></li><li><a href="#">家居</a></li><li><a href="#">Apple独家</a></li><li><a href="#">配件</a></li><li><a href="#">技术支持</a></li><li><a href="#"><i class="iconfont"></i></a></li><li><a href="#"><i class="iconfont"></i></a></li></ul></div><!-- 主体内容栏--><div class="content"><!-- 在线选购部分 --><div class="content-x"><p id="x"><a href="#">在线选购</a>,享受免费送货、Specialist 专家支持、免息分期等服务</p></div><!--好礼部分--><div class="content-head"><p><img style="margin-top: 20px;" src="img/即使好礼苹果.jpg"> </p><p id="one">及时好礼，人见人爱</p><p id="three"><a href="#">选购好礼 ></a> </span></p><p><img style="margin-right: 300px;" class="box1" style="margin-left: -10px;" src="img/好礼1.jpg"><img style="margin-right: 200px;" class="box1" style="margin-left: 10px;" src="img/好礼2.jpg"><img class="box1" style="margin-left: 15px;" src="img/好礼3.jpg"></p></div><!--iphone 13Pro--><div class="content-13Pro"><p><img style="margin-left:-150px ;" src="./img/iPhone%2013%20Pro.jpg"> </p><p style="margin-top: -700px;" id="one">iPhone 13 Pro </p><p id="two" style="margin-top: -10px;" id="one">强的很 </p><p style="margin-left: -20px;"><a href="#">进一步了解 ></a> <a href="#">购买 ></a></p></div><!-- iphone 13--><div class="content-13"><p><img style="margin-top: 100px;" src="img/iPhone13.jpg"> </p><p style="margin-top: -700px;" id="one1">iPhone 13 Pro </p><p id="three1">解锁超能力</p><p id="three1"><a href="#">进一步了解 ></a> <a href="#">购买 ></a></p><p id="seven"><img src="img/05.jpg"></p></div><!-- ipad air--><div class="content-Last"><div class="content-Lastn"><img src="img/Last1.jpg" /><img src="img/Last2.jpg" /><img src="img/Last3.jpg" /><img src="img/Last4.jpg" /><img src="img/Last5.jpg" /><img src="img/Last6.jpg" /><img src="img/Last6.jpg" /></div></div></div><!--底部信息--><div class="footer"><div class="foot-top"><p> *所示的 iPhone 13 128GB 机型价格是使用 iPhone 12 128GB 机型进行折抵换购的价格。上述所示机型的分期付款金额是在使用 iPhone 12 128GB机型进行折抵后，再以招商银行、中国工商银行或花呗 24 期免息分期付款方式估算得出的整数金额 (未显示小数点以后的金额)，实际支付金额以银行或花呗账单为准。本优惠活动暂定截止日期为 2021 年 12 月 30 日，可能视情况延长。折抵金额仅可在限定时间内使用，并且要求用于购买新 iPhone，以限制条款为准。实际折抵金额取决于设备的状况、配置、制造年份，以及发售国家或地区。银行或花呗可能要求你的可用信用额度大于所购买产品的总金额，才能使用分期付款服务。有关信用卡或花呗分期服务的申请及使用问题，请与银行或花呗联系，Apple 对此不做任何承诺和保证。Apple 的折抵换购活动为 Apple 与 Apple 折抵服务合作伙伴共同推出，年满 18 周岁及以上者才能享受此项折抵换购服务。店内折抵换购需出示政府颁发并附有照片的有效身份证件 (当地法律可能会要求存储该信息)。可能需要遵守 Apple 或 Apple 折抵服务合作伙伴的其他条款。本优惠不能与 Apple 的其他优惠或折扣活动同时使用。如需了解更多免息分期付款信息，请点击此处。</p><br /><p>** 仅限新订阅用户。当试用期结束后，会员方案将按月自动续订。</p><hr /><!--hr 划横线--></div><div class="foot-list"><div class="list-first"><ul><li class="foot-title">选购及了解</li><li>Mac</li><li>iPad</li><li>iPhone</li><li>Watch</li><li>Music</li><li>iTunes</li><li>HomePod</li><li>iPod touch</li><li>配件</li><li>App Store 充值卡</li></ul></div><div class="list-first"><ul><li class="foot-title">Apple Store 商店</li><li>查找零售店</li><li>Senius Bar 天才吧</li><li>Today at Apple</li><li>Apple 夏令营</li><li>Field Trip 课外活动</li><li>Apple Store APP</li><li>翻新和优惠</li><li>分期付款</li><li>Apple GiveBack 回馈计划</li><li>订单状态</li><li>选购帮助</li></ul></div><div cLass="list-first"><ul><li class="foot-title">教育应用</li><li>Apple 与教育</li><li>高校师生选购</li><li><br /></li><li>商务应用</li><li>Apple 与商务</li><li>商务选购</li></ul></div><div class="list-first"><ul><li class="foot-title">账户</li><li>管理你的Apple ID</li><li>Apple Store 账户</li><li>iCloud.com</li><li><br /></li><li>Apple 价值观</li><li>辅助功能</li><li>环境责任</li><li>隐私</li><li>供应商责任</li></ul></div><div class="list-first"><ul><li class="foot-title">关于 Apple</li><li>Newsroom</li><li>Apple 管理层</li><li>工作机会</li><li>创造就业</li><li>活动</li><li>联系Apple</li></ul></div></div><div class="foot_top">更多选购方式：前往 <span>Apple Store 零售店</span>，致电 400-666-8800 或查找在你附近的<span>授权经销商</span>。</div><hr /><div class="bottom">Copyright © 2019 Apple Inc. 保留所有权利。<a href="#">隐私政策</a><a href="#">| 使用条款</a><a href="#">| 销售政策</a><a href="#">| 法律信息</a><a href="#">| 网站地图</a><br>京公安网安备11010502008968 京ICP备10214630 营业执照 无线电发射设备销售备案编号11201910351200</div></div><br /></div></body>
</html>

3.2Apple.css

/*清除默认样式*/
* {margin: 0;padding: 0;
}/*设置整个页面大小*/
.main {width: 100%;height: 4000px;background-color: #F2F2F2;
}/*设置顶部广告div*/
.head {width: 100%;height: 40px;background-color: rgb(68, 68, 68);position: fixed;top: 0px;left: 0px;
}/*撑高度*/
.hide {width: 100%;height: 40px;
}/* 设置头部文字内容，广告*/
.head-text span {position: relative;/*生成相对定位*/top: 8px;left: 83%;color: #A8A8AA;font-size: 12px;
}/*设置导航栏*/
.header {width: 100%;height: 44px;background-color: rgba(48, 48, 51, 0.9);position: fixed;/*将导航栏固定*/
}/*隐藏无序列表的"·"*/
.header ul {margin-left: 180px;list-style-type: none;
}/*设置li*/
.header ul li {width: 56px;height: 44px;margin-left: 30px;line-height: 44px;float: left;font-family: "SF Pro SC", "HanHei SC", "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;font-size: 10px;
}.header ul a {/*去除项目下划线*/list-style: none;color: rgb(214, 214, 214);/*去除下划线*/text-decoration: none;
}/*内容部分*/
.content {margin-top: 100px;
}/*在线选购广告*/
.content-x {width: 100%;height: 35px;background-color: rgba(245, 245, 247, 0.9);margin-top: -60px;font-family: "宋体";
}
/*设置a标签样式无下划线*/
.content-x p a {color: rgb(107, 165, 223);text-decoration: none;
}
/*设置P标签内文字大小*/
#x {font-size: 1px;line-height: 2;margin: 0px 0px 6.4px;font-weight: bold;text-align: center;color: rgba(29, 29, 31, 0.5);
}.content-head {width: 100%;height: 750px;background-color: #eaf2fc;margin-top: 0.1875rem;font-family: "SF Pro SC", "HanHei SC", "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}.content-head p {color: #111;text-align: center;
}#one {font-size: 40px;line-height: 2;margin: 20px 0px 6.4px;font-weight: bold;text-align: center;
}#two {font-size: 20px;line-height: 1.38;text-align: center;
}#three {color: #0070c9;font-size: 21px;margin: 11.05px 0px 0px;
}#three a {text-decoration: none;margin: 0px 0px 0px 20px;
}#three a:hover {text-decoration: underline;color: #0070c9;
}#three a:visited {color: #0070C9;}#three a:link {color: #0070C9;
}
/*图片旋转效果*/
.box1 {width: 300px;height: 300px;margin: 100px auto;transition: 1s;
}.box1:hover {transform: rotateX(45deg) scale(2);/* transform: scale(2); */
}.content-13Pro {width: 100%;height: 680px;margin: 30px auto;font-family: "SF Pro SC", "HanHei SC", "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}.content-13Pro p {color: #111;text-align: center;
}.content-13Pro a {font-size: 21px;text-decoration: none;margin: 0px 0px 0px 20px;
}.content-13Pro a:hover {text-decoration: underline;color: #0070c9;
}.content-13Pro a:visited {color: #0070C9;
}.content-13 {width: 100%;height: 650px;margin: 20px auto;font-family: "SF Pro SC", "HanHei SC", "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}/*去掉下划线*/
.content-13 a {font-size: 21px;text-decoration: none;margin: 0px 0px 0px 20px;
}.content-13 a:hover {text-decoration: underline;color: #0070c9;
}.content-13 a:visited {color: #0070C9;
}#one1 {font-size: 40px;line-height: 2;margin: 20px 0px 6.4px;font-weight: bold;text-align: center;color: white;
}#three1 {color: white;font-size: 21px;margin: 11.05px 0px 0px;text-align: center;
}#three1 a:link {color: #0070c9;
}#seven {margin: 20px auto;
}.content-Last {width: 924px;height: 646px;margin: 200px auto;overflow: hidden;
}.content-Lastn {width: 6468px;height: 646px;margin-top: 50px;animation: run 6s infinite steps(6);
}.content-Lastn img {float: left;
}@keyframes run {from {margin-left: 0;}to {margin-left: -5544px;}
}
/*末尾部分*/
.footer {margin: 0px auto;width: 980px;
}.foot-top {color: #888888;font-size: 12px;font-family: "SF Pro SC", "HanHei SC", "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;padding: 0px 0px 9.6px;
}.foot-list {padding: 20px 0px 0px;font-size: 12px;color: #555555;width: 100%;height: 300px;font-family: "SF Pro SC", "HanHei SC", "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}.list-first {width: 20%;height: 100%;float: left;
}.list-first ul li {list-style: none;margin: 0px 0px 9.6px;}.foot-title {margin: 0px 0px 9.6px;color: #333333;font-weight: bold;
}.list-first ul li:hover {/*cursor 移入 手形-*/cursor: pointer;text-decoration: underline;
}.foot_top {width: 980px;height: 25px;font-size: 12px;font-family: "SF Pro SC", "HanHei SC", "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;color: #888888;margin: 34px 0px 5px;
}.foot_top span {color: #0070C9;
}.bottom {width: 980px;height: 25px;font-size: 12px;font-family: "SF Pro SC", "HanHei SC", "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;color: #888888;padding: 5px 0px 5px;
}
.bottom a {font-size: 1px;text-decoration: none;margin: 0px 0px 0px 20px;color: rgba(29, 29, 31, 0.5);
}

3.3iconfont.css,这部分是前言里介绍的阿里矢量图标下载的代码.需要自己下载,复制代码没有运行效果

@font-face {font-family: "iconfont"; /* Project id 3063102 */src: url('iconfont.woff2?t=1640446088733') format('woff2'),url('iconfont.woff?t=1640446088733') format('woff'),url('iconfont.ttf?t=1640446088733') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
/*APPLE logo*/
.icon-changyonglogo35:before {content: "\e71c";
}
/*搜索*/
.icon-sousuo:before {content: "\e606";
}.icon-sousuo1:before {content: "\e645";
}
/*购物袋*/
.icon-gouwudai:before {content: "\e609";
}

3.4鼠标.js

(function(window, document, undefined) {var hearts = [];window.requestAnimationFrame = (function() {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function(callback) {setTimeout(callback, 1000 / 60);}})();init();function init() {css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");attachEvent();gameloop();}function gameloop() {for (var i = 0; i < hearts.length; i++) {if (hearts[i].alpha <= 0) {document.body.removeChild(hearts[i].el);hearts.splice(i, 1);continue;}hearts[i].y--;hearts[i].scale += 0.004;hearts[i].alpha -= 0.013;hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" +hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale +") rotate(45deg);background:" + hearts[i].color;}requestAnimationFrame(gameloop);}function attachEvent() {var old = typeof window.onclick === "function" && window.onclick;window.onclick = function(event) {old && old();createHeart(event);}}function createHeart(event) {var d = document.createElement("div");d.className = "heart";hearts.push({el: d,x: event.clientX - 5,y: event.clientY - 5,scale: 1,alpha: 1,color: randomColor()});document.body.appendChild(d);}function css(css) {var style = document.createElement("style");style.type = "text/css";try {style.appendChild(document.createTextNode(css));} catch (ex) {style.styleSheet.cssText = css;}document.getElementsByTagName('head')[0].appendChild(style);}function randomColor() {return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() *255)) + ")";}
})(window, document);

四、网页效果

图片限制5M录，所以录得有些快，可以自己下载代码看

五、说明

使用HTML开发技术，仿写苹果官网网页，利用课堂知识对网页增加了轮播与动画，并非完全还原

仿Apple官网首页 HTML+CSS+JS相关推荐

仿Apple官网导航条
仿Apple官网导航条效果在线预览使用flex布局和媒体查询实现了响应式的Apple的中文官网导航条,仿做的动画,字体不一致不会CSS动画,未有学习 flex掌握感觉还可以媒体查询也懂得了一小部 ...
仿Apple官网CSS样式实现
前言 GitHub地址我的个人博客这份代码是2015年,本科时期初次学习学校开设CSS课程的作业成果.也算是我初次接触前端的三大骨架,现在回想起来当初一步步地去仿照苹果官网去分析去实现,给我带来了 ...
CSS弹出二级多列菜单和DIV布局实例 - 仿IBM官网首页
图顶层CSS菜单,弹出二级菜单,二级菜单多列: 主体部分三个DIV布局: 这个是IBM官网布局的样子: 代码,拿去花吧:我的奶酪很多: 有不清楚的地方可以问我,qq 513979805 <!D ...
2022仿淘宝网首页html+css
效果图如下: 所有文件已经打包好了,上链接: 蓝奏云: 仿淘宝网站首页.zip - 蓝奏云百度网盘: https://pan.baidu.com/s/1DsloErpJFQ_stwLQYb8dYw? ...
电商项目：仿小米官网纯HTML+css布局
前言时间过得很快,已经步入大三下学期了,浪了大学这几年,这几个星期从新把之前学的html+css系统性复习了一遍,虽然之前也学习过,但Monto觉得无论任何事情,基础是最重要的,任何框架千变万变,但 ...
仿小米商城官网首页模板(HTML+CSS)
一.效果展示二.目录结构三.代码实现
安踏官网首页html css,发布商品.html · peirenlei/layuiadmin-templete - Gitee.com
众创数字资产综合运营管理平台 *商品名称 *所属分类请选择分类名牌包包名牌手表锦龙春酒业伍基酵素韵客翡翠品牌豪车添加分类 *所属品牌请选择品牌浪陀安踏耐克添加品牌 *显示市场 ...
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网页作业无从下手?网页要求的总数量太多?没 ...

仿Apple官网首页 HTML+CSS+JS

WEB前端开发实践仿Apple官网首页 HTML+CSS+JS

一、前言

二、图片资源

三、主要代码

四、网页效果

五、说明

仿Apple官网首页 HTML+CSS+JS相关推荐

最新文章

热门文章

仿Apple官网首页 HTML+CSS+JS

WEB前端开发实践 仿Apple官网首页 HTML+CSS+JS

一、前言

二、图片资源

三、主要代码

四、网页效果

五、说明

仿Apple官网首页 HTML+CSS+JS相关推荐

最新文章

热门文章

WEB前端开发实践仿Apple官网首页 HTML+CSS+JS