admin管理员组文章数量:1633267
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
版权声明:本文标题:仿Apple官网首页 HTML+CSS+JS 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729167770a1188382.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论