huawei
/
huawei.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HUAWEI - demo</title>
    <link rel="shortcut icon" href="https://www.vmall.com/favicon.ico" type="image/x-icon">
    <script type="text/javascript" src="huawei.js"></script>
    <link rel="stylesheet" href="css/huawei.css"/>
</head>
<body>

    <div class="shortcuts">
        <a href="#">
            <span></span>
            <span>购物车</span>
        </a>
        <a href="#">
            <span></span>
            <span>意见反馈</span>
        </a>
        <a href="#">
            <span></span>
            <span>寻找客服</span>
        </a>
        <a class='back-top' href="#">
                <span></span>
                <span>回到顶部</span>
        </a>

    </div>


    <div class='banner-top disappear'>
        <a href="#">
            <img src="img/banner-top.jpg"/>
        </a>
        <a class='close' href="#" title='关闭'></a>
    </div>


    <nav class='nav-top'>
        <div class='box1 banxin'>
                <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">华为官网</a></li>
                        <li><a href="#">荣耀官网</a></li>
                        <li><a href="#">花粉俱乐部</a></li>
                        <li><a href="#">V码（优购码）</a></li>
                        <li><a href="#">企业购</a></li>
                        <li><a href="#">Select Region</a></li>
                        <li class='nav-more nav-arrow lin'><a href="#">更多精彩 </a>
                            <ul>
                                <li><a href="#">EMUI</a></li>
                                <li><a href="#">应用市场</a></li>
                                <li><a href="#">华为终端云空间</a></li>
                                <li><a href="#">开发者联盟</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul>
                            <li><a href="#">请登陆</a></li>
                            <li><a href="#">注册</a></li>
                            <li><a href="#">我的订单</a></li>
                            <li class='nav-more nav-arrow ser'><a href="#">客户服务 </a>
                                <ul>
                                    <li><a href="#">客服中心</a></li>
                                    <li><a href="#">联系客服</a></li>
                                </ul>
                            </li>
                            <li class='nav-website nav-arrow'><a href="#">网站导航 </a>
                                <div class="nav-map">
                                    <div class="map-home">
                                        <a href="#">
                                            <span></span>
                                            <span>商城首页</span>
                                        </a>
                                    </div>
                                    <div class="map-goods">
                                        <h4>频道</h4>
                                        <div class="map-goods-list">
                                            <span>华为专区</span>
                                            <span>荣耀专区</span>
                                            <span>企业购</span>
                                        </div>
                                    </div>
                                    <div class="map-goods">
                                        <h4>增值服务</h4>
                                        <div class="map-goods-list">
                                            <span>以旧换新</span>
                                            <span>礼品包装</span>
                                            <span>补购保障</span>
                                            <span>一口价换电池</span>
                                        </div>
                                    </div><div class="map-goods">
                                        <h4>产品</h4>
                                        <div class="map-goods-list">
                                            <span>手机</span>
                                            <span>智能家居</span>
                                            <span>平板&笔记本</span>
                                            <span>通用配件</span>
                                            <span>智能穿戴</span>
                                            <span>专属配件</span>
                                        </div>
                                    </div><div class="map-goods">
                                        <h4>会员</h4>
                                        <div class="map-goods-list">
                                            <span>会员频道</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class='nav-mobile nav-arrow'><a href="#">手机版 </a>
                                <div class='mobile-box'>
                                    <div class='mobile-qr'>
                                        <a href="#"><img src="img/huawei-qr.png"></a>
                                        <div class='qr-info'>
                                            <h4>华为商城APP</h4>
                                            <span class='qr-gift'>新人专享好礼</span>
                                            <span class='qr-gift'>最高5000积分</span>
                                            <div class='qr-trade'>
                                                <div>
                                                    <span class='trade'></span>
                                                    <span class='instr'>Android</span>
                                                </div>
                                                <div>
                                                    <span class='trade'></span>
                                                    <span class='instr'>Wechat</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class='mobile-qr'>
                                        <a href="#"><img src="img/huawei-qr2.jpg"></a>
                                        <div class='qr-info'>
                                            <h4>华为商城公众号</h4>
                                            <span class='qr-gift'>微信扫一扫</span>
                                            <div class='qr-trade'>
                                                <div>
                                                    <span class='trade'></span>
                                                    <span class='instr'>Wechat</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class='mobile-qr'>
                                        <a href="#"><img src="img/huawei-qr3.jpg"></a>
                                        <div class='qr-info'>
                                            <h4>微信小程序</h4>
                                            <div class='qr-trade'>
                                                <div>
                                                    <span class='trade'></span>
                                                    <span class='instr'>Wechat</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class='nav-shopping'><a href="#"> 购物车（0）</a>
                                <div class="shopping-box">
                                    <span></span>
                                    <span>您的购物车是空的，赶紧选购吧~</span>
                                </div>
                            </li>
                    </ul>
        </div>
    </nav>


    <header class="nav-head banxin">

        <a href="#"><img src="img/logo.png"></a>

        <div class='nav-menu'>
            <a href="#">华为专区</a>
            <a href="#">荣耀专区</a>
            <a href="#">华为5G</a>
            <a href="#">荣耀20</a>
            <a href="#">华为P30</a>
            <a href="#">荣耀9X</a>
        </div>

        <div class='search-box'>
            <div class='s-right'>
                <span class='s-right-a'>5G</span>
                <span class='s-right-a'>荣耀9X</span>
                <button class='s-right-a'></button>
            </div>
            <div class='input-box'>
                <input type="text" name="s-box"/>
            </div>
            <ul class='info-box'>
                <li>热门搜索</li>
                <li><a href="#">nova 5i Pro</a></li>
                <li><a href="#">荣耀20i</a></li>
                <li><a href="#">nova 5 Pro</a></li>
                <li><a href="#">nova 5</a></li>
                <li><a href="#">HUAWEI P30</a></li>
                <li><a href="#">荣耀20</a></li>
                <li><a href="#">Mate 20 X 5G</a></li>
            </ul>
        </div>

    </header>


    <div class="nav-content">
        <div class="content-pic">
                <a href="#">
                        <img src="img/slideshow-2.jpg"/>
                </a>
        </div>

        <div class="content-float">

                <span class='arrow-left'></span>
                <span class='arrow-right'></span>
                <div class='nav-point'>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>

                <div class="content-left">
                    <div class="content-nav-box">
                        <section>
                            <div>
                                <a href="#">手机</a>
                                <br/>
                                <a href="#">荣耀</a>
                                <a href="#">HUAWEI P系列</a>
                            </div>
                        </section>
                        <section>
                            <div>
                                <a href="#">
                                    <img src="img/goods-short.png"/>
                                    荣耀
                                </a>
                                <a href="#">
                                    <img src="img/goods-short.png"/>
                                    荣耀
                                </a>
                                <a href="#">
                                    <img src="img/goods-short.png"/>
                                    荣耀
                                </a>
                                <a href="#">
                                    <img src="img/goods-short.png"/>
                                    荣耀
                                </a>
                                <a href="#">
                                    <img src="img/goods-short.png"/>
                                    荣耀
                                </a>
                                <a href="#">
                                    <img src="img/goods-short.png"/>
                                    荣耀
                                </a>
                                <div>
                                    <a href="#">
                                        <span></span>
                                        <span>查看全部</span>
                                    </a>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="content-nav-box">
                        <section>
                            <div>
                                <a href="#">手机</a>
                                <br/>
                                <a href="#">荣耀</a>
                                <a href="#">HUAWEI P系列</a>
                            </div>
                        </section>
                        <section>
                            <div>
                                <a href="#">
                                    <img src="img/goods-short.png"/>
                                    荣耀
                                </a>
                                <div>
                                    <a href="#">
                                        <span></span>
                                        <span>查看全部</span>
                                    </a>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="content-nav-box">
                        <section>
                            <div>
                                <a href="#">手机</a>
                                <br/>
                                <a href="#">荣耀</a>
                                <a href="#">HUAWEI P系列</a>
                            </div>
                        </section>
                        <section>
                            <div>
                                <a href="#">
                                    <img src="img/goods-short.png"/>
                                    荣耀
                                </a>
                                <div>
                                    <a href="#">
                                        <span></span>
                                        <span>查看全部</span>
                                    </a>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="content-nav-box">
                        <section>
                            <div>
                                <a href="#">手机</a>
                                <br/>
                                <a href="#">荣耀</a>
                                <a href="#">HUAWEI P系列</a>
                            </div>
                        </section>
                        <section>
                            <div>
                                <a href="#">
                                    <img src="img/goods-short.png"/>
                                    荣耀
                                </a>
                                <div>
                                    <a href="#">
                                        <span></span>
                                        <span>查看全部</span>
                                    </a>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="content-nav-box">
                        <section>
                            <div>
                                <a href="#">手机</a>
                                <br/>
                                <a href="#">荣耀</a>
                                <a href="#">HUAWEI P系列</a>
                            </div>
                        </section>
                        <section>
                            <div>
                                <a href="#">
                                    <img src="img/goods-short.png"/>
                                    荣耀
                                </a>
                                <div>
                                    <a href="#">
                                        <span></span>
                                        <span>查看全部</span>
                                    </a>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="content-nav-box">
                        <section>
                            <div>
                                <a href="#">手机</a>
                                <br/>
                                <a href="#">荣耀</a>
                                <a href="#">HUAWEI P系列</a>
                            </div>
                        </section>
                        <section>
                            <div>
                                <a href="#">
                                    <img src="img/goods-short.png"/>
                                    荣耀
                                </a>
                                <div>
                                    <a href="#">
                                        <span></span>
                                        <span>查看全部</span>
                                    </a>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>

                <div class="content-bottom">
                    <div class="login-left">
                        <div>
                            <img src="img/head.png"/>
                        </div>
                        <div>
                            <span>您好！请
                                <a href="#">登陆</a>
                                 /
                                <a href="#">注册</a>
                            </span>
                            <span>新人福利</span>
                            <span>会员频道</span>
                        </div>
                    </div>
                    <div class="login-center">
                        <a href="#">
                            <span></span>
                            <span>企业购特惠</span>
                        </a>
                        <a href="#">
                            <span></span>
                            <span>会员领券</span>
                        </a>
                        <a href="#">
                            <span></span>
                            <span>以旧换新</span>
                        </a>
                        <a href="#">
                            <span></span>
                            <span>nova5新品</span>
                        </a>
                        <a href="#">
                            <span></span>
                            <span>荣耀数码</span>
                        </a>
                        <a href="#">
                            <span></span>
                            <span>华为数码</span>
                        </a>
                    </div>
                    <div class="login-right">
                        <div class="notice-top">
                            <span>公告</span>
                            <a href="#">华为商城会员线下权益需求调研中奖结果</a>
                        </div>
                        <div class="notice-bottom">
                            <a href="#">
                                <span></span>
                                <span>优购码</span>
                            </a>
                            <a href="#">
                                <span></span>
                                <span>优购码</span>
                            </a>
                            <a href="#">
                                <span></span>
                                <span>优购码</span>
                            </a>
                        </div>
                    </div>
                </div>
        </div>

    </div>


    <div class="four-stars banxin">
        <a class='shadow' href="#"><img src="img/banner-box.jpg"/></a>
        <a class='shadow' href="#"><img src="img/banner-box.jpg"/></a>
        <a class='shadow' href="#"><img src="img/banner-box.jpg"/></a>
        <a class='shadow' href="#"><img src="img/banner-box.jpg"/></a>
    </div>


    <div class="hot-item banxin">
        <nav class="product-title">
            <h2>热销单品</h2>
            <a href="#">
                查看更多
                <span></span>
            </a>
        </nav>
        <div class="hot-main">
            <div class="hot-main-left">
                <a class='shadow new-prod' href="#"><img src="img/goods-long.jpg"/></a>
            </div>
            <div class="hot-main-right">
                <a href="#" class="shadow"><img src="img/goods-middle.png"/></a>
                <a href="#" class="shadow new-prod"><img src="img/goods-middle.png"/></a>
                <a href="#" class="shadow"><img src="img/goods-middle.png"/></a>
                <a href="#" class="shadow"><img src="img/goods-middle.png"/></a>
                <a href="#" class="shadow new-prod"><img src="img/goods-middle.png"/></a>
                <a href="#" class="shadow"><img src="img/goods-middle.png"/></a>
                <a href="#" class="shadow"><img src="img/goods-middle.png"/></a>
                <a href="#" class="shadow new-prod"><img src="img/goods-middle.png"/></a>
            </div>
        </div>
    </div>


    <div class="recommendation banxin">
        <nav class="product-title">
            <h2>精品推荐</h2>
            <a href="#">
                查看更多
                <span></span>
            </a>
        </nav>
        <div class="recommended-main">
            <a href="#">
                <span>
                    <span>
                        <img src="img/quality-goods.png"/>
                    </span>
                    高清全面屏 14小时续航
                </span>
                <span>荣耀MagicBook Pro</span>
                <span>RMB 5499</span>
            </a>
            <a href="#">
                <span>
                    <span>
                        <img src="img/quality-goods.png"/>
                    </span>
                    高清全面屏 14小时续航
                </span>
                <span>荣耀MagicBook Pro</span>
                <span>RMB 5499</span>
            </a>
            <a href="#">
                <span>
                    <span>
                        <img src="img/quality-goods.png"/>
                    </span>
                    高清全面屏 14小时续航
                </span>
                <span>荣耀MagicBook Pro</span>
                <span>RMB 5499</span>
            </a>
            <a href="#">
                <span>
                    <span>
                        <img src="img/quality-goods.png"/>
                    </span>
                    高清全面屏 14小时续航
                </span>
                <span>荣耀MagicBook Pro</span>
                <span>RMB 5499</span>
            </a>
            <a href="#">
                <span>
                    <span>
                        <img src="img/quality-goods.png"/>
                    </span>
                    高清全面屏 14小时续航
                </span>
                <span>荣耀MagicBook Pro</span>
                <span>RMB 5499</span>
            </a>
        </div>

    </div>


    <div class="banner-middle banxin">
        <a href="#">
            <img src="img/banner-middle.jpg"/>
        </a>
        <div class="banner-point">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>


    <div class="phone banxin">
        <nav class="product-title">
            <h2>手机</h2>
            <div class="phone-nav">
                <a href="#">荣耀</a>
                <a href="#">HUAWEI P系列</a>
                <a href="#">HUAWEI Mate系列</a>
                <a href="#">HUAWEI Mate系列</a>
                <a href="#">HUAWEI Mate系列</a>
                <a href="#">HUAWEI Mate系列</a>
                <a href="#">HUAWEI Mate系列</a>
            </div>
            <a href="#">
                查看更多
                <span></span>
            </a>
        </nav>

        <div class="phone-box">
            <a class='shadow hot-style' href="#"><img src="img/goods-middle.png"/></a>
            <a class='shadow new-prod' href="#"><img src="img/goods-middle.png"/></a>
            <a class='shadow hot-style' href="#"><img src="img/goods-middle.png"/></a>
            <a class='shadow' href="#"><img src="img/goods-middle.png"/></a>
            <a class='shadow selling-products' href="#"><img src="img/goods-middle.png"/></a>
            <a class='shadow' href="#"><img src="img/goods-middle.png"/></a>
            <a class='shadow' href="#"><img src="img/goods-middle.png"/></a>
            <a class='shadow preferential' href="#"><img src="img/goods-middle.png"/></a>
            <a class='shadow' href="#"><img src="img/goods-middle.png"/></a>
            <a class='shadow' href="#"><img src="img/goods-middle.png"/></a>
        </div>

    </div>


    <div class="smart-wear banxin">
        <nav class="product-title">
            <h2>智能穿戴</h2>
            <div class="phone-nav">
                <a href="#">手环</a>
                <a href="#">手表</a>
                <a href="#">VR</a>
            </div>
            <a href="#">
                查看更多
                <span></span>
            </a>
        </nav>
        <div class="wear-box">
            <a class='shadow new-prod' href="#"><img src="img/watch.jpg"/></a>
            <a class='shadow' href="#"><img src="img/watch-small.png"/>
                <span>荣耀手表魔法系列</span>
                <span>到手价699起 3期免息</span>
                <span>RMB 799</span>
            </a>
            <a class='shadow hot-style' href="#"><img src="img/watch-small.png"/>
                <span>荣耀手表魔法系列</span>
                <span>到手价699起 3期免息</span>
                <span>RMB 799</span>
            </a>
            <a class='shadow' href="#"><img src="img/watch-small.png"/>
                <span>荣耀手表魔法系列</span>
                <span>到手价699起 3期免息</span>
                <span>RMB 799</span>
            </a>
            <a class='shadow' href="#"><img src="img/watch-small.png"/>
                <span>荣耀手表魔法系列</span>
                <span>到手价699起 3期免息</span>
                <span>RMB 799</span>
            </a>
            <a class='shadow selling-products' href="#"><img src="img/watch-small.png"/>
                <span>荣耀手表魔法系列</span>
                <span>到手价699起 3期免息</span>
                <span>RMB 799</span>
            </a>
            <a class='shadow' href="#"><img src="img/watch-small.png"/>
                <span>荣耀手表魔法系列</span>
                <span>到手价699起 3期免息</span>
                <span>RMB 799</span>
            </a>
            <a class='shadow' href="#"><img src="img/watch-small.png"/>
                <span>荣耀手表魔法系列</span>
                <span>到手价699起 3期免息</span>
                <span>RMB 799</span>
            </a>
            <a class='shadow preferential' href="#"><img src="img/watch-small.png"/>
                <span>荣耀手表魔法系列</span>
                <span>到手价699起 3期免息</span>
                <span>RMB 799</span>
            </a>
        </div>
    </div>


    <div class="video-ad banxin">
        <nav class="product-title">
            <h2>视频</h2>
            <a href="#">
                查看更多
                <span></span>
            </a>
        </nav>
        <div class="video-box">
            <section>
                <div class="video-click"><img src="img/video-pic.jpg"/>
                    <span></span>
                </div>
                <span>小米手环4</span>
                <span>改变从今开始</span>
            </section>
            <section>
                <div class="video-click"><img src="img/video-pic.jpg"/>
                    <span></span>
                </div>
                <span>小米手环4</span>
                <span>改变从今开始</span>
            </section>
            <section>
                <div class="video-click"><img src="img/video-pic.jpg"/>
                    <span></span>
                </div>
                <span>小米手环4</span>
                <span>改变从今开始</span>
            </section>
            <section>
                <div class="video-click"><img src="img/video-pic.jpg"/>
                    <span></span>
                </div>
                <span>小米手环4</span>
                <span>改变从今开始</span>
            </section>
        </div>
    </div>

    <div class="video-wall">
        <div class="video-window">
            <div class="video-title">
                <span>小米手环 4</span>
                <span class='video-close'></span>
            </div>
            <div class="video-self">
                <video src="190204084208765161.mp4" controls></video>
            </div>
        </div>
    </div>


    <a href="#" class="banner-bottom banxin">
        <img src="img/banner-bottom.jpg"/>
    </a>


    <div class="comp-bottom">
        <div class="comp-bottom-bx banxin">
            <div class="hw-top">
                <section>
                    <a href="#"></a>
                    <a href="#">百强企业 品质保证</a>
                </section>
                <section>
                    <a href="#"></a>
                    <a href="#">7天退货 15天换货</a>
                </section>
                <section>
                    <a href="#"></a>
                    <a href="#">48元起免运费</a>
                </section>
                <section>
                    <a href="#"></a>
                    <a href="#">1000家维修网点 全国联保</a>
                </section>
            </div>
            <div class="hw-center">
                <div class="hw-center-left">
                    <section>
                        <span>保修与退换货</span>
                        <a href="#">保修政策</a>
                        <a href="#">保修政策</a>
                        <a href="#">保修政策</a>
                        <a href="#">保修政策</a>
                        <a href="#">保修政策</a>
                        <a href="#">保修政策</a>
                    </section>
                    <section>
                        <span>关于我们</span>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                    </section>
                    <section>
                        <span>关于我们</span>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                    </section>
                    <section>
                        <span>关于我们</span>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                    </section>
                    <section>
                        <span>关于我们</span>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                        <a href="#">华为线下门店</a>
                    </section>
                    <section>
                        <span>
                            <span>友情提示</span>
                            <a href="#"></a>
                            <a href="#"></a>
                        </span>
                        <a href="#">花粉俱乐部</a>
                        <a href="#">花粉俱乐部</a>
                        <a href="#">花粉俱乐部</a>
                        <a href="#">花粉俱乐部</a>
                        <a href="#">花粉俱乐部</a>
                    </section>
                </div>
                <div class="hw-center-right">
                    <h2>400-088-6888</h2>
                    <span>7x24小时客服热线（仅收市话费）</span>
                    <a href="#"> 在线客服</a>
                    <span>关注Vmall：
                        <a href="#">
                            <span><img src="img/huawei-qr.jpg"></span>
                        </a>
                        <a href="#"></a>
                        <a href="#"></a>
                        <a href="#"></a>
                    </span>
                </div>
            </div>

            <div class="hw-bottom">
                <a href="#"><img src="img/logo-bottom.png"/></a>
                <div class="hw-bottom-content">
                    <div>
                        <a href="#">华为集团</a>
                        <a href="#">华为CBG官网</a>
                        <a href="#">荣耀官网</a>
                        <a href="#">花粉俱乐部</a>
                        <a href="#">华为应用市场</a>
                        <a href="#">EMUI</a>
                        <a href="#">华为终端云空间</a>
                        <a href="#">开发者联盟</a>
                    </div>
                    <div>
                        <a href="#">华为集团</a>
                        <a href="#">华为CBG官网</a>
                        <a href="#">荣耀官网</a>
                        <a href="#">花粉俱乐部</a>
                        <a href="#">华为应用市场</a>
                        <a href="#">EMUI</a>
                        <a href="#">华为终端云空间</a>
                        <a href="#">开发者联盟</a>
                    </div>
                    <div>
                        <a href="#">华为集团</a>
                        <a href="#">华为CBG官网</a>
                        <a href="#">荣耀官网</a>
                        <a href="#">花粉俱乐部</a>
                        <a href="#">华为应用市场</a>
                        <a href="#">EMUI</a>
                        <a href="#">华为终端云空间</a>
                        <a href="#">开发者联盟</a>
                    </div>
                </div>
                <div class="hw-bottom-com">
                    <a href="#"><img src="img/commercial-1.jpg"/></a>
                    <a href="#"><img src="img/commercial-2.png"/></a>
                </div>
            </div>
        </div>
    </div>


</body>
</html>