HTML5+CSS3实现小米官网（完整版）

红太狼 2024-03-26 20:22 72阅读 0赞

## 前言 ##

小米官网其实是一个结构非常简单的网页，相比与小米商城，难度降低了很多很多。我也写过一次小米商城，可以移步到我的主页。本篇文章简单分析一下小米官网的静态结构，文章末尾附源代码和素材。

## 一、效果展示 ##

先展示一下页面的效果吧！  
![在这里插入图片描述][d7c3bed2a96744ca80e80e605d2f5da6.png]  
![在这里插入图片描述][33fd648104dd412dbf53790a0c99803c.png]  
![在这里插入图片描述][254f3ee1b5374a17bac98b8cf8f14926.png]  
![在这里插入图片描述][7d5969e7c4164e8787542bb9ec8a4b52.png]  
![在这里插入图片描述][61d29eca0798434eabd854519d2ee243.png]  
![在这里插入图片描述][7ae13eca279c47908102679629cf44f8.png]  
![在这里插入图片描述][297401b63c06409d8e921a122f3ef22c.png]  
![在这里插入图片描述][ee164811943e4ae0bffcfa83efedc820.png]

## 二、 代码分析 ##

#### 1. 头部导航栏 ####

头部导航栏可以用 fixed 定位，让导航栏一直固定再最上面，不随着页面移动而移动。

<div class="head1">
                <img src="../imgs/logo.png" alt=""
                    style="width: 34px;height: 34px;display: inline-block;position: absolute;top: 16px;left: 37px;">
                <div class="head1_1" style="margin: 0 auto;">
    
                    <ul style="list-style-type: none;">
                        <li class="head1_1_li" style="margin-left: 80px;">
                            <a href="#" id="dingbu">小米官网</a>
    
                        </li>
                        <li class="head1_1_li">
                            <a href="../../小米主页面/html/work.html">小米商城</a>
    
                        </li>
                        <li class="head1_1_li">
                            <a href="#">小米影像</a>
    
                        </li>
                        <li class="head1_1_li">
                            <a style="width:18px ;" href="#">MIUI</a>
    
                        </li>
                        <li class="head1_1_li">
                            <a style="width:36px" href="#" style="margin-left: 0px;">loT</a>
    
                        </li>
                        <li class="head1_1_li">
                            <a href="#" style="margin-left: 0px;">云服务</a>
    
                        </li>
                        <li class="head1_1_li">
                            <a href="#" style="margin-left: 0px;">天星数科</a>
    
                        </li>
                        <li class="head1_1_li">
                            <a href="#">有品</a>
    
                        </li>
                        <li class="head1_1_li">
                            <a href="#" style="margin-left: 0px;">小爱开放平台</a>
    
                        </li>
                        <li class="head1_1_li">
                            <a href="#">企业团购</a>
    
                        </li>
                        <li class="head1_1_li">
    
                            <a href="#">Location</a>
    
    
                        </li>
                        <li class="head1_1_li" style="width: 90px;">
    
                        </li>
                        <li class="head1_1_li" style="width: 60px;">
                            <a href="#">登录</a>
    
                        </li>
    
    
                        <li class="head1_1_li" style="width: 10px;">
    
                            <span class="head1_1_s" style="color: #ffffff;">|</span>
                        </li>
                        <li class="head1_1_li">
                            <a href="#">注册</a>
    
                        </li>
    
                    </ul>
                </div>
            </div>

#### 2. 中间部分图片 ####

中间部分图片是静态的，很简单，直接用 img标签 插入图片就行，不需要实现过多功能。

#### 3.轮播图部分 ####

中间部分地方用到了轮播图，我用的是 动画 效果实现的，即 先建立一个大盒子，然后将图片都放入这个大盒子，然后改变图片的坐标，让图片逐个显示出来。

<div class="con5">
                            <a href="#" target="_blank"><img src="../imgs/lun1.webp" /></a>
                            <a href="#" target="_blank"><img src="../imgs/lun2.webp" /></a>
                            <a href="#" target="_blank"><img src="../imgs/lun3.webp" /></a>
                            <a href="#" target="_blank"><img src="../imgs/lun4.webp" /></a>
                            <a href="#" target="_blank"><img src="../imgs/lun5.webp" /></a>
    
      </div>
       .con5 {
             width: 7600px;
             height: 666px;
             animation: text 15s infinite backwards;
             /*消除图片间隔*/
             margin-bottom: 10px;
         }
    
         .con5 img {
             width: 1518px;
             height: 666px;
             float: left;
         }
    
         @keyframes text {
    
             /*0%-20%是播放下一个图片，0%-10%是图片暂停的时间*/
             0%,
             15% {
                 margin-left: 0px;
             }
    
             20%,
             35% {
                 margin-left: -1518px;
             }
    
             40%,
             55% {
                 margin-left: -3036px;
             }
    
             60%,
             750% {
                 margin-left: -4554px;
             }
    
             80%,
             100% {
                 margin-left: -6072px;
             }
    
    
    
         }

#### 4. 页面尾部 ####

页面尾部用 ul 列表或者table表格实现就行，或者也可以使用布局来更方便的实现。

