花了一天的时间给粉丝做了一个小米官网(高仿)

Posted 孙叫兽

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了花了一天的时间给粉丝做了一个小米官网(高仿)相关的知识,希望对你有一定的参考价值。

身为前端程序员,经常会找几个官网试试手,哈哈,这次拿小米官网试试手吧。

目录

 

 效果图:

项目结构

index.html

index.css

js

下载地址:点我下载


 效果图:

 

项目结构

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米官网</title>
	
	<link rel ="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/usual.css">
    <link rel = "stylesheet"  type ="text/css" href ="css/index.css"/>
	<link rel ="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
	<link rel ="stylesheet" type="text/css" href="fonts/iconfont.css"/>
	<script type ="text/javascript" src = "js/jquery-3.2.1.js"></script>
	<script type ="text/javascript" src = "js/slide.js"></script>
	<script type ="text/javascript" src = "js/xm-star.js"></script>
    <script type ="text/javascript" src = "js/main-page.js"></script>

</head>
<body>
	<!--header start-->
	<header>
        <!--头部新产品广告-->
		<div class="h-top-bg">
            <a href="#"></a>
        </div>

        <!--头部快捷导航-->
        <div class="h-bar">
            <div class="wrap clearFix">
                <div class="h-l fl">
                    <ul class = "nav">
                        <li><a href="#" target="_blank">小米商城</a></li>
                        <li>|</li>
                        <li><a href="#" target="_blank">MIUI</a></li>
                        <li>|</li>
                        <li><a href="#" target="_blank">米聊</a></li>
                        <li>|</li>
                        <li><a href="#" target="_blank">游戏</a></li>
                        <li>|</li>
                        <li><a href="#" target="_blank">多看阅读</a></li>
                        <li>|</li>
                        <li><a href="#" target="_blank">云服务</a></li>
                        <li>|</li>
                        <li><a href="#" target="_blank">金融</a></li>
                        <li>|</li>
                        <li><a href="#" target="_blank">小米商城移动版</a></li>
                        <li>|</li>
                        <li><a href="#" target="_blank">问题反馈</a></li>
                        <li>|</li>
                        <li>
                            <a href="">Select Region</a>
                            <div class="cover">
                                <div class="modal">
                                    <div class="title"></div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="h-r fr">
                    <div class="s-cart fr">
                        <a href="#" target = "_blank">
                            <i class="iconfont icon-gouwuche1"></i>
                            购物车 <span>( 0 )</span>
                        </a>
                        <div class="s-info">

                        </div>
                    </div>
                    <ul class = "nav fr">
                        <li><a href="#" target = "_blank">登录</a></li>
                        <li>|</li>
                        <li><a href="#" target ="_blank">注册</a></li>
                        <li>|</li>
                        <li><a href="" target ="_black">消息通知</a></li>
                    </ul>
                </div>
            </div>
        </div>

	   

                        <a href="javascript:;">
                            <img src="images/home-elect/xmad_14951679051921_JWQpV.jpg" alt="#" width="234" height="300">
                        </a>
                    </div>
                    <div class="b-right span16 fr">
                        <ul class ="brick-list brick-list-hot active clearFix">
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">2099元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490077454.46128587!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 49英寸</a></h2>
                                <p class="small">6月1日-3日,下单立减300</p>
                                <p class="price">2599元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1469583247.6157588!220x220.jpg" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米笔记本Air 13.3英寸</a></h2>
                                <p class="small">独立显卡,全金属机身,超长续航</p>
                                <p class="price">4999元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490604824.19051012!220x220.jpg" alt="#" width="150" height="150">
                               
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490604824.19051012!220x220.jpg" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米笔记本Air 12.5英寸</a></h2>
                                <p class="small">独立显卡,全金属机身,超长续航</p>
                                <p class="price">3599元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">2099元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">2099元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">2099元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <div class="sub-item">
                                    <a href="javascript:;" class="img">
                                        <img src="images/home-elect/pms_1490770630.65576964!220x220.png" alt="#" width="80" height="80">
                                    </a>
                                    <h2 class="pro-name"><a href="javascript:;">米家IH电饭煲 4L</a></h2>
                                    <p class="price">2099元</p>
                                </div>
                                <div class="sub-item">
                                    <a href="javascript:;" class="icon">
                                        <i class="iconfont icon-jiantou5"></i>
                                    </a>
                                    <a href="javascript:;" class="more-link">
                                        浏览更多
                                        <small >热门</small>
                                    </a>
                                </div>
                            </li>
                        </ul>
                        <ul class ="brick-list brick-list-hot clearFix">
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1474944620.67265595!220x220.jpg" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视3s 55英寸</a></h2>
                                <p class="small">6月1日-3日,直降400元</p>
                                <p class="price">3599元 <s>3999元</s></p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490077569.08131612!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 65英寸</a></h2>
                                <p class="small">6月1日-3日,下单立减1000</p>
                                <p class="price">5699元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490778061.59475600!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">电视4A 49英寸人工智能语音版</a></h2>
                                <p class="small">6月1日~3日,下单立减200元</p>
                                <p class="price">2899元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490778355.67093197!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米笔记本Air 12.5英寸</a></h2>
                                <p class="small">独立显卡,全金属机身,超长续航</p>
                                <p class="price">3599元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">2099元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">2099元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1479190789.95594557!220x220.jpg" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米盒子3s</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">299元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <div class="sub-item">
                                    <a href="javascript:;" class="img">
                                        <img src="images/home-elect/pms_1490770630.65576964!220x220.png" alt="#" width="80" height="80">
                                    </a>
                                    <h2 class="pro-name"><a href="javascript:;">米家IH电饭煲 4L</a></h2>
                                    <p class="price">2099元</p>
                                </div>
                                <div class="sub-item">
                                    <a href="javascript:;" class="icon">
                                        <i class="iconfont icon-jiantou5"></i>
                                    </a>
                                    <a href="javascript:;" class="more-link">
                                        浏览更多
                                        <small >热门</small>
                                    </a>
                                </div>
                            </li>
                        </ul>
                        <ul class ="brick-list brick-list-hot clearFix">
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">2099元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490077454.46128587!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 49英寸</a></h2>
                                <p class="small">6月1日-3日,下单立减300</p>
                                <p class="price">2599元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1478763592.13343555!220x220.jpg" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米笔记本Air 13.3英寸</a></h2>
                                <p class="small">独立显卡,全金属机身,超长续航</p>
                                <p class="price">4999元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490702347.3628109!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米笔记本Air 12.5英寸</a></h2>
                                <p class="small">独立显卡,全金属机身,超长续航</p>
                                <p class="price">3599元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">2099元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490595812.95661863!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">2099元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">2099元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <div class="sub-item">
                                    <a href="javascript:;" class="img">
                                        <img src="images/home-elect/pms_1490770630.65576964!220x220.png" alt="#" width="80" height="80">
                                    </a>
                                    <h2 class="pro-name"><a href="javascript:;">米家IH电饭煲 4L</a></h2>
                                    <p class="price">2099元</p>
                                </div>
                                <div class="sub-item">
                                    <a href="javascript:;" class="icon">
                                        <i class="iconfont icon-jiantou5"></i>
                                    </a>
                                    <a href="javascript:;" class="more-link">
                                        浏览更多
                                        <small >热门</small>
                                    </a>
                                </div>
                            </li>
                        </ul>
                        <ul class ="brick-list brick-list-hot clearFix">
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1478678718.61531371!220x220.jpg" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">2099元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1478678718.61531371!220x220.jpg" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 49英寸</a></h2>
                                <p class="small">6月1日-3日,下单立减300</p>
                                <p class="price">2599元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/T1vJE_Bv_T1RXrhCrK!220x220.jpg" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米笔记本Air 13.3英寸</a></h2>
                                <p class="small">独立显卡,全金属机身,超长续航</p>
                                <p class="price">4999元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490604824.19051012!220x220.jpg" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米笔记本Air 12.5英寸</a></h2>
                                <p class="small">独立显卡,全金属机身,超长续航</p>
                                <p class="price">3599元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">2099元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490077058.71391368!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">2099元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490756071.3088664!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">2099元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <div class="sub-item">
                                    <a href="javascript:;" class="img">
                                        <img src="images/home-elect/pms_1490770630.65576964!220x220.png" alt="#" width="80" height="80">
                                    </a>
                                    <h2 class="pro-name"><a href="javascript:;">米家IH电饭煲 4L</a></h2>
                                    <p class="price">2099元</p>
                                </div>
                                <div class="sub-item">
                                    <a href="javascript:;" class="icon">
                                        <i class="iconfont icon-jiantou5"></i>
                                    </a>
                                    <a href="javascript:;" class="more-link">
                                        浏览更多
                                        <small >热门</small>
                                    </a>
                                </div>
                            </li>
                        </ul>
                        <ul class ="brick-list brick-list-hot clearFix">
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/T1RRCjBKJv1RXrhCrK.jpg" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">2099元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/T1RRCjBKJv1RXrhCrK.jpg" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 49英寸</a></h2>
                                <p class="small">6月1日-3日,下单立减300</p>
                                <p class="price">2599元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1469429887.76894954!220x220.jpg" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米笔记本Air 13.3英寸</a></h2>
                                <p class="small">独立显卡,全金属机身,超长续航</p>
                                <p class="price">4999元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/T1G9Y_BmCv1RXrhCrK.jpg" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米笔记本Air 12.5英寸</a></h2>
                                <p class="small">独立显卡,全金属机身,超长续航</p>
                                <p class="price">3599元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/6ddc1df6-ce8e-4cb5-a26a-b5ef80f1adf7.jpg" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">2099元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/6ddc1df6-ce8e-4cb5-a26a-b5ef80f1adf7.jpg" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">2099元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                    </p>
                                    <p class="author">
                                        来自于 zk 的评价
                                    </p>
                                </div>
                            </li>
                            <li class="brick-item">
                                <a href="javascript:;" class="img">
                                    <img src="images/home-elect/pms_1490756071.3088664!220x220.png" alt="#" width="150" height="150">
                                </a>
                                <h2 class="pro-name"><a href="javascript:;">小米电视4A 43英寸</a></h2>
                                <p class="small">6月1日-3日,限量送儿童会员年卡</p>
                                <p class="price">2099元</p>
                                <div class="flag">享9.8折</div>
                                <div class="review">
                                    <p class="content">
                                        速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会..

以上是关于花了一天的时间给粉丝做了一个小米官网(高仿)的主要内容,如果未能解决你的问题,请参考以下文章

VCenter的经验教训-为了偷懒5分钟结果花了一天的时间来查错

花了一天的时间,地板式扫盲了vue3中所有API盲点

花了一天的时间,地板式扫盲了vue3中所有API盲点

花了一天的时间,地板式扫盲了vue3中所有API盲点

简单文章管理系统

Vue全家桶高仿小米商城