WEB前端开发实践 仿Apple官网首页 HTML+CSS+JS
一、前言
- 静态页面,没有后端数据,只是单一的HTML
- 自写的APPLE、小米源码,严禁盗用
二、图片资源
这里用了一些iconfont-阿里巴巴矢量图标库,使用了如下几个矢量图。使用教程参考我的另一篇iconfont-阿里巴巴矢量图标库使用。(矢量图使用CSS样式导入图标,比直接导入img效果更好)
1.即使好礼苹果.jpg
2.iPone 13 Pro.jpg
![iPhone 13 Pro](https://cdn.jsdelivr.net/gh/GC-ZF/Typora-Img/HTML开发实践/web%E5%BC%80%E5%8F%9103.jpg)
3.iPhone 13.jpg
![iPhone13](https://cdn.jsdelivr.net/gh/GC-ZF/Typora-Img/HTML开发实践/web%E5%BC%80%E5%8F%9104.jpg)
4.好礼1.jpg
![好礼1](https://cdn.jsdelivr.net/gh/GC-ZF/Typora-Img/HTML开发实践/web%E5%BC%80%E5%8F%9105.jpg)
5.好礼2.jpg
![好礼2](https://cdn.jsdelivr.net/gh/GC-ZF/Typora-Img/HTML开发实践/web%E5%BC%80%E5%8F%9106.jpg)
6.好礼3.jpg
![好礼3](https://cdn.jsdelivr.net/gh/GC-ZF/Typora-Img/HTML开发实践/web%E5%BC%80%E5%8F%9107.jpg)
7.Last1.jpg
![Last6](https://cdn.jsdelivr.net/gh/GC-ZF/Typora-Img/HTML开发实践/web%E5%BC%80%E5%8F%9108.jpg)
8.Last2.jpg
![Last1](https://cdn.jsdelivr.net/gh/GC-ZF/Typora-Img/HTML开发实践/web%E5%BC%80%E5%8F%9109.jpg)
9.Last3.jpg
![Last2](https://cdn.jsdelivr.net/gh/GC-ZF/Typora-Img/HTML开发实践/web%E5%BC%80%E5%8F%9110.jpg)
10.Last4.jpg
![Last3](https://cdn.jsdelivr.net/gh/GC-ZF/Typora-Img/HTML开发实践/web%E5%BC%80%E5%8F%9111.jpg)
11.Last5.jpg
![Last4](https://cdn.jsdelivr.net/gh/GC-ZF/Typora-Img/HTML开发实践/web%E5%BC%80%E5%8F%9112.jpg)
12.Last6.jpg
![Last5](https://cdn.jsdelivr.net/gh/GC-ZF/Typora-Img/HTML开发实践/web%E5%BC%80%E5%8F%9113.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