华为服务与支持（HTML5+CSS3）

一、前言
   想要学习的小伙伴，可以借鉴的，一下我会展示效果图和部分代码。

（注：此次做了华为的一系列网页，可以前往我的主页进行查看）

二、效果成品图

三、代码展示（为HTML部分代码，不能直接运行，源码在下方） 
1、头部导航栏 

<div class="dao">
        <div class="dao-1">
            <img src="../imgs/logo.svg" alt="" style="width: 110px;height: 25px;margin-top: 20px;margin-left: 100px;">
        </div>
        <div class="dao-2">
            <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="">HarmonyOS 4</a></li>
            </ul>
        </div>
        <div class="dao-6">
            <button>华为商城</button>
        </div>
        
        <div class="dao-5">
            <a href="">
                <img src="../imgs/m2.png" alt="" style="width: 18px;height: 18px;">
            </a>
        </div>
        <div class="dao-4">
            <a href="">
                <img src="../imgs/m1.png" alt="" style="width: 18px;height: 18px;">
            </a>
        </div>
        <div class="dao-3">
            <ul>
                <li><a href="">服务支持</a></li>
                <li><a href="">零售店</a></li>
                <li><a href="">商用</a></li>
            </ul>
        </div>

2、轮播图
 

<div class="box5-1">
            <div class="box5-1-1">
                <h1>热门活动推荐</h1>
            </div>
            <div class="box5-1-2">
                <img src="../imgs/lun1.png" alt="" style="display: none;">
                <img src="../imgs/lun2.png" alt="" style="display: none;">
                <img src="../imgs/lun3.png" alt="" style="display: none;">
            </div>
        </div>

  

3、尾部

 <div class="box12">
        <div class="box12-1">
            <div class="box12-1-1">
                <h3>购买产品</h3>
                <p>手机</p>
                <p>笔记本</p>
                <p>台式机</p>
                <p>显示器</p>
                <p>打印机</p>
                <p>平板</p>
                <p>智慧屏</p>
                <p>穿戴</p>
                <p>耳机音箱</p>
                <p>路由器</p>
                <p>配件</p>
                <p>商用产品</p>
                <p>教育商店</p>
            </div>
            <div class="box12-1-2">
                <h3>服务支持</h3>
                <p>保修政策</p>
                <p>上门安装</p>
                <p>维修服务</p>
                <p>保修期及权益查询</p>
                <p>维修备件价格</p>
                <p>服务进度查询</p>
                <p>联系我们</p>
                <p>服务隐私声明</p>
                <p>商用服务</p>
            </div>
            <div class="box12-1-3">
                <h3>应用与下载</h3>
                <p>终端云服务</p>
                <p>华为商城 APP</p>
                <p>我的华为 APP</p>
                <p>华为手机助手</p>
                <p>华为电脑管家</p>
                <p>HarmonyOS 4</p>
                <p>预置应用公示</p>
            </div>
            <div class="box12-1-4">
                <h3>新闻中心</h3>
                <p>华为新闻</p>
                <p>华为活动</p>
            </div>
            <div class="box12-1-5">
                <h3>关于我们</h3>
                <p>关于我们</p>
                <p>可持续发展</p>
                <p>隐私</p>
                <p>华为商城</p>
                <p>华为云</p>
                <p>企业业务</p>
                <p>运营商网络</p>
                <p华为集团></p>
                <p>加入华为</p>
                <p>内容举报</p>
            </div>
        </div>
    </div>
    <div class="box13">
        <div class="box13-1">
            <div class="box13-1-1">
                <h3 class="kkk">在线支持</h3>
                <p class="mmm">消费者服务热线</p>
                <p class="mmm">950800</p>
                <p class="mmm">7*24小时 | 普通话</p>
                <p class="mmm">Mate X系列、保时捷设计专属</p>
                <p class="mmm">热线</p>
                <p class="mmm">950801</p>
                <p class="mmm">在线客服 | 7*24小时</p>
            </div>
            <div class="box13-1-2">
                <h3 class="kkk">线下支持</h3>
                <p class="mmm">服务店查询</p>
                <p class="mmm">零售店查询</p>
            </div>
            <div class="box13-1-3">
                <h3 class="kkk">关注我们</h3>
                <img src="../imgs/微信.png" alt="" style="display: inline-block; height: 30px;width: 30px;">
                <img src="../imgs/新浪.png" alt="" style="display: inline-block; height: 24px;width: 24px; margin-left: 10px;">
            </div>
        </div>
    </div>
    <div class="box14">
        <div class="box14-1">
            <div class="box14-1-1">
                <p>版权所有 © 华为终端有限公司 1998-2023。保留一切权利。粤A2-20044005号</p>
            </div>
            <div class="box14-1-2">
                <ul>
                    <li><a href="">网站地图</a></li>
                    <li><a href="">使用条款</a></li>
                    <li><a href="">隐私声明</a></li>
                    <li><a href="">关于cookies</a></li>
                    <li><a href="">法律信息 </a></li>
                </ul>
            </div>
            <div class="box14-1-3">
                <div class="ppp">
                    <a href="">China - 简体中文</a>
                </div>
            </div>
        </div>
    </div>

 

四、总结
像这样的作品完成起来就没了难度，正在学习的小伙伴们在此送你们一句话：“要摘取果子的人必须爬上树”。 

五、源码+图片素材
链接：https://pan.baidu.com/s/1LC-qW2wTvBtYzRFVnEz1qQ?pwd=ojbk 
提取码：ojbk