HTML5+CSS3 implementation of Huawei official website (full version)

foreword

This article is to analyze a static Huawei official website page implemented with HTML5+CSS3. The homepage of the article also includes the Huawei Mall, Xiaomi official website, Xiaomi Mall, etc. that have been written before. You can move to the homepage if you need it. The source code + picture material is attached at the end of the article.

1. Effect display

2. Code Analysis

1. Head navigation bar

The header navigation bar is to first write a div to set the width and height, and then put a ul list to arrange and display the elements

 <div class="head1">
        <div class="head1_1">
            <a href="">登录</a>
            <a href="">选择区域/语言</a>
            <a href="">集团网站</a>
        </div>
    </div>
     <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>

2. Middle part

The middle part is a big div and some small divs are placed inside the div, and then the elements are added

   <div class="con5">
            <div class="con3_demo1">
                <h2 style="width: 175px;margin-left: 531px;">信息与活动</h2>
            </div>

            <div class="con5_div1">
                <div class="con5_div1_demo">展会活动</div>
                <img src="./imgs/b2.jpg" alt="">
                <div class="con5_div1_div">
                    <p style="font-weight: bold;font-size: 18px;color: #333333;">SNEC光伏大会暨(上海)展览会</p>
                    <p style="margin-top: 12px;margin-bottom: 22px;">
                        <span>中国，上海</span>
                        <span style="display: inline-block;width: 55px;">&nbsp;</span>
                        <span>2023年5月23日 - 26日</span>
                    </p>
                    <p style="width: 348px;color: #666;font-size: 14px;">
                        本次大会主题为“融智于光，共创未来”，华为智能光伏以产业引领、融合创新、生态共赢为目标，重磅发布大型地面、工商业、户用三大场景解决方案。</p>
                </div>
            </div>
            <div class="con5_div1">
                <div class="con5_div1_demo">展会活动</div>
                <img src="./imgs/b1.jpg" alt="">
                <div class="con5_div1_div">
                    <p style="font-weight: bold;font-size: 18px;color: #333333;">华为全球智慧金融峰会2023</p>
                    <p style="margin-top: 12px;margin-bottom: 22px;">
                        <span>中国，上海</span>
                        <span style="display: inline-block;width: 55px;">&nbsp;</span>
                        <span>2023年6月7日 - 8日</span>
                    </p>
                    <p style="width: 348px;color: #666;font-size: 14px;">
                        本次大会针对未来金融行业发展趋势，深入探讨如何加速技术应用，敏捷创新提升生产力，加速推进金融行业数字化转型。</p>
                </div>
            </div>
            <div class="con5_div1" style="margin-right: 0;">
                <div class="con5_div1_demo">新闻</div>
                <div class="con5_demo1">
                    <a href="" class="con5_demo1_a">
                        <h4 style="margin-bottom: 15px; color: #333333;">“新应用，新数据，新韧性”，华为提出面向YB数据时代的存储产业演进方向</h4>
                        <p style="color: #666666;">2023年05月24日</p>
                    </a>
                    <a href="" class="con5_demo1_a">
                        <h4 style="margin-bottom: 15px; color: #333333;">华为自动驾驶网络解决方案蝉联GlobalData p网络资源编排能力业界领导者</h4>
                        <p style="color: #666666;">2023年05月23日</p>
                    </a>
                    <a href="" class="con5_demo1_a">
                        <h4 style="margin-bottom: 15px; color: #333333;">华为与合作伙伴公布墨西哥尤卡坦州野生动物保护成果</h4>
                        <p style="color: #666666;">2023年05月18日</p>
                    </a>
                    <a href="" class="con5_demo1_a">
                        <h4 style="margin-bottom: 15px; color: #333333;">华为:跃升数字生产力，共促高质量发展</h4>
                        <p style="color: #666666;">2023年05月17日</p>
                    </a>
                </div>
            </div>

            <div class="con6">
                <div class="con6_1">更多活动</div>
                <div class="con6_1">更多精彩</div>
            </div>
        </div>

3. The end of the page

The end of the page can be implemented with a ul list or a table form, or you can use a layout to achieve it more conveniently

  <div class="end">
        <div class="last">
            <div class="box1">
                <span class="a1"><a href="#">首页</a></span>
                <span class="a2">
                    <input type="search" placeholder="搜索huawei.com" style="font-size: 16px;">
                </span>
            </div>
            <div class="box2">
                <div class="y1">
                    <h4>
                        关于华为
                    </h4>
                    <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>
                    </ul>
                </div>
                <div class="y2">
                    <h4>
                        新闻与活动
                    </h4>
                    <ul>
                        <li>
                            <a href="#">新闻</a>
                        </li>
                        <li>
                            <a href="#">展会活动</a>
                        </li>
                        <li>
                            <a href="#">多媒体</a>
                        </li>
                    </ul>
                </div>
                <div class="y3">
                    <h4>
                        发现华为
                    </h4>
                    <ul>
                        <li>
                            <a href="#">华为技术专栏</a>
                        </li>
                        <li>
                            <a href="#">跃升数字生产力</a>
                        </li>
                        <li>
                            <a href="#">智能世界2030报告</a>
                        </li>
                        <li>
                            <a href="#">迈向智能世界白皮书</a>
                        </li>
                        <li>
                            <a href="#">出版物</a>
                        </li>
                    </ul>
                </div>
                <div class="y4">
                    <h4>
                        我们的产品
                    </h4>
                    <ul>
                        <li>
                            <a href="#">个人及家庭产品</a>
                        </li>
                        <li>
                            <a href="#">企业业务产品</a>
                        </li>
                        <li>
                            <a href="#">运营商网络产品</a>
                        </li>
                        <li>
                            <a href="#">华为云服务</a>
                        </li>
                    </ul>
                </div>
                <div class="y5">
                    <h4>
                        技术支持
                    </h4>
                    <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="box3">
                <div class="y6">
                    <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 class="y7">
                    <a href="#"><img src="imgs/新浪.png" alt=""></a>
                    <a href="#"><img src="imgs/in.png" alt=""></a>
                    <a href="#"><img src="imgs/微信.png" alt=""></a>
                    <a href="#"><img src="imgs/头条样式.png" alt=""></a>
                    <a href="#"><img src="imgs/知识.png" alt=""></a>
                </div>
            </div>
        </div>
        <div class="lastest">
            <div class="y10">
                <ul>
                    <li>@2023华为技术有限公司</li>
                    <li><a href="#">粤A2-20044005号</a></li>
                    <li><a href="#">粤公网安备4403072002388号</a></li>
                    <li><em>|</em></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>

3. Summary

This webpage only uses html and css knowledge. If you have any questions, you can point them out in the comment area or private message me.

4. Source code + image material

Link: https://pan.baidu.com/s/1fp0oAGvpli7a8O69bC5TCA?pwd=ojbk
Extraction code: ojbk