当前位置:   article > 正文

华为商城页面

华为商城页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/华为商城.css"/>
        <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4279366_uq7ozvvzwx.css" />
    </head>
    <body>
        <!-- 顶部黑条 -->
        <div class="box">
            <div>
                <ul class="left">
                    <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="nc">
                        <a href="#">更多精彩</a>
                        <ol class="nb">
                            <li >
                                <a href="#">HarmonyOS</a>
                            </li>
                            <li>
                                <a href="#">应用市场</a>
                            </li>
                            <li>
                                <a href="#">华为终端云空间</a>
                            </li>
                            <li>
                                <a href="#">开发者联盟</a>
                            </li>
                        </ol>
                    </li>
                </ul>
                <ul class="right">
                    <li>
                        <a href="#">请登录 注册</a>|
                    </li>
                    <li>
                        <a href="#">我的订单</a>|
                    </li>
                    <li>
                        <a href="#">客服</a>|
                    </li>
                    <li>
                        <a href="#">网站导航</a>|
                    </li>
                    <li>
                        <a href="#">手机版</a>|
                    </li>
                    <li>
                        <a href="#">购物车</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- end -->

        <!-- logo -->
        <div class="logo">
            <img src="img/图标.png" alt="" />
            <ul>
                <li><a href="#">华为</a></li>
                <li><a href="#">智选汽车</a></li>
                <li><a href="#">华为智选</a></li>
                <li><a href="#">生态周边</a></li>
            </ul>
        </div>
        <!-- end -->


        <!-- 轮播图 -->
        <div class="lbt">
            <img src="img/s.webp" alt="" />
            <div class="list">
                <ul>
                    <li><a href="#">  手机</a></li>
                    <li><a href="#">  穿戴</a></li>
                    <li><a href="#">  平板</a></li>
                    <li><a href="#">  电脑</a></li>
                    <li><a href="#">  耳机音响</a></li>
                    <li><a href="#">  智慧屏</a></li>
                    <li><a href="#">  智能家居</a></li>
                    <li><a href="#">  出行车品</a></li>
                    <li><a href="#">  数码配件</a></li>
                    <li><a href="#">  增值服务</a></li>
                    <li><a href="#">  商务终端</a></li>
                    <li><a href="#">  生态周边</a></li>
                </ul>
            </div>
        </div>
        <!-- end -->


        <!-- 内容区 -->
        <div class="tb">
            <ul class="menu_list">
                <li>
                    <img class="phone" src="img/菜单1.gif" alt="" />
                    <p>智慧办公</p>
                </li>

                <li>
                    <img class="phone" src="img/菜单2.webp"alt="" />
                    <p>智能家居</p>
                </li>
                <li>
                    <img class="phone" src="img/菜单3.webp"alt="" />
                    <p>智选汽车</p>
                </li>
                <li>
                    <img class="phone" src="img/菜单4.webp"alt="" />
                    <p>华为手机</p>
                </li>
                <li>
                    <img class="phone" src="img/菜单5.webp"alt="" />
                    <p>影音娱乐</p>
                </li>
                <li>
                    <img class="phone" src="img/菜单6.webp" alt="" />
                    <p>运动健康</p>
                </li>
                <li>
                    <img class="phone" src="img/菜单7.webp"alt="" />
                    <p>企业商用</p>
                </li>
                <li>
                    <img class="phone" src="img/菜单9.webp"alt="" />
                    <p>配件</p>
                </li>
                <li>
                    <img class="phone" src="img/菜单10.webp"alt="" />
                    <p>超新计划</p>
                </li>
                <li>
                    <img class="phone" src="img/菜单10.webp" alt="" />
                    <p>以旧换新</p>
                </li>
                <li>
                    <img class="phone" src="img/菜单11.webp" alt="" />
                    <p>众测</p>
                </li>
                <li>
                    <img class="phone" src="img/菜单12.webp" alt="" />
                    <p>教育购</p>
                </li>
            </ul>

            <!-- end -->

            <!-- 甄选推荐 -->
            <div class="zhenxuan">
                <p>
                    <span>甄选推荐</span>
                    <a href="#">更多></a>
                </p>
                <ul>
                    <li>
                        <a
                            href="#">
                            <img src="img/汽车1.webp"alt="" />
                            <p class="title"><span>新品</span> 问界 新M7</p>
                            <p class="des">尊享至高27000元权益 (限2023年11月3日)</p>
                            <p class="guanggao"><span class="red">大智慧 大空间 超安全</p>
                            <p class="price">¥249800</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/推荐1.webp"alt="" />
                            <p class="title">HUAWEI P60 PRO</p>
                            <p class="des">超聚光夜视长焦|双向北斗卫星消息</p>
                            <p class="guanggao">
                                <span class="red">限时直降800元</span>
                                <span class="black">12期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥6188<span>¥6988</span></p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/推荐2.webp" alt="" />
                            <p class="title">HUAWEI FreeBuds Pro 3</p>
                            <p class="des">应用星闪连接核心技术|麒麟芯片</p>
                            <p class="guanggao"><span class="black">6期0分期利息</span><span class="black">6期0分期利息</span></p>
                            <p class="price">¥1499</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/推荐3.webp" alt="" />
                            <p class="title">HUAWEI MateBook X Pro</p>
                            <p class="des">微绒金属机身|3.1K原色全面屏</p>
                            <p class="guanggao">
                                <span class="red">限时直降800元</span>
                                <span class="black">12期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥13199<span>¥13999</span></p>

                        </a>
                    </li>

                </ul>
            </div>
            <!-- end -->


            <!-- 手机专区 -->
            <div class="sjzq">
                <p>
                    <span>手机专区</span>
                    <a href="#">更多></a>
                </p>
                <ul>
                    <li>
                        <a href="#">
                            <img src="img/手机1.webp"alt="" />
                            <p class="title"><span>新品</span>Mate 60 RS 非凡大师</p>
                            <p class="des">双卫星通话|玄武钢化昆仑玻璃</p>
                            <p class="guanggao"><span class="black">赠积分</p>
                            </span>
                            <p class="price">¥11999</p>

                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img src="img/手机2.webp" alt="" />
                            <p class="title"><span>新品</span>Mate 60 Pro+</p>
                            <p class="des">双卫星通话|超可靠玄武架构</p>
                            <p class="guanggao"><span class="black">赠积分</p>
                            </span>
                            <p class="price">¥9999</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/手机3.webp" alt="" />
                            <p class="title"><span>新品</span>Mate 60 Pro</p>
                            <p class="des">卫星通话|超可靠玄武架构</p>
                            <p class="guanggao"><span class="black">赠积分</p>
                            </span>
                            <p class="price">¥6999</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/手机4.webp" alt="" />
                            <p class="title"><span>新品</span>Mate 60</p>
                            <p class="des">超可靠玄武架构|全焦段超清影像</p>
                            <p class="guanggao"><span class="black">赠积分</p>
                            </span>
                            <p class="price">¥5999</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/手机5.webp" alt="" />
                            <p class="title"><span>新品</span>Mate X5 同心套装</p>
                            <p class="des">同心套装:内含Mate X5 12GB + 512GB</p>
                            <p class="guanggao"><span class="black">赠积分</p>
                            </span>
                            <p class="price">¥18899</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/手机6.webp" alt="" />
                            <p class="title"><span>新品</span>Mate 60 Pro 同心套装</p>
                            <p class="des">卫星通话|超可靠玄武架构</p>
                            <p class="guanggao"><span class="black">赠积分</p>
                            </span>
                            <p class="price">¥11399</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/手机7.webp" alt="" />
                            <p class="title"><span>新品</span>nova 11 SE</p>
                            <p class="des">3200万高清自拍|一亿像素光影人像</p>
                            <p class="guanggao">
                                <span class="red">限时赠</span>
                                <span class="black">6期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>

                            <p class="price">¥1999</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/手机8.webp" alt="" />
                            <p class="title"><span>新品</span>Mate 60 RS 非凡大师</p>
                            <p class="des">双卫星通话|玄武钢化昆仑玻璃</p>
                            <p class="guanggao">
                                <span class="black">限时直降800元</span>
                                <span class="black">12期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥6188<span>¥6988</span></p>

                        </a>
                    </li>
                </ul>
            </div>
            <!-- end -->

            <!-- 电脑专区 -->
            <div class="diannao">
                <p>
                    <span>电脑专区</span>
                    <a href="#">更多></a>
                </p>
                <ul>
                    <li>
                        <a href="#">
                            <img src="img/电脑1.webp" alt="" />
                            <p class="title">MateBook D 16</p>
                            <p class="des">16英寸护眼全面屏|13代酷睿i9处理器</p>
                            <p class="guanggao">
                                <span class="red">限时直降200元</span>
                                <span class="black">3期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥6999</p>

                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img src="img/电脑2.webp" alt="" />
                            <p class="title">MateBook 14s</p>
                            <p class="des">32GB大内存|13代酷睿处理器|超级终端</p>
                            <p class="guanggao">
                                <span class="red">限时直降300元span>
                                    <span class="black">12期0分期利息</span>
                                    <span class="black">赠积分</span>
                            </p>

                            <p class="price">¥9199</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/电脑3.webp" alt="" />
                            <p class="title">MateBook 13s</p>
                            <p class="des">超级终端</p>
                            <p class="guanggao">
                                <span class="red">限时直降200元</span>
                                <span class="black">3期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>

                            <p class="price">¥6099</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/电脑4.webp" alt="" />
                            <p class="title">MateBook X Pro</p>
                            <p class="des">微绒金属机身|3.1K原色全面屏</p>
                            <p class="guanggao">
                                <span class="red">限时直降800元</span>
                                <span class="black">12期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>

                            <p class="price">¥13199</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/电脑5.webp" alt="" />
                            <p class="title">MateBook D 14</p>
                            <p class="des">14英寸护眼全面屏│13代酷睿处理器</p>
                            <p class="guanggao">
                                <span class="red">限时直降600元</span>
                                <span class="black">3期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥4499</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/电脑6.webp" alt="" />
                            <p class="title"><span>新品</span>MateStation X</p>
                            <p class="des">4K+原色全面屏|搭载12酷睿</p>
                            <p class="guanggao">
                                <span class="red">限时直降500元</span>
                                <span class="black">3期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥14499</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/电脑7.webp" alt="" />
                            <p class="title"><span>新品</span>MateView SE</p>
                            <p class="des">IPS全面屏</p>
                            <p class="guanggao">
                                <span class="red">限时直降100元</span>
                                <span class="black">赠积分</span>
                            </p>

                            <p class="price">¥549</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/电脑8.webp" alt="" />
                            <p class="title">PixLab X1</p>
                            <p class="des">高速打印|自动双面|一碰打印</p>
                            <p class="guanggao">
                                <span class="red">限时直降100元</span>
                                <span class="black">3期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥1499</p>

                        </a>
                    </li>
                </ul>
            </div>
            <!-- end -->

            <!-- 平板专区 -->
            <div class="pingban">
                <p>
                    <span>平板专区</span>
                    <a href="#">更多></a>
                </p>
                <ul>
                    <li>
                        <a href="#">
                            <img src="img/平板1.webp" alt="" />
                            <p class="title"><span>新品</span>MatePad Pro 13.2英寸</p>
                            <p class="des">13.2英寸OLED大屏</p>
                            <p class="guanggao">
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥5699</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/平板2.webp" alt="" />
                            <p class="title">MatePad 2023款</p>
                            <p class="des">11.5英寸护眼大屏</p>
                            <p class="guanggao">
                                <span class="red">限时直降100元</span>
                                <span class="black">3期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥1599</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/平板3.webp" alt="" />
                            <p class="title">MatePad Air</p>
                            <p class="des">144Hz高刷全面屏</p>
                            <p class="guanggao">
                                <span class="red">限时直降100元</span>
                                <span class="black">3期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥2599</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/平板4.webp" alt="" />
                            <p class="title">MateBook E 2023款</p>
                            <p class="des">二合一平板电脑</p>
                            <p class="guanggao">
                                <span class="red">限时直降100元</span>
                                <span class="black">3期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥7399</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/平板5.webp" alt="" />
                            <p class="title"><span>新品</span>MatePad Pro 13.2英寸</p>
                            <p class="des">13.2英寸OLED大屏</p>
                            <p class="guanggao">
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥5699</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/平板6.webp" alt="" />
                            <p class="title"><span>新品</span>MatePad Pro 13.2英寸</p>
                            <p class="des">13.2英寸OLED大屏</p>
                            <p class="guanggao">
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥5699</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/平板7.webp" alt="" />
                            <p class="title"><span>新品</span>MatePad Pro 13.2英寸</p>
                            <p class="des">13.2英寸OLED大屏</p>
                            <p class="guanggao">
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥5699</p>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/平板8.webp" alt="" />
                            <p class="title"><span>新品</span>MatePad Pro 13.2英寸</p>
                            <p class="des">13.2英寸OLED大屏</p>
                            <p class="guanggao">
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥5699</p>

                        </a>
                    </li>
                </ul>
            </div>

            <!-- end -->


            <!-- 穿戴专区 -->
            <div class="chuandai">
                <p>
                    <span>穿戴专区</span>
                    <a href="#">更多></a>
                </p>
                <ul>
                    <li>
                        <a href="#">
                            <img src="img/手表1.webp"alt="" />
                            <p class="title">WATCH GT 4</p>
                            <p class="des">科学运动减脂|心律失常提示|强劲续航</p>
                            <p class="guanggao">
                                <span class="red">限时直降200元</span>
                                <span class="black">3期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥1538</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/手表2.webp" alt="" />
                            <p class="title"><span>新品</span>WATCH ULTIMATE DESIGN</p>
                            <p class="des">华为首款黄金智能腕表</p>
                            <p class="guanggao">

                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥21999</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/手表3.webp"alt="" />
                            <p class="title">WATCH 4 Pro</p>
                            <p class="des">高血糖风险评估研究|一键微体验</p>
                            <p class="guanggao">
                                <span class="red">限时直降200元</span>
                                <span class="black">3期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥3349</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/手表4.webp" alt="" />
                            <p class="title">WATCH 4</p>
                            <p class="des">eSIM独立通话|—键微体检</p>
                            <p class="guanggao">
                                <span class="red">限时直降50元</span>
                                <span class="black">3期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥2649</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/手表5.webp" alt="" />
                            <p class="title">WATCH Ultimate</p>
                            <p class="des">双向北斗卫星消息|百米深潜科技</p>
                            <p class="guanggao">

                                <span class="black">3期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥5999</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/手表6.webp" alt="" />
                            <p class="title">WATCH GT 3 Pro</p>
                            <p class="des">无线快充、心电分析、非凡材质、腕上..</p>
                            <p class="guanggao">
                                <span class="red">限时直降600元</span>
                                <span class="black">3期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥1888</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/手表7.webp" alt="" />
                            <p class="title">WATCH GT 3</p>
                            <p class="des">强劲续航</p>
                            <p class="guanggao">
                                <span class="red">限时直降300元</span>
                                <span class="black">3期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥1088</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/手表8.webp" alt="" />
                            <p class="title">儿童手表 5 活力版</p>
                            <p class="des">离线定位|畅连视频通话</p>
                            <p class="guanggao">
                                <span class="red">限时直降50元</span>

                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥608</p>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- end -->

            <!-- 精选爆款 -->
            <div class="baokuan">
                <p>
                    <span>精选爆款</span>
                    <a href="#">更多></a>
                </p>
                <ul>
                    <li>
                        <a href="#">
                            <img src="img/爆款1.webp" alt="" />
                            <p class="title"><span>热销爆款</span>FreeBuds 4E</p>
                            <p class="des">半开放主动降噪2.0|空气感舒适佩戴</p>
                            <p class="guanggao">
                                <span class="red">限时直降200元</span>
                                <span class="black">3期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥499<span>699</span></p>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img src="img/爆款2.webp" alt="" />
                            <p class="title">华为Vision智慧屏3</p>
                            <p class="des">Al超感摄像头|240Hz 鸿鹄画质</p>
                            <p class="guanggao">
                                <span class="red">限时直降200元</span>
                                <span class="black">3期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥4299<span>4499</span></p>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img src="img/爆款3.webp" alt="" />
                            <p class="title"><span>新品</span>华为智能门锁</p>
                            <p class="des">AI指纹锁</p>
                            <p class="guanggao">
                                <span class="red">限时直降400元</span>
                                <span class="black">6期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥2099<span>2499</span></p>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img src="img/爆款4.webp" alt="" />
                            <p class="title"><span>新品</span>华为家庭储存</p>
                            <p class="des">图片搜索 秒级呈现</p>
                            <p class="guanggao">
                                <span class="red">限时直降300元</span>
                                <span class="black">6期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p>
                            <p class="price">¥2699<span>2999</span></p>
                        </a>
                    </li>
                </ul>
            </div>


            <!-- end -->


            <!-- 问界汽车 -->
            <div class="wenjie">
                <p>
                    <span>问界汽车</span>
                    <a href="#">更多></a>
                </p>
                <ul>
                    <li>
                        <a href="#">
                            <img src="img/问界1.webp" alt="" />
                            <p class="title">问界 新M7 大五座</p>
                            <p class="des">新车上市</p>
                            <!-- <p class="guanggao">
                                <span class="red">限时直降300元</span>
                                <span class="black">6期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p> -->
                            <p class="price">¥258000</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/问界2.webp" alt="" />
                            <p class="title">问界 M5 智驾版</p>
                            <p class="des">高阶智能驾驶系统</p>
                            <p class="guanggao">
                                <span class="red">鸿蒙智能座驾</span>

                            </p>
                            <p class="pri">¥279800</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/问界3.webp" alt="" />
                            <p class="title">问界 M5 纯电智驾版</p>
                            <p class="des">高阶智能驾驶系统</p>
                            <!-- <p class="guanggao">
                                <span class="red">限时直降300元</span>
                                <span class="black">6期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p> -->
                            <p class="price">¥289800</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/问界4.webp" alt="" />
                            <p class="title">问界 M5 标准版 (2023款)</p>
                            <p class="des">百公里加速低至4.4s</p>
                            <!-- <p class="guanggao">
                                <span class="red">限时直降300元</span>
                                <span class="black">6期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p> -->
                            <p class="price">¥249800</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/问界5.webp" alt="" />
                            <p class="title">问界 M5 纯电标准版 (2023款)</p>
                            <p class="des">鸿蒙智能座舱</p>
                            <!-- <p class="guanggao">
                                <span class="red">限时直降300元</span>
                                <span class="black">6期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p> -->
                            <p class="price">¥259800</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/问界6.webp" alt="" />
                            <p class="title"><span>新品</span>问界 新M7 享六座</p>
                            <p class="des">尊享至高27000元权益(限2023年11月3...</p>
                            <!-- <p class="guanggao">
                                <span class="red">限时直降300元</span>
                                <span class="black">6期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p> -->
                            <p class="price">¥275800</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/问界7.webp" alt="" />
                            <p class="title">问界 M7</p>
                            <p class="des">舒适大空间</p>
                            <!-- <p class="guanggao">
                                <span class="red">限时直降300元</span>
                                <span class="black">6期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p> -->
                            <p class="price">¥289800</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/问界8.webp" alt="" />
                            <p class="title">华为家充桩安装服务包</p>
                            <!-- <p class="des">新车上市</p> -->
                            <!-- <p class="guanggao">
                                <span class="red">限时直降300元</span>
                                <span class="black">6期0分期利息</span>
                                <span class="black">赠积分</span>
                            </p> -->
                            <p class="pric">¥8000</p>
                        </a>
                    </li>
                </ul>
            </div>

            <!-- end -->


        </div>
        <!-- 下部导航栏 -->
        <div class="btm">
            <ul>
                <li>
                    <i class="iconfont icon-qiabao"></i>
                    <a href="#">百强企业 品质保证</a>
                </li>
                <li>
                    <i class="iconfont icon-rili"></i>
                    <a href="#">7天退货 15天换货</a>
                </li>
                <li>
                    <i class="iconfont icon-hezi201"></i>
                    <a href="#">48元起免运费</a>
                </li>
                <li>
                    <i class="iconfont icon-anquan"></i>
                    <a href="#">2000家服务店 全国联保</a>
                </li>
            </ul>
        </div>

        <!-- end -->

        <!-- 底部列表 -->
        <div class="btm_list">
            <div class="b_left">
                <ul>
                    <li>
                        <p>购物指南</p>
                    </li>
                    <li>免息分期</li>
                    <li>以旧换新</li>
                    <li>众测活动</li>
                    <li>企业购</li>
                    <li>O2O采购</li>
                </ul>

                <ul>
                    <li>
                        <p>售后服务</p>
                    </li>
                    <li>门店维修</li>
                    <li>保修政策</li>
                    <li>防伪查询</li>
                    <li>退换货政策</li>
                    <li>O手机机修服务</li>
                </ul>

                <ul>
                    <li>
                        <p>维修与技术支持</p>
                    </li>
                    <li>服务店</li>
                    <li>预约维修</li>
                    <li>手机寄修</li>
                    <li>备件价格查询</li>
                    <li>上门服务</li>
                </ul>

                <ul>
                    <li>
                        <p>特色服务</p>
                    </li>
                    <li>防伪查询</li>
                    <li>补购政策</li>
                    <li>以旧换新</li>
                </ul>

                <ul>
                    <li>
                        <p>关于我们</p>
                    </li>
                    <li>公司介绍</li>
                    <li>华为零售店</li>
                    <li>商家中心</li>
                    <li>意见反馈</li>
                    <li>规则中心</li>
                </ul>

                <ul>
                    <li>
                        <p>友情链接<>
                        </p>
                    </li>
                    <li>华为集团</li>
                    <li>华为消费者业务</li>
                    <li>华为云</li>
                    <li>华为应用市场</li>
                    <li>华为心声社区</li>
                </ul>
            </div>

            <div class="b_right">
                <h3>950805</h3>
                <p> 7 x 24小时客服热线(仅收市话费)</p>
                <span>
                    <i class="iconfont icon-kefu1"></i>
                    在线客服
                </span>
                <p>
                    关注VMALL:
                    <a href="#">
                        <i class="iconfont icon-weixin1"></i>
                        <i class="iconfont icon-toutiao"></i>
                        <i class="iconfont icon-weibo1"></i>
                        <i class="iconfont icon-baidu"></i>
                    </a>
                </p>
            </div>
        </div>
        <!-- end -->
        <div class="zuixia">
            <div class="iqq">
                <img src="img/图标.png"/>
            </div>
            <div class="huaduan">
                <ul class="hhhh">
                    <li><a href="#">华为集团</a>|<>
                    <li><a href="#">消费者业务网站</a>|<>
                    <li><a href="#">华为应用市场</a>|<>
                    <li><a href="#">HrmonyoOS</a>|<>
                    <li><a href="#">华为终端云空间</a>|<>
                    <li><a href="#">开发者联盟</a>|<>
                    <li><a href="#">华为商城手机版</a>
                        <>
                </ul>
                <ul class="mmm">
                    <li>隐私声明 服务协议 COOKIES Copyright @ 2012-2023 华为终端有限公司 版权所有<>
                    <li>| <a href="#">经营资质</a>|<>
                    <li><a href="#">粤ICP备19015064号</a>|<>
                    <li><a href="#">粤公网安备 44190002003939号</a>
                        <>
                </ul>
                <ul class="ooo">
                    <li><a href="#">增值电信业务经营许可证: 粤B2-20190762</a>|<>
                    <li><a href="#">备案主体编号: 44201919072182</a>|<>
                    <li><a href="#">粤新出网备 (2021) 2号</a>|<>
                    <li><a href="#">(粤)网械平台备字[2022]第00005号</a>|<>
                </ul>
                <ul class="ppp">
                    <li><a href="#">互联网药品信息服务资格证 (粤) -非经营性-2020-0102</a>|<>
                    <li><a href="#">广东省网络食品交易第三方平台备案: GDWS10168</a>
                        <>
                </ul>
            </div>
            <div class="lll">
                <img src="img/安全.png" />
            </div>
        </div>


        <!-- 底部 -->
    </body>
</html>

* 全选页面中所有的样式 */
*{
    margin: 0;      /* 外边距 */
    padding: 0;        /* 内边距 */
    list-style: none;
    text-decoration: none;
}
/* 顶部黑条 */
.box{
    width: 100%;
    height: 35px;
    background-color: #000000;
}
/* .box>div子代选择器,通过父亲找儿子,
找的是儿子和父亲没关系 */
.box>div{
    width: 1200px;
    height: 35px;
    margin: auto;
    line-height: 35px;
}

.box>div>ul>li>a{
    text-decoration: none;
    color: #ccc;
    margin-right: 8px;
}

.box>div>ul>li{
    color: white
}

.left{
    float: left;
}

.left>li{
    margin-right: 8px;
    float: left;
}

.left>li>a:hover{
    color: white;
}
.nc{
    position: relative;
}
.nc:hover{
    background-color: white;
}
.nc>a:hover{
    color: red;
}
.nb{
    position: absolute;
    text-align: center;
    /* border: 1px solid red; */
    line-height: 30px;
    right: 0;
    width: 120px;
    background-color: white;
    display: none;
    z-index:10;
}
.nc:hover .nb{
    display: block;
}
.nb>li>a{
    color: #999;
    text-decoration: none;
    font-size: 15px;
}

.nb>li>a:hover{
    color: red;
}

.right>li{
    margin-right: 8px;
    float: left;
}

.right>li>a:hover{
    color: white;
}
.right{
    float: right;
}

/* end */

/* logo */
.logo{
    width: ;
    height: 50px;
    display: flex;
    margin:15px auto;

    
    
}

.logo>ul{
    height: 50px;
    width: 1200px;
    display: flex;
}
.logo>ul>li{
    width: 100px;
    text-align: center;
}
.logo>ul>li>a{
    line-height: 50px;
    font-size: 16px;
    text-decoration: none;
    color: #000000;
}

.logo>ul>li>a:hover{
    color: red;
}

/* 轮播图 */
.lbt{
    width: 100%;
    height: 500px;
    margin: auto;
}

.lbt>img{
    width: 100%;
    height: 500px;
    position: absolute;
}
.list{
    display: flow-root;
}

.list>ul{
    width: 250px;
    margin-top: 10px;
    /* height: 500px; */
    color: #000000;
    position: relative;
    left: 205px;
    background: rgb(255, 255, 255,0.9);
    box-shadow:0 0 20px 5px #9f9f9f;
}
.list>ul>li>a{
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    color: #999;
    text-decoration: none;
}
/* end */


/* 内容区 */
.tb{
    background: #f1f3f5;
    display: flow-root;
}

.menu_list{
    width: 1200px;
    height: 165px;
    margin: 35px auto;

    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-content: space-between;
}
.menu_list>li{
    width: 198px;
    height: 70px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.menu_list>li>img{
    width: 60px;
    height: 60px;
    position: absolute;
}
.menu_list>li>p{
    font-size: 14px;
    margin-top: 65px;
}

.menu_list>li:hover{
    font-weight: 900;
    cursor: pointer;
    
}
.menu_list>li:hover .phone{
    width: 65px;
    height: 65px;
}


/* end */


/* 甄选推荐 */
.zhenxuan{
    width: 1200px;
    margin: auto;
    margin-bottom: 10px;
}

.zhenxuan>p{
    display: flex;
    justify-content: space-between;
    font-size: 25px;
    line-height: 50px;
}

.zhenxuan>p>a{
    color: #78797a;
    font-size: 16px;
    text-decoration: none;
}

.zhenxuan>ul{
    display: flex;
    justify-content: space-between;
}

.zhenxuan>ul>li{
    width: 290px;
    height: 390px;
    background: white;
}
.zhenxuan>ul>li:hover{
    box-shadow: 0 0 15px 0 #979797;
}
.zhenxuan>ul>li>a{
    display: inline-block;
    width: 290px;
    height: 390px;
    text-align: center;
    font-size: 14px;
}
.zhenxuan img{
    width: 280px;
    margin: 30px 0;
}

.title{
    color: black;
}
.title>span{
    color: white;
    padding: 0 3px;
    border-radius: 3px;
    background-color: #fa3040;
}
.guanggao>span{
    margin-right: 3px;
}
.des{
    color: #979797;
    padding: 5px 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* .guanggao{
    font-size: 12px;
    color: red;
    border: 1px solid red;
    display: inline-block;
    padding: 0 3px;
    border-radius: 3px;
} */

.red{
    font-size: 12px;
    color: red;
    border: 1px solid red;
    display: inline-block;
    padding: 0 3px;
    border-radius: 3px;
}

.black{
    font-size: 12px;
    color: black;
    border: 1px solid black;
    display: inline-block;
    padding: 0 3px;
    border-radius: 3px;
}
.price{
    font-size: 18px;
    color: black;
    margin-top: 20px;
}
.price>span{
    color: #979797;
    font-size: 12px;
    text-decoration: line-through;
}
/* end */


/* 手机专区 */
.sjzq{
    width: 1200px;
    margin: auto;
    margin-bottom: 10px;
}
.sjzq>p{
    display: flex;
    justify-content: space-between;
    font-size: 25px;
    line-height: 50px;
}

.sjzq>p>a{
    color: #78797a;
    font-size: 16px;
    text-decoration: none;
    line-height: ;
}
.sjzq>ul{
    height: 790px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
}

.sjzq>ul>li{
    width: 290px;
    height: 390px;
    background: white;
}
.sjzq>ul>li:hover{
    box-shadow: 0 0 15px 0 #979797;
}
.sjzq>ul>li>a{
    display: inline-block;
    width: 290px;
    height: 390px;
    text-align: center;
    font-size: 14px;
}
.sjzq img{
    width: 160px;
    height: 160px;
    margin-top: 50px;
    margin-bottom: 20px;
}

/* end */

/* 电脑专区 */
.diannao{
    width: 1200px;
    margin: auto;

}
.diannao>p{
    display: flex;
    justify-content: space-between;
    font-size: 25px;
    line-height: 50px;
}

.diannao>p>a{
    color: #78797a;
    font-size: 16px;
    text-decoration: none;
    line-height: ;
}
.diannao>ul{
    height: 790px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
}

.diannao>ul>li{
    width: 290px;
    height: 390px;
    background: white;
}
.diannao>ul>li:hover{
    box-shadow: 0 0 15px 0 #979797;
}
.diannao>ul>li>a{
    display: inline-block;
    width: 290px;
    height: 390px;
    text-align: center;
    font-size: 14px;
}
.diannao img{
    width: 160px;
    height: 160px;
    margin-top: 50px;
    margin-bottom: 20px;
}

/* end */


/* 平板专区 */
.pingban{
    width: 1200px;
    margin: auto;
    margin-top: 10px;
}
.pingban>p{
    display: flex;
    justify-content: space-between;
    font-size: 25px;
    line-height: 50px;
}

.pingban>p>a{
    color: #78797a;
    font-size: 16px;
    text-decoration: none;
    line-height: ;
}
.pingban>ul{
    height: 790px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
}

.pingban>ul>li{
    width: 290px;
    height: 390px;
    background: white;
}
.pingban>ul>li:hover{
    box-shadow: 0 0 15px 0 #979797;
}
.pingban>ul>li>a{
    display: inline-block;
    width: 290px;
    height: 390px;
    text-align: center;
    font-size: 14px;
}
.pingban img{
    width: 160px;
    height: 160px;
    margin-top: 50px;
    margin-bottom: 20px;
    
}


/* end */

/* 穿戴专区 */
.chuandai{
    width: 1200px;
    margin: auto;
    margin-top: 10px;
}
.chuandai>p{
    display: flex;
    justify-content: space-between;
    font-size: 25px;
    line-height: 50px;
}

.chuandai>p>a{
    color: #78797a;
    font-size: 16px;
    text-decoration: none;
    line-height: ;
}
.chuandai>ul{
    height: 790px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
}

.chuandai>ul>li{
    width: 290px;
    height: 390px;
    background: white;
}
.chuandai>ul>li:hover{
    box-shadow: 0 0 15px 0 #979797;
}
.chuandai>ul>li>a{
    display: inline-block;
    width: 290px;
    height: 390px;
    text-align: center;
    font-size: 14px;
}
.chuandai img{
    width: 160px;
    height: 160px;
    margin-top: 50px;
    margin-bottom: 20px;
    
}

/* end */


/* 精选爆款 */
.baokuan{
    width: 1200px;
    margin: auto;
    margin-top: 10px;
}
.baokuan>p{
    display: flex;
    justify-content: space-between;
    font-size: 25px;
    line-height: 50px;
}

.baokuan>p>a{
    color: #78797a;
    font-size: 16px;
    text-decoration: none;
    line-height: ;
}
.baokuan>ul{
    height: 395px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
}

.baokuan>ul>li{
    width: 290px;
    height: 390px;
    background: white;
}
.baokuan>ul>li:hover{
    box-shadow: 0 0 15px 0 #979797;
}
.baokuan>ul>li>a{
    display: inline-block;
    width: 290px;
    height: 390px;
    text-align: center;
    font-size: 14px;
}
.baokuan img{
    width: 160px;
    height: 160px;
    margin-top: 50px;
    margin-bottom: 20px;
    
}

/* end */


/* 问界汽车 */
.wenjie{
    width: 1200px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 60px;
}
.wenjie>p{
    display: flex;
    justify-content: space-between;
    font-size: 25px;
    line-height: 50px;
}

.wenjie>p>a{
    color: #78797a;
    font-size: 16px;
    text-decoration: none;
    line-height: ;
}
.wenjie>ul{
    height: 790px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
}

.wenjie>ul>li{
    width: 290px;
    height: 390px;
    background: white;
}
.wenjie>ul>li:hover{
    box-shadow: 0 0 15px 0 #979797;
}
.wenjie>ul>li>a{
    display: inline-block;
    width: 290px;
    height: 390px;
    text-align: center;
    font-size: 14px;
}
.wenjie img{
    width: 220px;
    height: 200px;
    margin-top: 50px;
    margin-bottom: 20px;
    
}

.pric{
    font-size: 18px;
    color: black;
    margin-top: 46px;
}
.pri{
    font-size: 18px;
    color: black;
    /* margin-top: 10px; */
}

/* end */

/* 下部导航栏 */
.btm{
    width: 1200px;
    height: 150px;
    margin: auto;
    border-bottom: 1px solid #cfcfcf;
}

.btm>ul{
    height: 150px;
    display: flex;
    justify-content: space-between;
    
}
.btm>ul>li>i{
    font-size: 20px;
}
.btm>ul>li>a{
    font-size: 20px;
    color: black;
    line-height: 150px;
    margin-left: 7px;
}

/* end */

/* 底部列表 */
.btm_list{
    width: 1200px;
    height: 300px;
    padding-top: 10px;
    margin: auto;
    
}
.b_left{
    display: flex;
    
}
.b_left>ul{
    height: 40px;
    
    width: 150px;
    font-size: 14px;
    
}

.b_left>ul>li{
    line-height: 40px;
    color: #cfcfcf;
}

.b_left>ul>li>p{
    margin:20px 0 ;
    color: black;
    font-size: 16px;
}

.b_left>ul>li:hover{
    color: red;
    cursor: pointer;
}

/* end */
.b_right{
    float: right;
    margin: auto;
    width: 200px;
    /* margin-left: 10px; */
    text-align: center;
    border-left: 1px solid #cfcfcf;
    margin-top: 30px;
}
.b_right>h3{
    font-size: 30px;
    margin-bottom: 5px;
}
.b_right>span{
    width: 200px;
    height: 50px;
    line-height: 50px;
    margin: 20px 0;
    display: inline-block;
    color: white;
    background-color: black;
    border-radius: 100px;
}
.b_right>span:hover{
    cursor: pointer;
}
.b_right>p>a{
    color: black;
}
/* end */

/* 底部 */

.zuixia{
    width: 1200px;
    height: 1711110px;
    /* background: gold; */
    margin: auto;
    display: flex;
    align-items: center;
    border-top: 1px solid #cfcfcf;
}
.iqq{
    width: 125px;
    height: 125px;
    /* background-color: aqua; */
}
.iqq>img{
    width: 125px;
    height: 50px;
}
.huaduan{
    width: 900px;
    height: 125px;
    /* background-color: greenyellow; */
    line-height: 40px;
}
.hhhh{
    width: 680px;
    height: 20px;
    display: flex;
    justify-content: space-evenly;
}
.hhhh>li{
    font-size: 12px;
    color: #7f7f7f;
}
.hhhh>li>a{
    margin-right: 7px;
    text-decoration: none;
    color: black;
}
.hhhh>li>a:hover{
    color: red;
}
.mmm{
    width: 890px;
    height: 20px;
    display: flex;
    justify-content: space-evenly;
}
.mmm>li{
    font-size: 12px;
    color: #7f7f7f;
}
.mmm>li>a{
    margin-right: 7px;
    text-decoration: none;
    color: #7f7f7f;
}
.mmm>li>a:hover{
    color: red;
}
.ooo{
    width: 830px;
    height: 20px;
    display: flex;
    justify-content: space-evenly;
}
.ooo>li{
    font-size: 12px;
    color: #7f7f7f;
}
.ooo>li>a{
    margin-right: 7px;
    text-decoration: none;
    color: #7f7f7f;
}
.ooo>li>a:hover{
    color: red;
}
.ppp{
    width: 620px;
    height: 20px;
    display: flex;
    justify-content: space-evenly;
}
.ppp>li{
    font-size: 12px;
    color: #7f7f7f;
}
.ppp>li>a{
    margin-right: 7px;
    text-decoration: none;
    color: #7f7f7f;
}
.ppp>li>a:hover{
    color: red;
}
.lll{
    width: 135px;
    height: 125px;
    /* background-color: blue; */
    margin-left: 30px;
}
.lll>img{
    width: 135px;
    height: 50px;
}

/* end */

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/334340
推荐阅读
相关标签
  

闽ICP备14008679号