admin管理员组

文章数量:1633365

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

本文标签： 首页官网Applejscss

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