<div class="er1_div2">
                        <table class="er1_tab" cellspacing="9px" ;>
                            <tr>
                                <td>选购指南                     
                                </td>
    
                                <td>服务中心                     
                                </td>
                                <td>线下门店                     
                                </td>
                                <td>关于小米                     
                                </td>
                                <td>关注我们          
                                </td>
                            </tr>
                            <tr>
                                <td> </td>
                            </tr>
    
                            <tr>
                                <td class="er1_td"><a class="er1_td_a">手机</a></td>
                                <td class="er1_td"><a class="er1_td_a">申请售后</a> </td>
                                <td class="er1_td"><a class="er1_td_a">小米之家</a> </td>
                                <td class="er1_td"><a class="er1_td_a">了解小米</a> </td>
                                <td class="er1_td"><a class="er1_td_a">新浪微博</a> </td>
                            </tr>
                            <tr>
                                <td class="er1_td"><a class="er1_td_a" href="#">电视</a></td>
                                <td class="er1_td"><a class="er1_td_a" href="#">售后政策</a></td>
                                <td class="er1_td"><a class="er1_td_a" href="#">服务网点</a></td>
                                <td class="er1_td"><a class="er1_td_a" href="#">加入小米</a></td>
                                <td class="er1_td"><a class="er1_td_a" href="#">官方微信</a></td>
                            </tr>
                            <tr>
                                <td class="er1_td"><a class="er1_td_a" href="#">笔记本</a></td>
                                <td class="er1_td"><a class="er1_td_a" href="#">维修服务价格</a></td>
                                <td class="er1_td"><a class="er1_td_a" href="#">授权体验店/专区</a></td>
                                <td class="er1_td"><a class="er1_td_a" href="#">投资者关系</a></td>
                                <td class="er1_td"><a class="er1_td_a" href="#">联系我们</a></td>
                            </tr>
                            <tr>
                                <td class="er1_td"><a class="er1_td_a" href="#">平板</a></td>
                                <td class="er1_td"><a class="er1_td_a" href="#">订单查询</a></td>
                                <td class="er1_td"><a href="#"></a></td>
                                <td class="er1_td"><a class="er1_td_a" href="#">企业社会责任</a></td>
                                <td class="er1_td"><a class="er1_td_a" href="#">公益基金会</a></td>
                            </tr>
                            <tr>
                                <td class="er1_td"><a class="er1_td_a" href="#">穿戴</a></td>
                                <td class="er1_td"><a class="er1_td_a" href="#">以旧换新</a></td>
                                <td class="er1_td"><a href="#"></a></td>
                                <td class="er1_td"><a class="er1_td_a" href="#">廉洁举报</a></td>
                                <td class="er1_td"><a class="er1_td_a" href="#"></a></td>
                            </tr>
                            <tr>
                                <td class="er1_td"><a class="er1_td_a" href="#">耳机</a></td>
                                <td class="er1_td"><a class="er1_td_a" href="#">保障服务</a></td>
                            </tr>
                            <tr>
                                <td class="er1_td"><a class="er1_td_a" href="#">家电</a></td>
                                <td class="er1_td"><a class="er1_td_a" href="#">防伪查询</a></td>
                            </tr>
                            <tr>
                                <td class="er1_td"><a class="er1_td_a" href="#">路由器</a></td>
                                <td class="er1_td"><a class="er1_td_a" href="#">F码通道</a></td>
                            </tr>
                            <tr>
                                <td class="er1_td"><a class="er1_td_a" href="#">音箱</a></td>
                            </tr>
                            <tr>
                                <td class="er1_td"><a class="er1_td_a" href="#">配件</a></td>
                            </tr>
                        </table>
                        <div class="er1_div3">
                            <p class="er1_div3_p1">400-100-5678</p>
                            <p class="er1_div3_p2">8:00-18:00(仅收市话费)</p>
                            <a href="#" class="er1_div3_a">
                                人工客服
                            </a>
                        </div>
                    </div>

## 三、结语 ##

该网页只用到了html+css。希望这篇文章能够帮助到大家，如果有任何问题都可以在评论区或者私信向我提出。

## 四、源代码+图片素材 ##

链接：https://pan.baidu.com/s/1uRW6P0\_StmU9bPxsM8Gupg?pwd=ojbk  
提取码：ojbk

[d7c3bed2a96744ca80e80e605d2f5da6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8ab220c8d6c947e29e4f06ad1032dabc.png
[33fd648104dd412dbf53790a0c99803c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/df16f756d2b044b0a2410428a5a5b5e9.png
[254f3ee1b5374a17bac98b8cf8f14926.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/16ec7ffd7a5c4ad3a20aee9e292b405d.png
[7d5969e7c4164e8787542bb9ec8a4b52.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/26219f059a9e4b0896f5aedc1547073d.png
[61d29eca0798434eabd854519d2ee243.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0712e91a9b8c4e5ea3bc52ba18dd4178.png
[7ae13eca279c47908102679629cf44f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2321f0e9be5641e2a2ddcf4ae6a09baa.png
[297401b63c06409d8e921a122f3ef22c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/7b0a62dbf9934fe6adb751c69e6785cf.png
[ee164811943e4ae0bffcfa83efedc820.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/23246806a7754138855319b13ffbbba9.png