身为前端程序员，经常会找几个官网试试手，哈哈，这次拿小米官网试试手吧。
目录
效果图：
项目结构
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及图片请在源码中下载。
下载地址：点我下载
转载：https://blog.csdn.net/weixin_41937552/article/details/116504625
查看评论