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

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

文章目录

一、前言

  • 凌晨兴起写的,修改了好多,有一丢丢乱,但是界面效果在。

  • 静态页面,没有后端数据,只是单一的HTML。

二、图片资源

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

WEB前端开发实践 仿Apple官网首页 HTML+CSS+JS
1.即使好礼苹果.jpg

WEB前端开发实践 仿Apple官网首页 HTML+CSS+JS
2.iPone 13 Pro.jpg

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

3.iPhone 13.jpg

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

4.好礼1.jpg

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

5.好礼2.jpg

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

6.好礼3.jpg

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

7.Last1.jpg

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

8.Last2.jpg

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

9.Last3.jpg

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

10.Last4.jpg

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

11.Last5.jpg

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

12.Last6.jpg

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

三、主要代码

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

四、网页效果

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

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

轮播图

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

末尾表单

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

鼠标点击效果

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

五、说明

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

上一篇:关于element DatePicker 日期选择器编辑时回显错误的问题


下一篇:【Kill Thread Part.1-6】一网打尽线程属性