WEB前端开发实践 仿Apple官网首页 HTML+CSS+JS

一、前言

  • 凌晨兴起写的，修改了好多，有一丢丢乱，但是界面效果在
  • 静态页面，没有后端数据，只是单一的HTML
  • 自写的APPLE、小米源码，严禁盗用

二、图片资源

这里用了一些iconfont-阿里巴巴矢量图标库，使用了如下几个矢量图。使用教程参考我的另一篇iconfont-阿里巴巴矢量图标库使用教程_鬼才小张同学的博客-CSDN博客。(矢量图使用CSS样式导入图标，比直接导入img效果更好)

image-20211226193337669

1.即使好礼苹果.jpg

即使好礼苹果

2.iPone 13 Pro.jpg

iPhone 13 Pro

3.iPhone 13.jpg

iPhone13

4.好礼1.jpg

好礼1

5.好礼2.jpg

好礼2

6.好礼3.jpg

好礼3

7.Last1.jpg

Last6

8.Last2.jpg

Last1

9.Last3.jpg

Last2

10.Last4.jpg

Last3

11.Last5.jpg

Last4

12.Last6.jpg

Last5

三、主要代码

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>

                <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);

四、网页效果

这里添加了一个鼠标焦点在图片时的旋转效果

image-20211226223214575 image-20211226223221360 image-20211226223232698

轮播图

image-20211226223239794

末尾表单

image-20211226223247224

鼠标点击效果

五、说明

使用HTML开发技术，仿写苹果官网网页，利用课堂知识对网页增加了轮播与动画，并非完全还原