精华内容
下载资源
问答
  • 花了一天的时间给粉丝做了一个小米官网(高仿)

    万次阅读 多人点赞 2021-05-07 22:51:07
    再来说说小米空气净化器,北方的天气雾霾越来越常态,这就迫切需要台性价高的空气净化 来自于 爱疯911 的评价 小米净水器 | 1299元 这箱子很,外观漂亮,实用性强。很轻,有点软但不影响它的坚固。 来自于 ...

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

    目录

     

     效果图:

    项目结构

    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">
                                            速度很快,外观漂亮,分量很足! 每次开机黄灯都亮一会...
                                        </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/T1tzL_BjYT1RXrhCrK!220x220.jpg" 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>
                        </div>
                    </div>
                </div>
    
                <!--为你推荐-->
                <div class="recommend">
                    <div class="wrap">
                        <div class="title">
                            <p>为你推荐</p>
                            <div class="btn-group">
                                <i class="pre iconfont icon-fanhui1 fl "></i>
                                <i class="next iconfont icon-fanhui fl disabled"></i>
                            </div>
                        </div>
                        <div class="slider">
                            <ul class="brick-list clearFix">
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/bea012b2-b439-4df8-bbf8-0733f5a19630.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">小米Note 2</a></h3>
                                    <p class="price">2799元起</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/5e2eb710-a99f-4235-ac5c-1b20b1e6c3b6.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">小米5s 64GB</a></h3>
                                    <p class="price">1999元</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/e991f1e2-20d8-40c3-bf1d-012b122c986b.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">小米5s Plus</a></h3>
                                    <p class="price">2299元起</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/xmad_14926528960147_wJMsC.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">小米电视4A 49英寸 标准版</a></h3>
                                    <p class="price">2599元</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/725a37e3-78b7-4298-8098-c40097bf179d.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">小米笔记本</a></h3>
                                    <p class="price">3599元起</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/xmad_14917453512947_AmXkT.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">10000mAh小米移动电源2</a></h3>
                                    <p class="price">79元</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/6ef55907-bbed-49be-a2bb-be0821b5f7b8.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">小米手环 2</a></h3>
                                    <p class="price">149元</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/xmad_14954429057126_LsEIN.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">小米盒子3c</a></h3>
                                    <p class="price">199元</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/xmad_14878364411484_BzwLi.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">米家车载空气净化器</a></h3>
                                    <p class="price">449元</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/de35852a-1be5-4ef5-846f-dcdd2efcfea6.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">小米路由器3</a></h3>
                                    <p class="price">149元</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/bea012b2-b439-4df8-bbf8-0733f5a19630.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">小米Note 2</a></h3>
                                    <p class="price">2799元起</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/5e2eb710-a99f-4235-ac5c-1b20b1e6c3b6.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">小米5s 64GB</a></h3>
                                    <p class="price">1999元</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/e991f1e2-20d8-40c3-bf1d-012b122c986b.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">小米5s Plus</a></h3>
                                    <p class="price">2299元起</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/xmad_14926528960147_wJMsC.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">小米电视4A 49英寸 标准版</a></h3>
                                    <p class="price">2599元</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/725a37e3-78b7-4298-8098-c40097bf179d.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">小米笔记本</a></h3>
                                    <p class="price">3599元起</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/xmad_14917453512947_AmXkT.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">10000mAh小米移动电源2</a></h3>
                                    <p class="price">79元</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/6ef55907-bbed-49be-a2bb-be0821b5f7b8.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">小米手环 2</a></h3>
                                    <p class="price">149元</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/xmad_14954429057126_LsEIN.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">小米盒子3c</a></h3>
                                    <p class="price">199元</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/xmad_14878364411484_BzwLi.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">米家车载空气净化器</a></h3>
                                    <p class="price">449元</p>
                                </li>
                                <li>
                                    <a href="#" class="img">
                                        <img src="images/de35852a-1be5-4ef5-846f-dcdd2efcfea6.png" alt="" width="160" height="160">
                                    </a>
                                    <h3 class="pro-name"><a href="#">小米路由器3</a></h3>
                                    <p class="price">149元</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
    
                <!--热评产品-->
                <div class="hot-pd">
                    <div class="head">
                        <p class="title">周边</p>
                    </div>
                    <ul class="flex-box">
                        <li class="flex-item">
                             <a class="img" href="javascript:;">
                                <img src="images/hot-pd/05972209-0c29-4f2f-9844-09de1093ab02.jpg" alt="#" width="296" height="220">
                            </a>
                            <a class="review">先五星好评。再来说说小米空气净化器,北方的天气雾霾越来越常态,这就迫切需要一台性价比高的空气净化</a>
                            <p class="author">来自于  爱疯911  的评价</p>
                            <p class="pd-name"><a href="">小米净水器</a> | 1299元</p>
                        </li>
                        <li class="flex-item">
                            <a class="img" href="javascript:;">
                                <img src="images/hot-pd/a5886d24-b443-4a15-88ca-5dbd43b72de3.jpg" alt="#" width="296" height="220">
                            </a>
                            <a class="review">这箱子很好,外观漂亮,实用性强。很轻,有点软但不影响它的坚固。</a>
                            <p class="author">来自于  爱疯911  的评价</p>
                            <p class="pd-name"><a href="">小米净水器</a> | 1299元</p>
                        </li>
                        <li class="flex-item">
                            <a class="img" href="javascript:;">
                                <img src="images/hot-pd/8949026b-fa9a-4370-989b-5d5e2f149106.jpg" alt="#" width="296" height="220">
                            </a>
                            <a class="review">很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还是一如既往的简洁 要是有盒子就好了= ̄ω ̄=</a>
                            <p class="author">来自于  爱疯911  的评价</p>
                            <p class="pd-name"><a href="">小米净水器</a> | 1299元</p>
                        </li>
                        <li class="flex-item">
                            <a class="img" href="javascript:;">
                                <img src="images/hot-pd/7e051b10-ed56-43df-bd60-3780592a3345.jpg" alt="#" width="296" height="220">
                            </a>
                            <a class="review">有了它,妈妈再也不用担心我喝不到健康的水了。呵呵,良心产品,平民价格,对现在的水质起到了很好的改善作...</a>
                            <p class="author">来自于  爱疯911  的评价</p>
                            <p class="pd-name"><a href="">小米净水器</a> | 1299元</p>
                        </li>
                    </ul>
                </div>
    
                <!--内容-->
                <div class="content">
                    <div class="head">
                        <p class="title">内容</p>
                    </div>
                    <ul class="flex-box">
    
                        <!--图书-->
                        <li class="flex-item ">
                            <h2 class="title">图书</h2>
                            <div class="slider book">
                                <div class="slider-box">
                                    <input type="radio" id="btn1" name = "btn" checked>
                                    <label for="btn1"></label>
                                    <div class="slider-item">
                                        <h2 class="title"><a href="">哈利·波特与被诅咒的孩子</a></h2>
                                        <p class="abs"><a href="">“哈利·波特”第八个故事中文版震撼来袭!特别彩排版剧本!</a></p>
                                        <p class="price">29.37元</p>
                                        <a href="javascript:;" class ="img">
                                            <img src="images/hot-pd/5e5da924-84e3-4959-9e25-5891cdf30757.png" alt="#" width="216" height="154">
                                        </a>
                                    </div>
                                </div>
                               <div class="slider-box">
                                   <input type="radio" id="btn2" name = "btn">
                                   <label for="btn2"></label>
                                   <div class="slider-item">
                                       <h2 class="title"><a href="">好吗好的</a></h2>
                                       <p class="abs"><a href="">畅销作家大冰2016年新书!讲给你听,好吗好的!</a></p>
                                       <p class="price">17.99元</p>
                                       <a href="javascript:;" class ="img">
                                           <img src="images/hot-pd/61e1385e-54de-48f3-8717-5e4f4b1cdd14.png" alt="#" width="216" height="154">
                                       </a>
                                   </div>
                               </div>
                                <div class="slider-box">
                                    <input type="radio" id="btn3" name = "btn">
                                    <label for="btn3"></label>
                                    <div class="slider-item">
                                        <p class="abs">海量好书,享受精品阅读时光漂亮的中文排版,千万读者选择!</p>
                                        <a href="javascript:;" class="link-btn">前往多看阅读</a>
                                        <a href="javascript:;" class ="img">
                                            <img src="images/hot-pd/more-duokan.jpg" alt="#" width="216" height="154">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
    
                        <!--MIUI主题-->
                        <li class="flex-item">
                            <h2 class="title">MIUI 主题</h2>
                            <div class="slider theme">
                                <div class="slider-box">
                                    <input type="radio" id="btn4" name = "btn1" checked>
                                    <label for="btn4"></label>
                                    <div class="slider-item">
                                        <h2 class="title"><a href="">哆啦A梦:大雄的南极冰冰凉大冒险</a></h2>
                                        <p class="abs"><a href="">哆啦A梦剧场版定制主题</a></p>
                                        <p class="price">免费</p>
                                        <a href="javascript:;" class ="img">
                                            <img src="images/hot-pd/xmad_14962824771016_ciWtQ.jpg" alt="#" width="216" height="154">
                                        </a>
                                    </div>
                                </div>
                                <div class="slider-box">
                                    <input type="radio" id="btn5" name = "btn1">
                                    <label for="btn5"></label>
                                    <div class="slider-item">
                                        <h2 class="title"><a href="">小米Max 2官方主题</a></h2>
                                        <p class="abs"><a href="">兼顾左右手的“超级锁屏悬浮球”,单指一键直达APP</a></p>
                                        <p class="price">15米币</p>
                                        <a href="javascript:;" class ="img">
                                            <img src="images/hot-pd/xmad_1495694746648_lgqst.jpg" alt="#" width="216" height="154">
                                        </a>
                                    </div>
                                </div>
                                <div class="slider-box">
                                    <input type="radio" id="btn6" name = "btn1">
                                    <label for="btn6"></label>
                                    <div class="slider-item">
                                        <h2 class="title"><a href="">小米6</a></h2>
                                        <p class="abs"><a href="">3D动态变色,小米6官方主题炫丽出世!</a></p>
                                        <p class="price">12米币</p>
                                        <a href="javascript:;" class ="img">
                                            <img src="images/hot-pd/61e1385e-54de-48f3-8717-5e4f4b1cdd14.png" alt="#" width="216" height="154">
                                        </a>
                                    </div>
                                </div>
                                <div class="slider-box">
                                    <input type="radio" id="btn7" name = "btn1">
                                    <label for="btn7"></label>
                                    <div class="slider-item">
                                        <p class="abs">众多个性主题、百变锁屏与自由桌面让你的手机与众不同!</p>
                                        <a href="javascript:;" class="link-btn">前往MIUI主题市场</a>
                                        <a href="javascript:;" class ="img">
                                            <img src="images/hot-pd/more-duokan.jpg" alt="#" width="216" height="154">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
    
                        <!--游戏-->
                        <li class="flex-item">
                            <h2 class="title">游戏</h2>
                            <div class="slider game">
                                <div class="slider-box">
                                    <input type="radio" id="btn8" name = "btn2" checked>
                                    <label for="btn8"></label>
                                    <div class="slider-item">
                                        <h2 class="title"><a href="">米柚手游模拟器</a></h2>
                                        <p class="abs"><a href="">在电脑上玩遍小米所有手游</a></p>
                                        <p class="price">免费</p>
                                        <a href="javascript:;" class ="img">
                                            <img src="images/hot-pd/T1czW_BXCv1R4cSCrK.png" alt="#" width="216" height="154">
                                        </a>
                                    </div>
                                </div>
                                <div class="slider-box">
                                    <input type="radio" id="btn9" name = "btn2">
                                    <label for="btn9"></label>
                                    <div class="slider-item">
                                        <h2 class="title"><a href="">剑侠世界</a></h2>
                                        <p class="abs"><a href="">一生不容错过的浪漫武侠!!</a></p>
                                        <p class="price">免费</p>
                                        <a href="javascript:;" class ="img">
                                            <img src="images/hot-pd/695c909b-f541-4575-bace-d08b6465025b.jpg" alt="#" width="216" height="154">
                                        </a>
                                    </div>
                                </div>
                                <div class="slider-box">
                                    <input type="radio" id="btn10" name = "btn2">
                                    <label for="btn10"></label>
                                    <div class="slider-item">
                                        <h2 class="title"><a href="">老九门</a></h2>
                                        <p class="abs"><a href="">九门恩怨,盗墓笔记前传上线</a></p>
                                        <p class="price">免费</p>
                                        <a href="javascript:;" class ="img">
                                            <img src="images/hot-pd/6032cb36-587f-4366-89ef-aefed2546552.jpg" alt="#" width="216" height="154">
                                        </a>
                                    </div>
                                </div>
                                <div class="slider-box">
                                    <input type="radio" id="btn11" name = "btn2">
                                    <label for="btn11"></label>
                                    <div class="slider-item">
                                        <p class="abs">免费下载海量的手机游戏天天都有现金福利赠送</p>
                                        <a href="javascript:;" class="link-btn">前往小米游戏商店</a>
                                        <a href="javascript:;" class ="img">
                                            <img src="images/hot-pd/more-duokan.jpg" alt="#" width="216" height="154">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
    
                        <!--应用-->
                        <li class="flex-item">
                            <h2 class="title">应用</h2>
                            <div class="slider program">
                                <div class="slider-box">
                                    <input type="radio" id="btn12" name = "btn3" checked>
                                    <label for="btn12"></label>
                                    <div class="slider-item">
                                        <h2 class="title"><a href="">2017金米奖</a></h2>
                                        <p class="abs"><a href="">最优秀的应用和游戏</a></p>
                                        <p class="price"></p>
                                        <a href="javascript:;" class ="img">
                                            <img src="images/hot-pd/3332da7d-4056-4694-9548-c83b7b3af7d3.png" alt="#" width="216" height="154">
                                        </a>
                                    </div>
                                </div>
                                <div class="slider-box">
                                    <input type="radio" id="btn13" name = "btn3">
                                    <label for="btn13"></label>
                                    <div class="slider-item">
                                        <h2 class="title"><a href="">Forest</a></h2>
                                        <p class="abs"><a href="">帮助您专心于生活中每个重要时刻</a></p>
                                        <p class="price">免费</p>
                                        <a href="javascript:;" class ="img">
                                            <img src="images/hot-pd/T1TkKvBCKv1R4cSCrK.png" alt="#" width="216" height="154">
                                        </a>
                                    </div>
                                </div>
                                <div class="slider-box">
                                    <input type="radio" id="btn14" name = "btn3">
                                    <label for="btn14"></label>
                                    <div class="slider-item">
                                        <h2 class="title"><a href="">小米应用</a></h2>
                                        <p class="abs"><a href="">小米出品 必属精品</a></p>
                                        <p class="price">免费</p>
                                        <a href="javascript:;" class ="img">
                                            <img src="images/hot-pd/T15VZvB5Kv1R4cSCrK.png" alt="#" width="216" height="154">
                                        </a>
                                    </div>
                                </div>
                                <div class="slider-box">
                                    <input type="radio" id="btn15" name = "btn3">
                                    <label for="btn15"></label>
                                    <div class="slider-item">
                                        <p class="abs">帮助小米手机和其他安卓手机用户发现好用的安卓应用</p>
                                        <a href="javascript:;" class="link-btn">前往小米应用商店</a>
                                        <a href="javascript:;" class ="img">
                                            <img src="images/hot-pd/more-app.jpg" alt="#" width="216" height="154">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
    
                    </ul>
                </div>
    
                <!--视屏-->
                <div class="video">
                    <div class="head">
                        <p class="title">视屏</p>
                        <a href="javascript:;" class="btn">查看全部 <i class="iconfont icon-iconfontjiantou"></i></a>
                    </div>
                    <ul class="flex-box">
                        <li class="flex-item">
                            <a href="javascript:;" class ="img">
                                <img src="images/hot-pd/xmad_1492588199164_Jykpx.jpg" alt="#" width="296" height="180">
                            </a>
                            <a href="javascript" class="btn"><i class="iconfont icon-iconfontjiantou2eps"></i></a>
                            <h4 class="title"><a href="">听雷总讲述小米7年工艺探索之路</a></h4>
                            <p class="abs"><a href="">小米6,7年工艺探索的巅峰之作</a></p>
                        </li>
                        <li class="flex-item">
                            <a href="javascript:;" class ="img">
                                <img src="images/hot-pd/xmad_14925882923733_lghaJ.jpg" alt="#" width="296" height="180">
                            </a>
                            <a href="javascript" class="btn"><i class="iconfont icon-iconfontjiantou2eps"></i></a>
                            <h4 class="title"><a href="">小米6外观设计视频</a></h4>
                            <p class="abs"><a href="">震惊!小米6竟然如此之美</a></p>
                        </li>
                        <li class="flex-item">
                            <a href="javascript:;" class ="img">
                                <img src="images/hot-pd/xmad_14954491368955_oHlMm.jpg" alt="#" width="296" height="180">
                            </a>
                            <a href="javascript" class="btn"><i class="iconfont icon-iconfontjiantou2eps"></i></a>
                            <h4 class="title"><a href="">小米电视4 外观设计视频</a></h4>
                            <p class="abs"><a href="">美哭了!史上最美的小米电视</a></p>
                        </li>
                        <li class="flex-item">
                            <a href="javascript:;" class ="img">
                                <img src="images/hot-pd/xmad_14954492313573_fOVNG.jpg" alt="#" width="296" height="180">
                            </a>
                            <a href="javascript" class="btn"><i class="iconfont icon-iconfontjiantou2eps"></i></a>
                            <h4 class="title"><a href="">4.9mm极超薄电视的诞生揭秘</a></h4>
                            <p class="abs"><a href="">小米电视工程师讲述极致之作的背后故事</a></p>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
        <!--page-main end-->
    
    	<!--footer start-->
    	<footer id="footer">
            <div class="wrap">
                <div class="f-hd">
                    <ul class="service flex-box">
                        <li >
                            <a href="javascript:;">
                                <i class="iconfont icon-weixiu"></i>
                                预约维修服务
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="iconfont icon-iconfont7tian"></i>
                                7天无理由退货
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="iconfont icon-15tian"></i>
                                15天免费换货
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="iconfont icon-liwu"></i>
                                满150元包邮
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="iconfont icon-ditu"></i>
                                520余家售后网点
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="f-bd clearFix">
                    <div class="links">
                        <dl>
                            <dt>帮助中心</dt>
                            <dd><a href="javascript:;">账户管理</a></dd>
                            <dd><a href="javascript:;">购物指南</a></dd>
                            <dd><a href="javascript:;">订单操作</a></dd>
                        </dl>
                        <dl>
                            <dt>服务支持</dt>
                            <dd><a href="javascript:;">售后政策</a></dd>
                            <dd><a href="javascript:;">自助服务</a></dd>
                            <dd><a href="javascript:;">相关下载</a></dd>
                        </dl>
                        <dl>
                            <dt>线下门店</dt>
                            <dd><a href="javascript:;">小米之家</a></dd>
                            <dd><a href="javascript:;">服务网点</a></dd>
                            <dd><a href="javascript:;">零售网点</a></dd>
                        </dl>
                        <dl>
                            <dt>关于小米</dt>
                            <dd><a href="javascript:;">了解小米</a></dd>
                            <dd><a href="javascript:;">加入小米</a></dd>
                            <dd><a href="javascript:;">联系我们</a></dd>
                        </dl>
                        <dl>
                            <dt>关注我们</dt>
                            <dd><a href="javascript:;">新浪微博</a></dd>
                            <dd><a href="javascript:;">小米部落</a></dd>
                            <dd><a href="javascript:;">官方微信</a></dd>
                        </dl>
                        <dl>
                            <dt>特色服务</dt>
                            <dd><a href="javascript:;">F 码通道</a></dd>
                            <dd><a href="javascript:;">礼物码</a></dd>
                            <dd><a href="javascript:;">防伪查询</a></dd>
                        </dl>
                    </div>
                    <div class="contact fr">
                        <p class="phone">400-100-5678</p>
                        <p class="time">周一至周日 8:00-18:00</p>
                        <p>(仅收市话费)</p>
                        <a href="javascript:;" class="cs">
                            <i class="iconfont icon-duanxin"></i>
                            24小时在线客服
                        </a>
                    </div>
                </div>
                <div class="f-ft"></div>
            </div>
        </footer>
    	<!--footer end-->
    </body>
    </html>
    

    index.css

     

    .ui-wrapper
    {
        position: relative;
        margin: 0;
        padding: 0;
        *zoom: 1
    }
    
    .ui-wrapper img
    {
        display: block;
        max-width: 100%
    }
    
    .ui-wrapper .ui-viewport
    {
        -webkit-transform: translatez(0);
        -ms-transform: translatez(0);
        transform: translatez(0)
    }
    
    .ui-wrapper .ui-pager,.ui-wrapper .ui-controls-auto
    {
        position: absolute;
        left: 0;
        bottom: 20px;
        width: 100%;
        z-index: 999
    }
    
    .ui-wrapper .ui-loading
    {
        min-height: 50px;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999
    }
    
    .ui-wrapper .ui-pager
    {
        font-size: 12px;
        text-align: center;
        color: #666
    }
    
    .ui-wrapper .ui-pager .ui-pager-item,.ui-wrapper .ui-controls-auto .ui-controls-auto-item
    {
        display: inline-block;
        *zoom: 1;
        *display: inline
    }
    
    .ui-wrapper .ui-pager.ui-default-pager a
    {
        display: block;
        width: 6px;
        height: 6px;
        margin: 0 5px;
        border: 2px solid #fff;
        border-color: rgba(255,255,255,0.3);
        border-radius: 10px;
        text-align: left;
        text-indent: -9999px;
        overflow: hidden;
        _zoom: 1;
        background: #f5f5f5;
        background: rgba(0,0,0,0.4);
        -webkit-transition: all .2s;
        transition: all .2s
    }
    
    .ui-wrapper .ui-pager.ui-default-pager a:hover,.ui-wrapper .ui-pager.ui-default-pager a.active
    {
        background: #fff;
        background: rgba(255,255,255,0.4);
        border-color: #757575;
        border-color: rgba(0,0,0,0.4)
    }
    
    .ui-wrapper .ui-pager.ui-default-pager a:focus
    {
        outline: 0
    }
    
    .ui-wrapper .ui-prev
    {
        left: 0;
        background: url(//c1.mifile.cn/f/i/2014/cn/icon/icon-slides.png) no-repeat -84px 50%
    }
    
    .ui-wrapper .ui-next
    {
        right: 0;
        background: url(//c1.mifile.cn/f/i/2014/cn/icon/icon-slides.png) no-repeat -125px 50%
    }
    
    .ui-wrapper .ui-prev:hover
    {
        background-position: 0 50%
    }
    
    .ui-wrapper .ui-next:hover
    {
        background-position: -42px 50%
    }
    
    .ui-wrapper .ui-controls-direction a
    {
        position: absolute;
        top: 50%;
        z-index: 999;
        width: 41px;
        height: 69px;
        margin-top: -35px;
        text-indent: -9999px;
        overflow: hidden;
        _zoom: 1;
        outline: 0
    }
    
    .ui-wrapper .ui-controls-direction a.disabled
    {
        display: none
    }
    
    .xm-plain-box .box-hd
    {
        position: relative;
        height: 58px;
        -webkit-font-smoothing: antialiased
    }
    
    .xm-plain-box .box-hd .title
    {
        margin: 0;
        font-size: 22px;
        font-weight: 200;
        line-height: 58px;
        color: #333
    }
    
    .xm-plain-box .box-hd .title small
    {
        margin-left: 10px;
        font-size: 14px
    }
    
    .xm-plain-box .box-hd .title .tip
    {
        color: #757575
    }
    
    .xm-plain-box .box-hd .more
    {
        position: absolute;
        top: 0;
        right: 0
    }
    
    .xm-plain-box .box-hd .more .more-link
    {
        font-size: 16px;
        line-height: 58px;
        color: #424242;
        -webkit-transition: all .4s;
        transition: all .4s
    }
    
    .xm-plain-box .box-hd .more .more-link:hover
    {
        color: #ff6700
    }
    
    .xm-plain-box .box-hd .more .more-link:hover .iconfont
    {
        background: #ff6700
    }
    
    .xm-plain-box .box-hd .more .more-link .iconfont
    {
        width: 12px;
        height: 12px;
        padding: 4px;
        margin-left: 8px;
        border-radius: 16px;
        font-size: 12px;
        line-height: 12px;
        background: #b0b0b0;
        color: #fff;
        vertical-align: 1px;
        -webkit-transition: all .4s;
        transition: all .4s
    }
    
    .xm-plain-box .box-hd .more .control
    {
        margin-left: -1px
    }
    
    .xm-plain-box .box-hd .more .tab-list
    {
        margin: 0;
        padding: 16px 0 0;
        list-style-type: none;
        font-size: 16px
    }
    
    .xm-plain-box .box-hd .more .tab-list li
    {
        display: inline-block;
        *zoom: 1;
        *display: inline;
        padding: 0;
        margin: 0 15px;
        color: #424242;
        border-bottom: 2px solid #f5f5f5;
        border-bottom: 2px solid transparent;
        -webkit-transition: border-color .5s;
        transition: border-color .5s;
        cursor: pointer
    }
    
    .xm-plain-box .box-hd .more .tab-list li:hover,.xm-plain-box .box-hd .more .tab-list li.tab-active
    {
        color: #ff6700;
        border-bottom: 2px solid #ff6700
    }
    
    .brick-list,.brick-promo-list
    {
        height: 614px;
        margin: 0;
        padding: 0;
        list-style-type: none
    }
    
    .brick-list
    {
        width: 992px
    }
    
    .brick-promo-list a
    {
        display: block;
        width: 100%;
        height: 100%
    }
    
    .brick-promo-list img
    {
        width: 234px
    }
    
    .brick-promo-list .brick-item-l img
    {
        height: 614px
    }
    
    .brick-promo-list .brick-item-m
    {
        height: 300px;
        padding: 0
    }
    
    .brick-promo-list .brick-item-m img
    {
        height: 300px
    }
    
    .brick-promo-list .brick-item-s img
    {
        height: 143px
    }
    
    .brick-item
    {
        position: relative;
        z-index: 1;
        float: left;
        width: 234px;
        margin-left: 14px;
        margin-bottom: 14px;
        background: #fff;
        -webkit-transition: all .2s linear;
        transition: all .2s linear
    }
    
    .brick-item:hover
    {
        z-index: 2
    }
    
    .brick-item .flag
    {
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 2;
        width: 64px;
        height: 20px;
        margin-left: -32px;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        color: #fff
    }
    
    .brick-item .flag-saleoff
    {
        background-color: #e53935
    }
    
    .brick-item .flag-postfree
    {
        background-color: #ffac13;
        z-index: 4
    }
    
    .brick-item .flag-gift
    {
        background-color: #2196f3;
        z-index: 3
    }
    
    .brick-item .flag-new
    {
        background-color: #83c44e;
        z-index: 5
    }
    
    .brick-item-l
    {
        height: 614px
    }
    
    .brick-item-m
    {
        height: 246px;
        padding: 34px 0 20px;
        *zoom: 1
    }
    
    .brick-item-m .figure-img
    {
        width: 150px;
        height: 150px;
        margin: 0 auto 18px
    }
    
    .brick-item-m .figure-img a
    {
        display: block
    }
    
    .brick-item-m .figure-img img
    {
        width: 150px;
        height: 150px
    }
    
    .brick-item-m .title
    {
        margin: 0 10px;
        font-size: 14px;
        font-weight: 400;
        text-align: center
    }
    
    .brick-item-m .title,.brick-item-m .title a
    {
        color: #333
    }
    
    .brick-item-m .title a
    {
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        _zoom: 1
    }
    
    .brick-item-m .desc
    {
        margin: 0 10px 10px;
        height: 18px;
        font-size: 12px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        _zoom: 1;
        color: #b0b0b0
    }
    
    .brick-item-m .price
    {
        margin: 0 10px 10px;
        text-align: center;
        color: #ff6700
    }
    
    .brick-item-m .price del
    {
        color: #b0b0b0
    }
    
    .brick-item-m .rank
    {
        margin: 0 10px;
        font-size: 12px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        _zoom: 1;
        color: #b0b0b0
    }
    
    .brick-item-m .review-wrapper
    {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 3;
        width: 234px;
        height: 0;
        overflow: hidden;
        _zoom: 1;
        font-size: 12px;
        background: #ff6700;
        opacity: 0;
        filter: alpha(opacity=0)\9;
        -webkit-transition: all .2s linear;
        transition: all .2s linear
    }
    
    .brick-item-m .review-wrapper a
    {
        display: block;
        padding: 8px 30px;
        outline: 0
    }
    
    .brick-item-m .review,.brick-item-m .author
    {
        display: block
    }
    
    .brick-item-m .review
    {
        margin-bottom: 5px;
        color: #fff
    }
    
    .brick-item-m .author
    {
        color: #fff;
        color: rgba(255,255,255,0.6)
    }
    
    .brick-item-m .date
    {
        margin-left: 6px
    }
    
    .brick-item-m-2
    {
        height: 260px;
        padding: 20px 0
    }
    
    .brick-item-m-2 .figure-img
    {
        width: 160px;
        height: 160px
    }
    
    .brick-item-m-2 .figure-img img
    {
        width: 160px;
        height: 160px
    }
    
    .brick-item-m-2 .title
    {
        margin: 0 10px 2px
    }
    
    .brick-item-m-2 .price
    {
        margin: 0 10px 14px
    }
    
    .brick-item-s
    {
        height: 93px;
        padding-top: 50px
    }
    
    .brick-item-s .figure-img
    {
        position: absolute;
        right: 20px;
        top: 32px;
        width: 80px;
        height: 80px
    }
    
    .brick-item-s .figure-img a
    {
        display: block
    }
    
    .brick-item-s .figure-img img
    {
        width: 80px;
        height: 80px
    }
    
    .brick-item-s .figure-more
    {
        position: absolute;
        right: 35px;
        top: 48px;
        width: 48px;
        height: 48px
    }
    
    .brick-item-s .figure-more a
    {
        display: block;
        color: #ff6700
    }
    
    .brick-item-s .title
    {
        margin: -10px 110px 5px 30px;
        font-size: 14px;
        font-weight: 400
    }
    
    .brick-item-s .title,.brick-item-s .title a
    {
        color: #333
    }
    
    .brick-item-s .title a
    {
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        _zoom: 1
    }
    
    .brick-item-s .price
    {
        margin: 0 110px 0 30px;
        font-size: 12px;
        color: #ff6700
    }
    
    .brick-item-s .price .num
    {
        font-size: 14px
    }
    
    .brick-item-s .more
    {
        display: block;
        margin: 0 110px 0 30px;
        font-size: 18px;
        color: #333
    }
    
    .brick-item-s .more small
    {
        display: block;
        font-size: 12px;
        color: #757575
    }
    
    .brick-item-s i
    {
        font-size: 48px;
        line-height: 48px
    }
    
    .brick-item-active
    {
        -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0)
    }
    
    .brick-item-active .review-wrapper
    {
        height: 76px;
        opacity: 1;
        filter: alpha(opacity=100)\9
    }
    
    .review-list
    {
        width: 1240px;
        height: 415px;
        margin: 0;
        padding: 0;
        list-style-type: none
    }
    
    .review-item
    {
        position: relative;
        float: left;
        width: 296px;
        height: 415px;
        margin-left: 14px;
        margin-bottom: 14px;
        background: #fff;
        -webkit-transition: all .2s linear;
        transition: all .2s linear
    }
    
    .review-item:first-child,.review-item-first
    {
        margin-left: 0
    }
    
    .review-item:hover
    {
        z-index: 2;
        -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0)
    }
    
    .review-item .figure-img
    {
        width: 296px;
        height: 220px;
        margin: 0 0 28px
    }
    
    .review-item .figure-img a
    {
        display: block
    }
    
    .review-item .figure-img img
    {
        width: 296px;
        height: 220px
    }
    
    .review-item .review
    {
        height: 72px;
        margin: 0 28px 22px;
        font-size: 14px;
        line-height: 24px;
        font-weight: 400;
        overflow: hidden;
        _zoom: 1
    }
    
    .review-item .review,.review-item .review a
    {
        color: #333
    }
    
    .review-item .review a
    {
        display: block
    }
    
    .review-item .author
    {
        position: relative;
        height: 18px;
        margin: 0 28px 8px;
        padding: 0 10px 0 0;
        font-size: 12px;
        color: #b0b0b0
    }
    
    .review-item .author a
    {
        color: #b0b0b0
    }
    
    .review-item .avatar
    {
        position: absolute;
        left: 0;
        top: 5px;
        width: 22px;
        height: 22px;
        border: 1px solid #e0e0e0;
        border-radius: 20px
    }
    
    .review-item .info
    {
        margin: 0 30px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        _zoom: 1
    }
    
    .review-item .title
    {
        display: inline-block;
        *zoom: 1;
        *display: inline;
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        max-width: 170px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        _zoom: 1;
        vertical-align: bottom;
        color: #333
    }
    
    .review-item .title a
    {
        color: #333
    }
    
    .review-item .sep
    {
        color: #b0b0b0
    }
    
    .review-item .price
    {
        display: inline;
        margin: 0;
        color: #ff6700
    }
    
    .content-list
    {
        width: 1240px;
        height: 420px;
        margin: 0;
        padding: 0;
        list-style-type: none
    }
    
    .content-item
    {
        position: relative;
        float: left;
        width: 296px;
        height: 374px;
        padding: 45px 0 0;
        border-top: 1px solid #e0e0e0;
        margin-left: 14px;
        margin-bottom: 14px;
        background: #fff;
        -webkit-transition: all .2s linear;
        transition: all .2s linear
    }
    
    .content-item:first-child,.content-item-first
    {
        margin-left: 0
    }
    
    .content-item:hover
    {
        z-index: 2;
        -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0)
    }
    
    .content-item .title
    {
        margin: 0 10px 18px;
        font-size: 16px;
        font-weight: 400;
        text-align: center
    }
    
    .content-item .item-list
    {
        height: 340px;
        margin: 0;
        padding: 0;
        list-style-type: none;
        text-align: center;
        overflow: hidden;
        _zoom: 1;
        color: #333
    }
    
    .content-item .item-list li
    {
        float: left;
        width: 296px;
        height: 340px
    }
    
    .content-item .item-list li.more .thumb
    {
        display: block;
        width: 216px;
        height: 154px;
        margin: 30px auto 0
    }
    
    .content-item .name
    {
        margin: 0 20px 5px;
        font-size: 20px;
        font-weight: 400;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        _zoom: 1
    }
    
    .content-item .name,.content-item .name a
    {
        color: #333
    }
    
    .content-item .name a
    {
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        _zoom: 1;
        outline: none
    }
    
    .content-item .desc
    {
        margin: 0 48px 10px;
        height: 40px;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        overflow: hidden;
        _zoom: 1;
        color: #b0b0b0
    }
    
    .content-item .desc,.content-item .desc a
    {
        color: #b0b0b0
    }
    
    .content-item .price
    {
        height: 21px;
        margin: 0 10px 15px;
        text-align: center;
        color: #333
    }
    
    .content-item .price,.content-item .price a
    {
        color: #333
    }
    
    .content-item .figure-img
    {
        width: 216px;
        height: 154px;
        margin: 0 auto
    }
    
    .content-item .figure-img a
    {
        display: block;
        height: 154px
    }
    
    .content-item .figure-img img
    {
        width: 216px;
        height: 154px
    }
    
    .content-item .xm-pagers-wrapper
    {
        position: absolute;
        bottom: 15px;
        left: 0;
        width: 296px
    }
    
    .content-item .xm-controls .control
    {
        position: absolute;
        top: 50%;
        margin-top: -20px;
        opacity: 0;
        filter: alpha(opacity=0)\9;
        -webkit-transition: all .6s;
        transition: all .6s
    }
    
    .content-item .xm-controls .control-prev
    {
        left: 0
    }
    
    .content-item .xm-controls .control-next
    {
        right: 0
    }
    
    .content-item:hover .xm-controls .control
    {
        opacity: 1;
        filter: alpha(opacity=100)\9
    }
    
    .content-item-book
    {
        border-top-color: #ffac13;
        color: #ffac13
    }
    
    .content-item-theme
    {
        border-top-color: #83c44e;
        color: #83c44e
    }
    
    .content-item-game
    {
        border-top-color: #e53935;
        color: #e53935
    }
    
    .content-item-app
    {
        border-top-color: #2196f3;
        color: #2196f3
    }
    
    .video-list
    {
        width: 1240px;
        height: 285px;
        margin: 0;
        padding: 0;
        list-style-type: none
    }
    
    .video-item
    {
        position: relative;
        float: left;
        width: 296px;
        height: 285px;
        margin-left: 14px;
        margin-bottom: 14px;
        text-align: center;
        background: #fff;
        -webkit-transition: all .2s linear;
        transition: all .2s linear
    }
    
    .video-item:first-child,.video-item-first
    {
        margin-left: 0
    }
    
    .video-item:hover
    {
        z-index: 2;
        -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0)
    }
    
    .video-item .figure-img
    {
        position: relative;
        width: 296px;
        height: 180px;
        margin: 0 0 28px
    }
    
    .video-item .figure-img:hover .play
    {
        background-color: #ff6700;
        border-color: #ff6700
    }
    
    .video-item .figure-img a
    {
        display: block;
        height: 180px
    }
    
    .video-item .figure-img img
    {
        width: 296px;
        height: 180px
    }
    
    .video-item .play
    {
        position: absolute;
        left: 20px;
        bottom: 10px;
        width: 32px;
        height: 20px;
        border: 2px solid #fff;
        border-radius: 12px;
        background-color: #424242;
        background-color: rgba(0,0,0,0.6);
        color: #fff;
        -webkit-transition: all .2s;
        transition: all .2s;
        overflow: hidden;
        _zoom: 1
    }
    
    .video-item .play i
    {
        font-size: 30px;
        line-height: 20px
    }
    
    .video-item .title
    {
        margin: 0 0 6px;
        font-size: 14px;
        font-weight: 400;
        text-align: center;
        color: #333
    }
    
    .video-item .title a
    {
        color: #333
    }
    
    .video-item .title a:hover
    {
        color: #ff6700
    }
    
    .video-item .desc
    {
        height: 18px;
        margin: 0;
        font-size: 12px;
        color: #b0b0b0
    }
    
    .site-header .logo:after
    {
        display: none
    }
    
    .site-header .logo:hover:before
    {
        opacity: 1;
        filter: alpha(opacity=100)\9;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    
    @-webkit-keyframes screen
    {
        0%
        {
            -webkit-transform: translate3d(-35px, 55px, 0)
        }
    
        100%
        {
            -webkit-transform: translate3d(-90px, 55px, 0)
        }
    }
    
    @keyframes screen
    {
        0%
        {
            -webkit-transform: translate3d(-35px, 55px, 0);
            transform: translate3d(-35px, 55px, 0)
        }
    
        100%
        {
            -webkit-transform: translate3d(-90px, 55px, 0);
            transform: translate3d(-90px, 55px, 0)
        }
    }
    
    .home-hero-container
    {
        position: relative;
        z-index: 10
    }
    
    .home-hero
    {
        position: relative;
        margin-bottom: 26px
    }
    
    .home-hero .home-hero-sub
    {
        margin-top: 14px
    }
    
    .ie6 .home-hero .home-hero-sub
    {
        _margin-left: 0
    }
    
    .site-header .nav-category .link-category
    {
        visibility: hidden
    }
    
    .site-category
    {
        display: block
    }
    
    .site-category-list
    {
        height: 420px;
        border: 0;
        color: #fff;
        background: #333;
        background: rgba(0,0,0,0.6)
    }
    
    .site-category-list .title
    {
        color: #fff
    }
    
    .site-category-list .title i
    {
        color: #fff;
        color: rgba(255,255,255,0.5)
    }
    
    .home-hero-slider
    {
        position: relative;
        height: 460px;
        overflow: hidden;
        _zoom: 1
    }
    
    .home-hero-slider .slide
    {
        display: none;
        width: 1226px;
        height: 460px
    }
    
    .home-hero-slider .slide a
    {
        display: block
    }
    
    .home-hero-slider .slide img
    {
        width: 1226px;
        height: 460px
    }
    
    .home-hero-slider .ui-wrapper .ui-prev
    {
        left: 234px
    }
    
    .home-hero-slider .ui-pager
    {
        display: block;
        left: auto;
        right: 30px;
        width: 400px;
        text-align: right
    }
    
    .home-channel-list
    {
        margin: 0;
        padding: 3px;
        list-style-type: none;
        font-size: 12px;
        text-align: center;
        background: #5f5750
    }
    
    .home-channel-list li
    {
        position: relative;
        float: left;
        width: 70px;
        height: 82px;
        padding: 0 3px
    }
    
    .home-channel-list li:before,.home-channel-list li:after
    {
        position: absolute;
        content: "";
        background: #665e57
    }
    
    .home-channel-list li:before
    {
        top: -1px;
        left: 6px;
        width: 64px;
        height: 1px
    }
    
    .home-channel-list li:after
    {
        top: 6px;
        left: 0;
        width: 1px;
        height: 70px
    }
    
    .home-channel-list li.top:before
    {
        display: none
    }
    
    
    .home-channel-list li.left:after
    {
        display: none
    }
    .home-channel-list a
    {
        display: block;
        padding-top: 18px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        _zoom: 1;
        color: #fff;
        color: rgba(255,255,255,0.7);
        *color: #fff;
        -webkit-transition: color .2s;
        transition: color .2s
    }
    
    .home-channel-list a:hover
    {
        color: #fff
    }
    
    .home-channel-list i
    {
        display: block;
        height: 24px;
        margin-bottom: 4px;
        font-size: 24px;
        line-height: 24px
    }
    
    .home-promo-list
    {
        margin: 0;
        padding: 0;
        list-style-type: none
    }
    
    .home-promo-list li
    {
        float: left;
        width: 316px;
        height: 170px;
        margin-left: 15px;
        -webkit-transition: -webkit-box-shadow .2s linear;
        transition: box-shadow .2s linear
    }
    
    .home-promo-list li:hover
    {
        z-index: 2;
        -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1)
    }
    
    .home-promo-list li.first
    {
        margin-left: 0
    }
    
    .home-promo-list a
    {
        display: block;
        height: 170px
    }
    
    .home-promo-list img
    {
        width: 316px;
        height: 170px
    }
    
    .home-star-goods .box-hd .more
    {
        top: 24px
    }
    
    .home-star-goods .box-bd
    {
        position: relative;
        width: 1226px;
        overflow: hidden;
        _zoom: 1;
        padding-bottom: 40px
    }
    
    .home-star-goods .xm-carousel-wrapper
    {
        height: 340px
    }
    
    .home-star-goods .xm-controls-middle .control
    {
        margin-left: 5px
    }
    
    .home-star-goods .xm-carousel-list
    {
        width: 1240px;
        height: 340px
    }
    
    .home-star-goods .goods-list
    {
        height: 340px;
        overflow: hidden;
        _zoom: 1
    }
    
    .home-star-goods .goods-list li
    {
        height: 300px;
        padding-top: 39px;
        border-top-width: 1px;
        border-top-style: solid;
        text-align: center;
        background: #fafafa;
        -webkit-transition: all .6s;
        transition: all .6s
    }
    
    .home-star-goods .goods-list li:hover
    {
        z-index: 2
    }
    
    .home-star-goods .goods-list .thumb
    {
        display: block;
        width: 160px;
        margin: 0 auto 22px
    }
    
    .home-star-goods .goods-list .thumb img
    {
        width: 160px;
        height: 160px
    }
    
    .home-star-goods .goods-list .title
    {
        margin: 0 20px 3px;
        font-size: 14px;
        font-weight: 400;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        _zoom: 1
    }
    
    .home-star-goods .goods-list .title,.home-star-goods .goods-list .title a
    {
        color: #212121
    }
    
    .home-star-goods .goods-list .desc
    {
        height: 18px;
        margin: 0 20px 12px;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        _zoom: 1;
        color: #b0b0b0
    }
    
    .home-star-goods .goods-list .price
    {
        margin: 0;
        color: #ff6709
    }
    
    .home-star-goods .rainbow-list .rainbow-item-1
    {
        border-top-color: #ffac13
    }
    
    .home-star-goods .rainbow-list .rainbow-item-2
    {
        border-top-color: #83c44e
    }
    
    .home-star-goods .rainbow-list .rainbow-item-3
    {
        border-top-color: #2196f3
    }
    
    .home-star-goods .rainbow-list .rainbow-item-4
    {
        border-top-color: #e53935
    }
    
    .home-star-goods .rainbow-list .rainbow-item-5
    {
        border-top-color: #00c0a5
    }
    
    .home-star-goods .rainbow-list .rainbow-item-6
    {
        border-top-color: #ffac13
    }
    
    .home-star-goods .rainbow-list .rainbow-item-7
    {
        border-top-color: #83c44e
    }
    
    .home-star-goods .rainbow-list .rainbow-item-8
    {
        border-top-color: #2196f3
    }
    
    .home-star-goods .rainbow-list .rainbow-item-9
    {
        border-top-color: #e53935
    }
    
    .home-star-goods .rainbow-list .rainbow-item-10
    {
        border-top-color: #00c0a5
    }
    
    .home-star-goods .rainbow-list .rainbow-item-11
    {
        border-top-color: #ffac13
    }
    
    .home-star-goods .rainbow-list .rainbow-item-12
    {
        border-top-color: #83c44e
    }
    
    .home-star-goods .rainbow-list .rainbow-item-13
    {
        border-top-color: #2196f3
    }
    
    .home-star-goods .rainbow-list .rainbow-item-14
    {
        border-top-color: #e53935
    }
    
    .home-star-goods .rainbow-list .rainbow-item-15
    {
        border-top-color: #00c0a5
    }
    
    .home-star-goods .rainbow-list .rainbow-item-16
    {
        border-top-color: #ffac13
    }
    
    .home-star-goods .rainbow-list .rainbow-item-17
    {
        border-top-color: #83c44e
    }
    
    .home-star-goods .rainbow-list .rainbow-item-18
    {
        border-top-color: #2196f3
    }
    
    .home-star-goods .rainbow-list .rainbow-item-19
    {
        border-top-color: #e53935
    }
    
    .home-star-goods .rainbow-list .rainbow-item-20
    {
        border-top-color: #00c0a5
    }
    
    .home-main
    {
        padding-top: 60px
    }
    
    .home-brick-box
    {
        margin-bottom: 8px
    }
    
    .home-brick-box .box-hd .more .tab-list li
    {
        margin: 0 0 0 30px
    }
    
    .home-brick-box .brick-list,.home-brick-box .brick-promo-list
    {
        margin: 0 0 -14px -14px;
        _margin-left: 0
    }
    
    .home-brick-box .tab-content-hide
    {
        display: none
    }
    
    .ie6 .home-brick-box .span4
    {
        margin-left: 0
    }
    
    .ie6 .home-brick-box .brick-promo-list .brick-item
    {
        margin-left: 0
    }
    
    .ie6 .home-brick-box .brick-list
    {
        width: 978px
    }
    
    .ie6 .home-brick-box .brick-item
    {
        margin-left: 8px
    }
    
    .home-brick-row-1-box
    {
        height: 358px
    }
    
    .home-brick-row-2-box
    {
        height: 686px
    }
    
    .home-recm-box
    {
        margin-bottom: 22px
    }
    
    .home-recm-box .box-hd .more
    {
        top: 15px
    }
    
    .home-recm-box .xm-carousel-wrapper
    {
        position: relative;
        width: 1226px
    }
    
    .home-recm-box .xm-controls-middle .control
    {
        margin-left: 5px
    }
    
    .home-recm-box .xm-recommend ul.xm-carousel-list li
    {
        -webkit-transition: all 0.2s linear;
        transition: all 0.2s linear
    }
    
    .home-recm-box .xm-recommend ul.xm-carousel-list li:hover
    {
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0)
    }
    
    .home-review-box
    {
        margin-bottom: 22px
    }
    
    .home-review-box .sep
    {
        color: #e0e0e0
    }
    
    .home-content-box
    {
        margin-bottom: 22px
    }
    
    .home-content-box .dot
    {
        border-color: #fff
    }
    
    .home-video-box
    {
        margin-bottom: 60px
    }
    
    .modal-video
    {
        width: 880px;
        height: 596px;
        margin-top: -298px;
        margin-left: -440px;
        -webkit-box-shadow: 0 18px 30px rgba(0,0,0,0.18);
        box-shadow: 0 18px 30px rgba(0,0,0,0.18)
    }
    
    .modal-video .modal-bd
    {
        max-height: 536px;
        padding: 0
    }
    
    .site-bn
    {
        display: none;
        position: fixed;
        _position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
        width: 100%
    }
    
    .site-bn .container
    {
        position: relative
    }
    
    .site-bn .close
    {
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 40px;
        text-align: center;
        font-size: 24px;
        line-height: 40px;
        background-color: #000;
        color: #fff;
        opacity: .4;
        filter: alpha(opacity=40)\9
    }
    
    .site-bn .close:hover
    {
        opacity: .6;
        filter: alpha(opacity=60)\9
    }
    
    .site-bn-backdrop
    {
        display: none;
        position: fixed;
        _position: absolute;
        top: 0;
        left: 0;
        z-index: 98;
        width: 100%;
        height: 1000px;
        background: #000;
        opacity: .3;
        filter: alpha(opacity=30)\9
    }
    
    .site-bn-bar
    {
        width: 100%;
        background-repeat: no-repeat;
        background-position: center 0
    }
    
    .site-bn-bar .container
    {
        position: relative
    }
    
    .site-bn-bar .site-bn-bar-link
    {
        display: block;
        width: 100%;
        height: 120px;
        text-indent: -9999em
    }
    
    .doodle
    {
        display: none
    }
    
    .doodle .link-block
    {
        position: absolute;
        left: 69px;
        bottom: 0;
        z-index: 21;
        width: 165px;
        height: 100px;
        background-repeat: no-repeat;
        background-position: center center;
        text-indent: -9999em
    }
    
    .air-doodle
    {
        display: none
    }
    
    .air-doodle .link-block
    {
        left: 70px;
        width: 75px;
        height: 75px;
        padding-left: 75px;
        padding-top: 25px;
        font-size: 12px;
        text-align: center;
        color: #b0b0b0
    }
    
    .air-doodle .link-block:hover
    {
        color: #b0b0b0
    }
    
    .air-doodle .doodle-img
    {
        position: absolute;
        left: 0;
        top: 12px;
        width: 75px;
        height: 75px
    }
    
    .air-doodle .doodle-state
    {
        display: block;
        font-size: 14px;
        color: #83c44e
    }
    
    .air-doodle .doodle-info .city,.air-doodle .doodle-info .pm
    {
        display: block
    }
    
    .air-doodle .doodle-info .pm
    {
        font-size: 10px
    }

    js

    /**
     * Created by Administrator on 2017/5/25.
     */
    $(function() {
        var $slider = $(".xm-star,.recommend");
    
        // 给xm-star 和recommend添加鼠标移入事件,根据this指向的对象查找按钮并添加点击事件
        $slider.mouseenter(function () {
            var $this = $(this),
                $sliderItem = $this.find(".brick-list"),         //轮播项
                $pre = $this.find(".btn-group .pre"),
                $next = $this.find(".btn-group .next"),
                len = $sliderItem.children().length,           //li个数
                width = 248 * len,     //248为每个li的占位宽
                page = 0,          //初始页面
                max = len / 5;   //最大页面
    
            //设置ul宽度,以便使所有li排成一排
            $sliderItem.css("width", width);
            $pre.on("click",clickHandleFn);
    
            //设置button hover效果
            $pre.hover(mouseIn, mouseOut);
            $next.hover(mouseIn, mouseOut);
    
            function mouseIn() {
                if (!$(this).hasClass("disabled")) {
                    $(this).addClass("active");
                }
            }
    
            function mouseOut() {
                if (!$(this).hasClass("disabled")) {
                    $(this).removeClass("active");
                }
            }
    
            function clickHandleFn(e) {
                e.stopPropagation();
                console.log(e.currentTarget);
                if($(this).index()){
                    page--;
                }else{
                    page++;
                }
                move(page);
                $pre.off("click",clickHandleFn);
                $next.off("click",clickHandleFn);
                disable(page);
                enable(page);
    
            }
    
            //移动
            function move(page){
                $sliderItem.css("transform","translate("+ (-width / max)*page +"px)");
            }
    
            //禁用按钮
            function disable(page){
                if(page === 0){
                    $next.off("click",clickHandleFn).addClass("disabled").removeClass("active");
                }
                if(page === max-1){
                    $pre.off("click",clickHandleFn).addClass("disabled").removeClass("active");
                }
            }
    
            //激活按钮
            function enable(page) {
                if (page > 0) {
                    $next.on("click", clickHandleFn).removeClass("disabled");
                }
                if (page < max - 1) {
                    $pre.on("click", clickHandleFn).removeClass("disabled");
                }
            }
        });
    });

    主要的核心代码如上所示,引用的js,css及图片请在源码中下载。

    下载地址:点我下载

     

     

     

    展开全文
  • 我要偷偷的学Python,然后惊呆所有人(第一天

    万次阅读 多人点赞 2020-10-11 22:05:39
    ,切入正题 文章目录前言Python语言概览Python语言的起源 前言 本系列文默认各位有一定的C或C++基础,因为我是学了点C++的皮毛之后入手的Python,这里也要感谢齐锋学长送来的支持。 本系列文默认各位会百度,会用...

    在这里插入图片描述

    标题无意冒犯,就是觉得这个广告挺好玩的
    上面这张思维导图喜欢就拿走,反正我也学不了这么多

    好,切入正题


    前言

    本系列文默认各位有一定的C或C++基础,因为我是学了点C++的皮毛之后入手的Python,这里也要感谢齐锋学长送来的支持。
    本系列文默认各位会百度,会用在线编译器,因为我是突击学Python的,之前的编译环境都删了,但是吧,我发现在线编译是真的爽,浪费那时间去搭那环境干啥,学好了Python,会差那点请人搭环境的钱吗?

    我要的不多,点个关注就好啦
    然后呢,本系列的目录嘛,说实话我个人比较倾向于那两本 Primer Plus,所以就跟着它们的目录结构吧。

    本系列也会着重培养各位的自主动手能力,毕竟我不可能把所有知识点都给你讲到,所以自己解决需求的能力就尤为重要,所以我在文中埋得坑请不要把它们看成坑,那是我留给你们的锻炼机会,请各显神通,自行解决。


    Python语言概览

    Python语言的起源

    老生常谈了,但是追本溯源有时候会有它意想不到的好处,全在个人悟性了。

    Python的作者,Guido von Rossum,确实是荷兰人。1982年,Guido从阿姆斯特丹大学(University of Amsterdam)获得了数学和计算机硕士学位。然而,尽管他算得上是一位数学家,但他更加享受计算机带来的乐趣。用他的话说,尽管拥有数学和计算机双料资质,他总趋向于做计算机相关的工作,并热衷于做任何和编程相关的活儿。

    在这里插入图片描述

    在那个时候,他接触并使用过诸如Pascal、C、 Fortran等语言。这些语言的基本设计原则是让机器能更快运行。所有的编译器的核心是做优化,以便让程序能够运行。为了增进效率,语言也迫使程序员像计算机一样思考,以便能写出更符合机器口味的程序。在那个时代,程序员恨不得用手榨取计算机每一寸的能力。

    然而,这种思考方式让Guido感到苦恼。Guido知道如何用C语言写出一个功能,但整个编写过程需要耗费大量的时间 。他的另一个选择是shell。然而,shell的本质是调用命令。它并不是一个真正的语言。比如说,shell没有数值型的数据类型,加法运算都很复杂。总之,shell不能全面的调动计算机的功能。

    Guido希望有一种语言,这种语言能够像C语言那样,能够全面调用计算机的功能接口,又可以像shell那样,可以轻松的编程。
    1989年,为了打发圣诞节假期,Guido开始写Python语言的编译/解释器。Python来自Guido所挚爱的电视剧Monty Python’s Flying Circus 。他希望这个新的叫做Python的语言,能实现他的理念(一种C和shell之间,功能全面,易学易用,可拓展的语言)。Guido作为一个语言设计爱好者,已经有过设计语言的(不很成功)的尝试。这一次,也不过是一次纯粹的hacking行为。

    1991年,第一个Python编译器(同时也是解释器)诞生。它是用C语言实现的并能够调用C库(.so文件)。从一出生,Python已经具有了:类(class),函数(function),异常处理(exception),包括表(list)和词典(dictionary)在内的核心数据类型,以及模块(module)为基础的拓展系统


    数据类型

    在这里插入图片描述

    Number数据类型

    int 整型 (正整形 0 负整型)

    float 浮点型即小数

    bool 布尔型 (True 真 False假)

    插一个
    complex 复数类型(这个我写代码两年多,也是没用过了)

    #表达方式一:
          complexvar = 5 + 6j
          complexvar = 3 - 2j
          print(type(complexvar))
          print(id(complexvar))
    
    #表达方式二:  
    		  complex(实数,虚数)
          res = complex(14,2)
          print(res)   => (14,2)
    

    容器数据类型

    str 字符串型

    '''用引号引起来的就是字符串,三种引号:单引号  双引号  三引号'''
    
    转义字符:\  (1)把有意义的字符转变为无意义的字符
            (2)把无意义的字符转变的有意义
    
         \n  或者 \r\n :   代表"换行"意思
         \t      	 :   代表"一个缩进"意思
         \r      	 :   代表将\r后面得所有字符拉到该行首  
    

    至于其他转义字符,这里不多赘述

    特征:可以获取,但不可以修改,有序排列
    获取字符串中的数据:跟列表list 元组tuple的取值一模一样(正向下标,反向下标)
    

    元字符串

    ‘’‘元字符串可以让转义字符失效’’’
    在这里插入图片描述

    字符串的格式化

    “%d %f %s”  语法 : “字符串” % (实际值)
    %d 占位符 d代表整型数据,%nd表示占n个位置
    在这里插入图片描述
    结果:XXX买了3个充气娃娃

    %f 占位符 f代表浮点型数据 默认保留6位小数点,f前面有数值,则根据数值是多少保留对应小数点
    在这里插入图片描述
    结果:今天大白菜2.35元一斤

    在这里插入图片描述
    结果:今天大白菜2.3元一斤

    %s 占位符 代表字符串
    在这里插入图片描述

    list 列表型([])

    ‘’‘特征:可以获取和修改数据,排列有序’’’

    在这里插入图片描述

    列表的修改

    在这里插入图片描述

    tuple 元组型 ( () )

    ‘’‘特征:可以获取但不能修改数据,排列有序’’’

    在这里插入图片描述
    获取元组中的数据 : 跟列表list的取值一模一样 (正向下标,反向下标)

    set 集合型 ({})

    setvar = {}     数据类型显示是一个dict 字典

    特征:不可获取,也不可以修改,无序排列,自动去掉重复数据

    dict 字典 ( {“aaa”:“bbb”,})

    冒号左边是键,右边是值,键值对之间用逗号隔开

     特征 : 可以获取,可以修改,无序排列
    		   底层使用了哈希算法,储存的数据是散列,键值对储存的数据
    		   获取字典当中的数据:可以获取,直接输入冒号左边的键即可取值的数据
    		   修改字典当中的数据:可以修改,直接将要改的值替换掉 键 就可实现修改
    		   一般在命名字典的键时,推荐使用字符串,按照变量命名的字符串.
    

    在这里插入图片描述

    补充

    获取数据类型的函数:type()
    获取变量地址的函数:id()


    四则运算

    在这里插入图片描述

    不过,对于这么多的算术运算符,我建议你先看一遍,有个大致的印象就行。你可以先把这张图保存上,等用的时候再找出来,对应着查阅就可以。

    咱们再说说一样的——运算优先级:Python世界的运算优先级,和我们平时的计算优先级是一样的。

    在这里插入图片描述


    字符串拼接

    Python有一个很优秀的点我很喜欢,那就是它的字符串拼接。
    曾经有人说,编程,说到底就是对字符串的操作,我觉得他说的很有道理,别看那些花里胡哨的,说到底都是操作字符串。

    反正C/C++里的字符串操作已经让我喝好几壶了,还没喝够。

    Python里面字符串拼接的方法可简单了,就是利用字符串拼接符号【+】,将需要拼接的变量连在一起就行了。
    在这里插入图片描述

    但是,既然是字符串拼接,那它的限制其实就很明显了,你得拿字符串来拼接。

    那如果我要拿去拼的东西参差不齐呢?怎么办?别急


    强制类型转换

    负责转换数据类型的函数一共有3种:str()、 int()和float()。
    在这里插入图片描述

    str()

    str()函数能将数据转换成其字符串类型,不管这个数据是int类型还是float类型,只要放到括号里。这个数据就能摇身一变,成为字符串类型。
    是不是挺简单的?我们只需通过str(number)一个步骤,便可以将整数类型的【153】转化为字符串类型的【153】,成功完成数据拼接。

    int()

    将数据转换为整数类型的方法也很简单,就是int()函数。其使用方法同str()一样,将你需要转换的内容放在括号里就行,像这样:int(转换的内容)。
    不过对于int()函数的使用,大家要注意一点:只有符合整数规范的字符串类数据,才能被int()强制转换。
    别看它虽然只有一句话,但它其实带有三层含义:

    首先,整数形式的字符串比如'6''1',可以被int()函数强制转换。
    其次,文字形式,比如中文、火星文或者标点符号,不可以被int()函数强制转换。
    最后,小数形式的字符串,由于Python的语法规则,也不能使用int()函数强制转换。
    

    虽然浮点形式的字符串,不能使用int()函数。但浮点数是可以被int()函数强制转换的(去尾法)

    float()

    首先float()函数的使用,也是将需要转换的数据放在括号里,像这样:float(数据)。
    其次,float()函数也可以将整数和字符串转换为浮点类型。但同时,如果括号里面的数据是字符串类型,那这个数据一定得是数字形式。
    

    那么,经过之前str()和int()操练,float()函数是不是好懂了一些?

    总结一下

    在这里插入图片描述


    标准输入输出

    好滴吧,可能有的人会犯嘀咕,为什么不讲输入输出。莫急嘛

    print()函数

    括号内是数字的情况
    print(520)
    
    括号内是单引号的情况。
    print('一起玩吧')
    
    括号内是双引号的情况。
    print("一起玩吧")
    
    括号内单双引号同时存在的情况。
    print("Let's play")
    
    当然,括号内也可以是三引号,参考上面单双同时出现的情况就知道了。
    

    之所以现在才说输入输出,是因为这里面实在可以包含太多东西了,不要被上面的这几个例子所迷惑,print可以打印各种数据类型,参考本文前面出现的print()以及后面将会出现的print()

    input()函数

    首先,让我们通过一段代码,来看一看input()函数是如何使用的:

    input('请在以下四个选项【格兰芬多;斯莱特林;拉文克劳;赫奇帕奇】中,输入你想去的学院名字:')
    

    input()函数是输入函数。就上面例子来讲,它需要你输入针对括号内’请在以下四个选项【格兰芬多;斯莱特林;拉文克劳;赫奇帕奇】中,输入你想去的学院名字:'的答案。
    所以,当你在函数的括号内写出问题时,input()函数会将此问题原样显示在屏幕上,并在终端区域等待你针对此问题的回答。

    可是,我们为什么要在终端处输入回答呢?不输入行不行?
    事实上,我们可以把input()函数当作一扇链接现实世界与代码世界的门。
    当问题从代码世界传递给我们,可我们却没有回答时,这扇等待输入的input()大门,就会一直处于敞开状态,一直等着你往里送回答。

    注意点

    对于input()函数来说,不管我们输入的回答是什么,不管你输入的是整数1234,还是字符串『隐形斗篷是我最想拥有的魔法』,input()函数的输入值(搜集到的回答),永远会被【强制性】地转换为【字符串】类型。

    这时候就要对输入的数据进行强制类型转换了:choice = int(input('请输入您的选择:'))


    控制语句

    条件控制语句

    if判断

    在这里插入图片描述

    在这里插入图片描述

    在这里,你可能注意到了一个细节:在条件判断代码中的冒号:后、下一行内容的前面,会空几个格,但这是为什么呢?
    首先,在计算机的沟通语言中,空格的学名叫缩进,比如我们写文章都要空两个格,这就叫首行缩进。
    icon

    对于Python而言,冒号和缩进是一种语法。它会帮助Python区分代码之间的层次,理解条件执行的逻辑及先后顺序。【注:缩进是四个空格】这里建议不要用tab,就四个空格的事情嘛,年轻人那么懒干嘛,养成习惯之后很多地方受限制。

    在这里插入图片描述

    if···else···

    很多时候,我们不能把鸡蛋放在一个篮子里,要做好两手准备:如果不满足条件时,我们要怎么办。
    Python则很贴心地,让我们借用if…else…语句,让码农们有了另一种选择——【如果…不满足,就…】

    在这里插入图片描述

    在if…else条件语句中,if和else各自抱团,形成两个不同的代码块。表示的是条件和其他条件的互斥关系——如果不满足if条件,就执行else其他条件。

    if···elif···else

    在判断3个或3个以上的条件时,我们就需要借助Python中的多向判断命令:if…elif…else…。

    当判断的条件超过3个时,中间的多个条件都可以使用elif。

    在这里插入图片描述

    elif后可不接else

    if嵌套

    像这种如果底下还有如果(即条件里还套条件)的情况,我们如何用Python把上面的规则写出来,并得出评价呢?

    答案就是——嵌套条件。

    在这里插入图片描述


    for···in···循环

    Python for循环可以遍历任何序列的项目,如一个列表或者一个字符串。

    for循环的语法格式如下:

    for iterating_var in sequence:
       statements(s)
    

    在这里插入图片描述

    for letter in 'Python':     # 第一个实例
       print ('当前字母 :', letter)
     
    fruits = ['banana', 'apple',  'mango']
    for fruit in fruits:        # 第二个实例
       print ('当前水果 :', fruit)
     
    print ("Good bye!")
    

    可以看出,模板中的iterating_var 是不用提前赋值的。

    range()函数

    使用range(a,b) 函数,你可以生成了一个【取头不取尾】的整数序列。
    例如:

    for i in range(13,17):
        print(i)
    

    结果:13、14、15、16


    range()函数还有一种用法,我们来直接体验一下:

    for i in range(0,10,3):
        print(i)
    

    这是一种切片方式,第三个参数被称作“步长”,即间隔多少取一个数。
    那么这个代码执行的结果就是:0、3、6、9

    循环使用 else 语句

    在 python 中,for … else 表示这样的意思,for 中的语句和普通的没有区别,else 中的语句会在循环正常执行完(即 for 不是通过 break 跳出而中断的)的情况下执行,while … else 也是一样。

    for num in range(10,20):  # 迭代 10 到 20 之间的数字
       for i in range(2,num): # 根据因子迭代
          if num%i == 0:      # 确定第一个因子
             j=num/i          # 计算第二个因子
             print ('%d 等于 %d * %d' % (num,i,j))
             break            # 跳出当前循环
       else:                  # 循环的 else 部分
          print (num, '是一个质数')
    

    while循环

    while循环和for循环差不多,不过这里的计数变量要初始化:
    栗:

    a = 0                #先定义变量a,并赋值
    while a < 5:         #设定一个放行条件:a要小于5,才能办事
        a = a + 1  # 满足条件时,就办事:将a+1
        print(a)   # 继续办事:将a+1的结果打印出来
    

    在这里插入图片描述

    很明显,while循环有2个要点:1.放行条件;2.办事流程。

    和for循环一样,冒号和内部代码的缩进都是必不可少的。

    其他

    break

    我们先来看看break语句。break的意思是“打破”,是用来结束循环的,一般写作if…break。它的写法长这样:

    # break语句搭配for循环
    for...in...:
        ...
        if ...:
            break
    
    # break语句搭配while循环
    while...(条件):
        ...
        if ...:
            break
    

    在这里,if…break的意思是如果满足了某一个条件,就提前结束循环。记住,这个只能在循环内部使用。

    continue

    continue的意思是“继续”。这个子句也是在循环内部使用的。当某个条件被满足的时候,触发continue语句,将跳过之后的代码,直接回到循环的开始。

    # continue语句搭配for循环
    for...in...:
        ...
        if ...:
            continue
        ...
    
    # continue语句搭配while循环
    while...(条件):
        ...
        if ...:
            continue
        ...
    

    在这里插入图片描述

    pass

    pass语句就非常简单了,它的英文意思是“跳过”。

    对比两种循环

    for循环和while循环最大的区别在于【循环的工作量是否确定】,for循环就像空房间依次办理业务,直到把【所有工作做完】才下班。但while循环就像哨卡放行,【满足条件就一直工作】,直到不满足条件就关闭哨卡


    练手小项目

    接下来,我想先和你谈谈一个项目一般是怎么完成的。更具体的说,程序员是如何思考和解决问题的呢?

    我认为其中一个很重要的能力是【问题拆解】。问题拆解,指的是在做一件事或面对一个问题的时候,将其拆解成多个步骤或多个层次,逐步执行和解决问题,直至达到最终效果。

    在这里插入图片描述

    写个什么小项目呢?

    这样吧,猜数字游戏都玩过吧,就写一个猜数字游戏:

    功能需求:
    实现一个猜数字小游戏,随机生成一个0~100以内的数据,由玩家来猜,每次猜完之后计算机告诉玩家是猜大了还是猜小了,共5次机会,5次猜不出来宣布游戏失败。

    很简单吧。

    写好的也可以发在评论区哦


    长尾流量优化

    建议收藏,不然划着划着就找不到了嘞。

    我建了一个Python学习答疑群,有兴趣的朋友可以了解一下:这是个什么群

    直通群的传送门:传送门
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 作为程序员上班的第一天

    千次阅读 2014-07-01 22:19:58
    2014年07月01日,今天是去四创公司报到的日子,打心底里面对于自己的第一天程序员之路感到兴奋。首先是到人事部报到,了解了一下公司的工作环境,一些入职的手续等等。接下来就是跟我们两个老大见面啦,从交流上感觉...

    2014年07月01日,今天是去四创公司报到的日子,打心底里面对于自己的第一天程序员之路感到兴奋。首先是到人事部报到,了解了一下公司的工作环境,一些入职的手续等等。接下来就是跟我们两个老大见面啦,从交流上感觉老大还是很好说话的,说明下我的岗位是软件研发。在早上的小会中感觉两位老大说的还是很有道理的:不要觉得你们在学校学了什么东西或者在培训机构里进行培训就很牛逼了,其实那些只是一些基础的技能而已,既然走上开发软件研发这条比较无趣而有趣的道路那就将自己的心态摆正,以一种空杯心态去对待自己的工作,不断的学习,归纳,使自己的价值体现出来,不然什么都是空的。(是的空杯心态,学海无涯)。开完会之后自己就开始熟悉本部门研发的软件了,苦逼的是还没有进入研发阶段呀,因为我被叫去测试阶段了,一个月呀,感觉很苦逼是不是,研发岗位先去做一个月的测试,瞬间跪了,主要是下午没事做才会觉得跪了。其实在这样想想也不错,开发之前做测试,起码能够更好的了解自己部门开发的业务流程等,还能够增强自测能力不是。

    说说一个下午对于测试的一些心得:

    1.作为测试人员或者开发人员进行自测的时候首先可以将自己当作用户(从客户的角度)来进行软件的使用
    2.测试的话可以主要从软件各大功能模块的测试;还有就是对于数据的是否一致性测试。
    3.在使用过程中注重整体功能是否达到自己的软件应有的要求;使用体验感是否舒适;另外在细节上需要注
    意,bug往往是出现在细节上,而这个是开发人员比较容易忽略的问题。
    4.在进行测试的时候需要时时做一个bug的提交和跟踪,将bug进行描述并配上截图以示说明
    5.进行测试工作的话可以提高我们开发人员的自测能力,可以能够为新人更快的了解到一些基本的业务。
    6.在测试过程中发现问题,并思考问题,是提高自我解决能力和学习能力的过程,在测试过程中将发现的问           题进行不断的总结是可以避免自己以后出现类是的问题


    接下来我会努力做好这一个月的测试工作的。Beginning

    展开全文
  • QQ空间爬虫分享(一天可抓取 400 万条数据)

    万次阅读 多人点赞 2016-03-01 13:30:15
    代码请移步GitHub:QQSpider爬虫功能:QQSpider 使用广度优先策略爬取QQ空间中的个人信息、日志、说说、好友四个方面的信息,详细可见数据库说明。 判重使用“内存位”判重,理论上亿数量级的QQ可瞬间判重,内存只...

    代码请移步GitHub:QQSpider

    爬虫功能:

    QQSpider 使用广度优先策略爬取QQ空间中的个人信息、日志、说说、好友四个方面的信息,详细可见数据库说明
    判重使用“内存位”判重,理论上亿数量级的QQ可瞬间判重,内存只占用400M+。
    爬虫速度可达到单机每天400万条数据以上(具体要考虑网速、网络带宽、稳定性等原因。我在学校是400万+,但在公司那边却只有六成的速度,普通家庭网络可能会更慢)。


    环境、架构:

    开发语言:Python2.7
    开发环境:64位Windows8系统,4G内存,i7-3612QM处理器。
    数据库:MongoDB 3.2.0
    (Python编辑器:Pycharm 5.0.4;MongoDB管理工具:MongoBooster 1.1.1)

    主要使用 requests 模块抓取,部分使用 BeautifulSoup 解析。
    多线程使用 multiprocessing.dummy 。
    抓取 Cookie 使用 selenium 和 PhantomJS 。
    判重使用 BitVector 。


    使用说明:

    启动前配置:
    MongoDB安装好 能启动即可,不需要配置。
    Python需要安装以下模块(注意官方提供的模块是针对win32系统的,64位系统用户在使用某些模块的时候可能会出现问题,所以尽量先找64位模块,如果没有64的话再去安装32的资源):
    requests、BeautifulSoup、multiprocessing、selenium、itertools、BitVector、pymongo

    另外我们需要使用到 PhantomJS,这并不是 Python 的模块,而是一个exe可执行文件,我们可以利用它模拟浏览器去获取 Cookie 。使用方法:将 phantomjs-2.0.0-windows.zip 压缩包里面的 phantomjs.exe 放到你的 Python 目录下就行了。


    启动程序:

    1. 进入 myQQ.txt 写入QQ账号和密码(用一个空格隔开,不同QQ换行输入),一般你开启几个QQ爬虫线程,就至少需要两倍数量的QQ用来登录,至少要轮着登录嘛。
    2. 进入 init_messages.py 进行爬虫参数的配置,例如线程数量的多少、设置爬哪个时间段的日志,哪个时间段的说说,爬多少个说说备份一次等等。
    3. 运行 init.py 文件开启爬虫项目。
    4. 爬虫开始之后首先根据 myQQ.txt 里面的QQ去获取 Cookie(以后登录的时候直接用已有的Cookie,就不需要每次都去拿Cookie了,遇到Cookie失效也会自动作相应的处理)。获取完Cookie后爬虫程序会去申请四百多兆的内存,申请的时候会占用两G左右的内存,大约五秒能完成申请,之后会掉回四百多M
    5. 爬虫程序可以中途停止,下次可打开继续抓取。


    运行截图:

    QQSpider code

    说说数据:
    QQSpider Mood

    日志数据:
    QQSpider Blog

    好友关系数据:
    QQSpider Friends

    个人信息数据:
    QQSpider Information1

    QQSpider Information2


    数据库说明:

    QQSpider主要爬取QQ用户的说说、日志、朋友关系、个人信息。
    数据库分别设置 Mood、Blog、Friend、Information 四张表。

    Mood 表:
    _id:采用 “QQ_说说id” 的形式作为说说的唯一标识。
    Co-oridinates:发说说时的定位坐标,调用地图API可直接查看具体方位,可识别到在哪一栋楼。
    Comment:说说的评论数。
    Like:说说的点赞数。
    Mood_cont:说说内容。
    PubTime:说说发表时间。
    QQ:发此说说的QQ号。
    Source:说说的根源(对于转发的说说),采用 “QQ_说说id” 的形式标识。
    Tools:发说说的工具(手机类型或者平台)。
    Transfer:说说的转发数。
    URL:说说的链接地址。
    isTransfered:此说说是否属于转发来的。

    Blog 表:
    _id:采用 “QQ_日志id” 的形式作为日志的唯一标识。
    Blog_cont:日志内容。
    Comment:日志的评论数。
    Like:日志的点赞数。
    PubTime:日志的发表时间。
    QQ:发此日志的QQ号。
    Share:日志的分享数。
    Source:日志的根源(对于转发的日志),采用 “QQ_日志id” 的形式标识。
    Title:日志的标题。
    Transfer:日志的转发数。
    URL:日志的链接地址。
    isTransfered:此日志是否属于转发来的。

    Friend 表:
    _id:采用 QQ 作为唯一标识。
    Num:此QQ的好友数(仅统计已抓取到的)。
    Fx:朋友的QQ号,x代表第几位好友,x从1开始逐渐迭加。

    Information 表:
    _id:采用 QQ 作为唯一标识。
    Age:年龄。
    Birthday:出生日期。
    Blog:已发表的日志数。
    Blogs_WeGet:我们已抓取的日志数。
    Blood_type:血型。
    Career:职业。
    Company:公司。
    Company_address:公司详细地址。
    Company_city:公司所在城市。
    Company_country:公司所在国家。
    Company_province:公司所在省份。
    Constellation:星座。
    CurrentTime:抓取当前信息的时间(不同时间信息会不同)。
    FriendsNum:好友数(仅统计已抓取的)。
    Gender:性别。
    Hometown_city:故乡所在城市。
    Hometown_country:故乡所在国家。
    Hometown_province:故乡所在省份。
    Living_city:居住的城市。
    Living_country:居住的国家。
    Living_province:居住的省份。
    Marriage:婚姻状况。
    Message:空间留言数。
    Mood:已发表的说说数。
    Mood_WeGet:我们已抓取的说说数。
    PageView:空间总访问量。
    Picture:已发表的照片数(包括相册里的照片和说说里的照片)。


    结语:

    自己一个人瞎搞了一个多星期,肯定还有很多地方不规范,不够优化。不足之处请多指出!

    更新版本:《QQ空间爬虫分享(2016年11月18日更新)》



    转载请注明出处,谢谢!(原文链接:http://blog.csdn.net/bone_ace/article/details/50771839

    展开全文
  • 个程序员的成长史》第十三篇。
  • 说说大二这一年

    千次阅读 多人点赞 2014-09-06 19:43:05
    每次,隔段时间,看自己之前写的东西,都觉得幼稚,看着看着都有种特别别扭的感觉。 或许,这就是成长吧。 今天,我还是把自己这一年来的总结写下来了。或许,明年自己看的时候,又会有同样的感觉,可这又有什么...
  • 每个人都为自己在这几的学习中收获了应有的东西,有些可能是在做story中收获的,有些可能是在这些之外,只是有时候我们不得不保持继续学习的姿态,这才是我们真正需要的东西,keep study。 说说bbs 最后的bbs,...
  • 今天几个讨论的话题LEO选择的都非常。我捡几个印象深刻的话题给大家分享分享。1金融危机对贵公司有没有什么影响?如果要裁人,什么人会被裁下去?也说说裁人的经历。我的回答是:因为我们的客户是传统行业客户,...
  • 终于呀,怀着期待的心走进了公司的大门,迎面而来的就是个小姐姐。 hr:您,请问你是今天过来面试的吗? 我:哇,这里的小姐姐都这么漂亮吗。嗯,你好,我是今天来面试的。 hr:嗯,那你先简单的做个自我介绍...
  • 一天到晚只会抱怨的人必定是不成熟的人 一天到晚只会抱怨的人,必定是不成熟的人   教你怎样做个会说话会办事的人! 一、社会不会等待你成长 在这个人才济济的时代,社会根本就没有功夫和耐心慢慢培养你。...
  • 眼瞅着日子一天天地过去,学校却迟迟不传来开学的消息,不知道有多少小伙伴因疫情宅家而无缘赛场:_( 本人就是其中之一,这时候我本应该看着已经会学习的车自己在赛道上驰骋,和队友吃着火锅唱着歌,再抽时间调调参...
  • Python发展可以说是如日中天,多的人选择学习Python,也多的人开始关注它,从这些关注度来看,我发现关注度最高的还是Python的就业前景是怎么样的,毕竟大家学习Python都是为了以后能有的工作,那么,Python...
  • linux开发者的一天

    千次阅读 2010-11-12 10:56:00
    Linux内核是项浩大的工程,在全球拥有众多贡献者。她广泛的用途和领先的优势每天源源不断地吸引新的用户加入她的阵营。可是有时候用户会发现代码中存在问题,还有些用户会觉得必须在内核添加他们自己的功能才能...
  • 写在冬日的第一天--一个女程序员第三年工作总结

    万次阅读 热门讨论 2007-11-18 07:55:00
    今天是立冬的第一天,也是我工作三年的日子。照习惯每年会写一个总结。 今年已经不好意思叫自己MM了,都工作三年了,老了。 与以往有鼻子有眼儿的总结起来,这篇文字像是一个人的自言自语,若是浪费了看官的时间...
  • 说下情况吧,2年工作经验,一年java Web开发,一年Android开发,现在入职一家公司3搞Android开发,电信,移动业务的,薪水...现在请大家说说看,有没有必要去7.5K的公司,毕竟多了1000,但我又刚入职,求大神指点啊!
  • 同样是程序员,为什么别人优秀?

    万次阅读 多人点赞 2018-10-27 17:24:06
    也有些人从一般搬的学校毕业,但是水平很高,因为他们付出了其他人多的努力;也有些人,不管是学校还是差学校,毕业了都跑去培训班培训了,出来的也是良莠不齐的。 今天这篇文章,我们不从这些客观因素上去...
  • 网站自适应,很多人都认为是很高级需要很多时间去实现的东西,不愿意去把个现成的网站改成自适应,宁愿单独另外做个移动站。我之前觉得实现网站自适应,要设计很多套CSS,并且要结合jQuery,来实现自适应不同的...
  • 如果今天是生命里的最后一天你想做点啥?

    万次阅读 热门讨论 2007-12-28 10:28:00
    本文地址:http://blog.csdn.net/jobchanceleo/archive/2007/12/28/1998808.aspx 本博客意义特殊的第100篇文章,我想写3件事1、回顾07年的写作路程2、感谢一下朋友们3、说说最近让我感触很深的个话题——如果
  • 修了两的假,等着下个项目的开始,或许这就是身为乙方的宿命。倘若是在自己的办公室里完成项目,那么甲方和乙方的区别怕是不大。而作为个在客户现场工作的乙方工程师,就不是件容易的事。在客户现场面对的,...
  • 程序员进阶中--说说这一年的“酸甜苦辣”

    千次阅读 热门讨论 2013-09-09 08:59:15
    有句话说得,任何没有挫败你的事情,都会让你变得更加强大,所以我要感谢那些信任我、帮助过我的人们,因为你们的存在我才能更加自信的向前奔跑;同时也要感谢那些我厉害的人们,因为你们的光辉时刻照耀着我,...
  • 我的2016--远方不一定有诗,但有更好的自己

    千次阅读 热门讨论 2016-12-30 11:36:07
    绪论抓住2016的最后个工作日,写篇年终总结,想不出来的题目了,好久不玩楸楸的我在空间看到大家都在发自己的新年关键词,抽了自己的拿过来做题目。早上起床莫名的不开心,或许是昨天晚上跟朋友聊得太多;亦...
  • 前些被Python的多线程坑了把,因此产生了写个《Python天坑系列》博客的想法,说说我碰到的那些Python的坑。 而天坑这个词呢,方面指Python的坑,另方面也说明本系列文章也是个坑,对于会写什么内容、有...
  • Debian VS CentOS哪个更好

    万次阅读 2017-04-11 20:23:09
    这几老是在折腾rhel和他的子孙们CentOS,Oracle-Linux,突然发现了一些深入的问题,可以帮助那些为了选择Debian还是CentOS做自己的开发环境或者web服务器而苦恼的人,做个参考:首先,我们知道在Linux中有很多lsm...
  • )、笔试完毕,来了另个人,让我实现个跟公司现有业务关系密切的算法,两句话肯定是说不清的,我苦思冥想一会,又跟他解释好久,我敢肯定算法是对的。。他不了了之,未做任何评价,整个过程无视我,自己...
  • 本人参加的是2017年上半年信息系统项目管理师考试,今天看到2017上半年考试的成绩合格分数为45,也算是侥幸通过,在这里写写自己是如何备考的,供各位考友参考一下。 这里说的50是指白天上班以业余时间备考所需...
  • 当然,毋庸置疑,2018年对于我来说,是收获的一年,是过的飞快的一年,博主是名普普通通的大学生,非985211,非计算机专业出身,在2018年期间经历了大三的下学期,和即将结束的大四上学期。 先说下大三上吧 大三...
  • 博客搬家啦——为了更好地经营博客,本人已经将博客迁移至www.ijavaboy.com。这里已经不再更新,给您带来的不便,深感抱歉!这篇文章的新地址:点击我 本来这篇应该还是写Launcher中item拖拽的实现原理的,奈何...
  • 说说TCP和UDP源端口的确定

    万次阅读 2018-09-22 13:42:53
    到达杭州已经两周了,基本已经适应了新环境的工作节奏,在生活上依然有些许困难会感到无助,...这个问题在几年前就分析过,正好前些天一个朋友又问了,我就又进一步进行了思考,觉得正好可以作为本周的话题来讨论一...
  • HR:说说你最大的优缺点?

    千次阅读 2019-06-25 17:31:00
    点击上方“朱小厮的博客”,选择“设为星标”做积极的人,而不是积极废人首先这个问题是个骨灰级问题,面试必问,很有必要认真探讨一下这个问题的答案。个人觉得可以从三方面来考虑...
  • 说说日内交易

    千次阅读 2018-10-11 14:22:13
     假设一个交易员一天做了300次交易,其中80%的交易赚钱,平均每次每批赚1块,另外20%的交易赔钱,平均每次每批赔1块。如果他每次的仓位大小都是20批,那么,他盈利的交易共赚进4800元(20*1*300*80%=4800元),而...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 70,087
精华内容 28,034
关键字:

一天比一天更好的说说