WEB前端开发实践 仿Apple官网首页 HTML+CSS+JS
文章目录
一、前言
-
凌晨兴起写的，修改了好多，有一丢丢乱，但是界面效果在。
-
静态页面，没有后端数据，只是单一的HTML。
二、图片资源
这里用了一些iconfont-阿里巴巴矢量图标库，使用了如下几个矢量图。使用教程参考我的另一篇iconfont-阿里巴巴矢量图标库使用教程_鬼才小张同学的博客-CSDN博客。(矢量图使用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);
四、网页效果
这里添加了一个鼠标焦点在图片时的旋转效果
轮播图
末尾表单
鼠标点击效果
五、说明
使用HTML开发技术，仿写苹果官网网页，利用课堂知识对网页增加了轮播与动画，并非完全还原。