课程大作业之华为官网（HTML5+CSS3）

一路向阳敲代码

已于 2023-11-07 20:35:53 修改

阅读量781

点赞数 3

文章标签：课程设计华为 html5

于 2023-11-06 00:25:33 首次发布

本文链接：https://blog.csdn.net/2301_79083605/article/details/134237400

版权

本文档介绍了一次使用HTML5和CSS3来实现华为官网的课程设计项目。作者提供了网页的效果展示、部分代码片段，并分享了完整的项目源代码链接，供读者学习和参考。如果有任何疑问，作者鼓励读者通过指定方式联系他。

摘要由CSDN通过智能技术生成

前言

大家好，本篇文章分析一下用HTML5+CSS3实现华为官网！
该网页结构相对简单，比较适合大家当个课程设计啥的！
大家如果有任何问题或者需要其他页面了均可联系我！
下面话不多说，直接展示该页面的效果！

一、效果展示

在这里插入图片描述

二、部分代码展示

   <div class="head1">
        <div class="head1_1">
            <a href="">登录</a>
            <a href="">选择区域/语言</a>
            <a href="">集团网站</a>
        </div>
    </div>
    <div class="container">
        <div class="con11">
            <div class="con1">
                <img src="./imgs/logo.png" alt="" class="con1_img">
                <span style="display: inline-block;width: 250px;float: left;">&nbsp;</span>
                <ul class="con1_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>
                </ul>
            </div>
        </div>
        <div class="con2">
            <img src="./imgs/a1.jpg" alt="">
            <div class="con2_demo">
                查看更多
            </div>
        </div>
        <div class="con3">
            <div class="con3_demo1">
                <h2>推荐信息</h2>
            </div>
            <div class="con3_div1">
                <img src="./imgs/a2.jpg" alt="">
                <div class="con3_div1demo">
                    <p style="color: #fff;margin-bottom: 4px;">产品</p>
                    <p style="color: #fff;margin-bottom: 4px;font-size: 21px;font-weight: 600;">HUAWEI WATCH 4</p>
                    <p style="color: #fff;">智慧旗舰 健康领航</p>
                </div>
            </div>
            <div class="con3_div2">