仿Apple官网首页 HTML+CSS+JS

张时贰

已于 2022-04-09 12:04:50 修改

阅读量1w

点赞数 11

分类专栏： JAVA WEB开发技术文章标签： javascript 前端 html5 web

于 2022-04-09 12:01:57 首次发布

本文链接：https://blog.youkuaiyun.com/qq_49488584/article/details/124058177

版权

该博客介绍了如何使用HTML、CSS和JavaScript实现Apple官网首页的静态页面仿写，包括图片资源的选择，代码实现的详细步骤，以及最终的网页效果展示。作者强调了页面中矢量图标的使用，以及对页面动态效果的添加。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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">&#xe71c;</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">&#xe606;</i></a></li>
                        <li><a href="#"><i class="iconfont">&#xe609;</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