As a front-end programmer, often find several official websites to try hand, ha ha, this time with xiaomi official website to try hand.
directory
Effect:
The project structure
index.html
index.css
js
Download address: click me to download
Effect:
The project structure
index.html
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The millet's official website</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>
<! -- Head new product advertisement -->
<div class="h-top-bg">
<a href="#"></a>
</div>
<! -- Head shortcut navigation -->
<div class="h-bar">
<div class="wrap clearFix">
<div class="h-l fl">
<ul class = "nav">
<li><a href="#" target="_blank">Millet mall</a></li>
<li>|</li>
<li><a href="#" target="_blank">MIUI</a></li>
<li>|</li>
<li><a href="#" target="_blank">M talking about</a></li>
<li>|</li>
<li><a href="#" target="_blank">The game</a></li>
<li>|</li>
<li><a href="#" target="_blank">Read more</a></li>
<li>|</li>
<li><a href="#" target="_blank">The cloud service</a></li>
<li>|</li>
<li><a href="#" target="_blank">financial</a></li>
<li>|</li>
<li><a href="#" target="_blank">Mi Mall mobile version</a></li>
<li>|</li>
<li><a href="#" target="_blank">The problem of feedback</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>The shopping cart<span>(0)</span>
</a>
<div class="s-info">
</div>
</div>
<ul class = "nav fr">
<li><a href="#" target = "_blank">The login</a></li>
<li>|</li>
<li><a href="#" target ="_blank">registered</a></li>
<li>|</li>
<li><a href="" target ="_black">alerts</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 - well/pms_1490077058. 71391368! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 43 inches</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">2099 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490077454. 46128587! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 49 inches</a></h2>
<p class="small">From June 1 to 3, the order was immediately reduced by 300</p>
<p class="price">2599 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1469583247. 6157588! 220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi Notebook Air 13.3 inches</a></h2>
<p class="small">Independent graphics card, all metal body, long battery life</p>
<p class="price">4999 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490604824. 19051012! 220x220.jpg" alt="#" width="150" height="150">
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490604824. 19051012! 220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Xiaomi Air 12.5-inch laptop</a></h2>
<p class="small">Independent graphics card, all metal body, long battery life</p>
<p class="price">3599 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490077058. 71391368! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 43 inches</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">2099 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490077058. 71391368! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 43 inches</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">2099 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490077058. 71391368! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 43 inches</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">2099 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<div class="sub-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490770630. 65576964! 220x220.png" alt="#" width="80" height="80">
</a>
<h2 class="pro-name"><a href="javascript:;">Mijia IH rice cooker 4L</a></h2>
<p class="price">2099 yuan</p>
</div>
<div class="sub-item">
<a href="javascript:;" class="icon">
<i class="iconfont icon-jiantou5"></i>
</a>
<a href="javascript:;" class="more-link">Browse more<small >hot</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 - well/pms_1474944620. 67265595! 220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 3S 55 inch</a></h2>
<p class="small">From June 1 to 3, 400 yuan will be directly reduced</p>
<p class="price">3599 yuan<s>3999 yuan</s></p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490077569. 08131612! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 65 inch</a></h2>
<p class="small">From June 1st to 3rd, the order was immediately reduced by 1000</p>
<p class="price">5699 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490778061. 59475600! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">TV 4A 49 inch AI voice version</a></h2>
<p class="small">From June 1 to 3, the order immediately reduced 200 yuan</p>
<p class="price">2899 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490778355. 67093197! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Xiaomi Air 12.5-inch laptop</a></h2>
<p class="small">Independent graphics card, all metal body, long battery life</p>
<p class="price">3599 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490077058. 71391368! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 43 inches</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">2099 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490077058. 71391368! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 43 inches</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">2099 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1479190789. 95594557! 220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi box 3s</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">299 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<div class="sub-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490770630. 65576964! 220x220.png" alt="#" width="80" height="80">
</a>
<h2 class="pro-name"><a href="javascript:;">Mijia IH rice cooker 4L</a></h2>
<p class="price">2099 yuan</p>
</div>
<div class="sub-item">
<a href="javascript:;" class="icon">
<i class="iconfont icon-jiantou5"></i>
</a>
<a href="javascript:;" class="more-link">Browse more<small >hot</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 - well/pms_1490077058. 71391368! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 43 inches</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">2099 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490077454. 46128587! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 49 inches</a></h2>
<p class="small">From June 1 to 3, the order was immediately reduced by 300</p>
<p class="price">2599 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1478763592. 13343555! 220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi Notebook Air 13.3 inches</a></h2>
<p class="small">Independent graphics card, all metal body, long battery life</p>
<p class="price">4999 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490702347. 3628109! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Xiaomi Air 12.5-inch laptop</a></h2>
<p class="small">Independent graphics card, all metal body, long battery life</p>
<p class="price">3599 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490077058. 71391368! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 43 inches</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">2099 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490595812. 95661863! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 43 inches</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">2099 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490077058. 71391368! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 43 inches</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">2099 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<div class="sub-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490770630. 65576964! 220x220.png" alt="#" width="80" height="80">
</a>
<h2 class="pro-name"><a href="javascript:;">Mijia IH rice cooker 4L</a></h2>
<p class="price">2099 yuan</p>
</div>
<div class="sub-item">
<a href="javascript:;" class="icon">
<i class="iconfont icon-jiantou5"></i>
</a>
<a href="javascript:;" class="more-link">Browse more<small >hot</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 - well/pms_1478678718. 61531371! 220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 43 inches</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">2099 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1478678718. 61531371! 220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 49 inches</a></h2>
<p class="small">From June 1 to 3, the order was immediately reduced by 300</p>
<p class="price">2599 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from 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:;">Mi Notebook Air 13.3 inches</a></h2>
<p class="small">Independent graphics card, all metal body, long battery life</p>
<p class="price">4999 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490604824. 19051012! 220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Xiaomi Air 12.5-inch laptop</a></h2>
<p class="small">Independent graphics card, all metal body, long battery life</p>
<p class="price">3599 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490077058. 71391368! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 43 inches</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">2099 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490077058. 71391368! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 43 inches</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">2099 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490756071. 3088664! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 43 inches</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">2099 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<div class="sub-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490770630. 65576964! 220x220.png" alt="#" width="80" height="80">
</a>
<h2 class="pro-name"><a href="javascript:;">Mijia IH rice cooker 4L</a></h2>
<p class="price">2099 yuan</p>
</div>
<div class="sub-item">
<a href="javascript:;" class="icon">
<i class="iconfont icon-jiantou5"></i>
</a>
<a href="javascript:;" class="more-link">Browse more<small >hot</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:;">Mi TV 4A 43 inches</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">2099 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from 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:;">Mi TV 4A 49 inches</a></h2>
<p class="small">From June 1 to 3, the order was immediately reduced by 300</p>
<p class="price">2599 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1469429887. 76894954! 220x220.jpg" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi Notebook Air 13.3 inches</a></h2>
<p class="small">Independent graphics card, all metal body, long battery life</p>
<p class="price">4999 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from 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:;">Xiaomi Air 12.5-inch laptop</a></h2>
<p class="small">Independent graphics card, all metal body, long battery life</p>
<p class="price">3599 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from 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:;">Mi TV 4A 43 inches</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">2099 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from 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:;">Mi TV 4A 43 inches</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">2099 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from ZK</p>
</div>
</li>
<li class="brick-item">
<a href="javascript:;" class="img">
<img src="Images/home - well/pms_1490756071. 3088664! 220x220.png" alt="#" width="150" height="150">
</a>
<h2 class="pro-name"><a href="javascript:;">Mi TV 4A 43 inches</a></h2>
<p class="small">June 1 -3, limited number of children membership annual card</p>
<p class="price">2099 yuan</p>
<div class="flag">Enjoy 9.8 fold</div>
<div class="review">
<p class="content">It's fast, it's beautiful, it's heavy! Every time you turn on the yellow light for a while...</p>
<p class="author">Comments from 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:;">Mijia IH rice cooker 4L</a></h2>
<p class="price">2099 yuan</p>
</div>
<div class="sub-item">
<a href="javascript:;" class="icon">
<i class="iconfont icon-jiantou5"></i>
</a>
<a href="javascript:;" class="more-link">Browse more<small >hot</small>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<! -- I recommend you -->
<div class="recommend">
<div class="wrap">
<div class="title">
<p>Recommend to you</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="#">Millet Note 2</a></h3>
<p class="price">2799 yuan</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="#">Millet 5 s 64 gb</a></h3>
<p class="price">1999 yuan</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="#">Millet Plus 5 s</a></h3>
<p class="price">2299 yuan</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="#">Mi TV 4A 49 inch standard edition</a></h3>
<p class="price">2599 yuan</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="#">Xiaomi laptop</a></h3>
<p class="price">3599 yuan</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 Xiaomi Mobile power supply 2</a></h3>
<p class="price">79 yuan</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="#">Mi Band 2</a></h3>
<p class="price">149 yuan</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="#">Xiaomi Box 3C</a></h3>
<p class="price">199 yuan</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="#">Mijia car air purifier</a></h3>
<p class="price">449 yuan</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="#">Mi Router 3</a></h3>
<p class="price">149 yuan</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="#">Millet Note 2</a></h3>
<p class="price">2799 yuan</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="#">Millet 5 s 64 gb</a></h3>
<p class="price">1999 yuan</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="#">Millet Plus 5 s</a></h3>
<p class="price">2299 yuan</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="#">Mi TV 4A 49 inch standard edition</a></h3>
<p class="price">2599 yuan</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="#">Xiaomi laptop</a></h3>
<p class="price">3599 yuan</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 Xiaomi Mobile power supply 2</a></h3>
<p class="price">79 yuan</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="#">Mi Band 2</a></h3>
<p class="price">149 yuan</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="#">Xiaomi Box 3C</a></h3>
<p class="price">199 yuan</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="#">Mijia car air purifier</a></h3>
<p class="price">449 yuan</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="#">Mi Router 3</a></h3>
<p class="price">149 yuan</p>
</li>
</ul>
</div>
</div>
</div>
<! -- Hot reviews -->
<div class="hot-pd">
<div class="head">
<p class="title">The surrounding</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">Five star reviews. When it comes to Xiaomi air purifier, the weather haze in north China is becoming more and more normal, which urgently requires a cost-effective air purification</a>
<p class="author">Comments from iPhone 911</p>
<p class="pd-name"><a href="">Xiaomi water purifier</a>| 1299 yuan</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">It's a good case. It's beautiful and practical. It's light, a little soft but doesn't affect its firmness.</a>
<p class="author">Comments from iPhone 911</p>
<p class="pd-name"><a href="">Xiaomi water purifier</a>| 1299 yuan</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">Very small, like those who do not like to wear pistons can try this ~ very comfortable packaging is as simple as always if only there is a box = ω￣=</a>
<p class="author">Comments from iPhone 911</p>
<p class="pd-name"><a href="">Xiaomi water purifier</a>| 1299 yuan</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">With it, my mother no longer has to worry that I can't drink healthy water. Ha ha, conscience products, civilian prices, to the present water quality played a very good improvement...</a>
<p class="author">Comments from iPhone 911</p>
<p class="pd-name"><a href="">Xiaomi water purifier</a>| 1299 yuan</p>
</li>
</ul>
</div>
<! - content - >
<div class="content">
<div class="head">
<p class="title">content</p>
</div>
<ul class="flex-box">
<! - books -- -- >
<li class="flex-item ">
<h2 class="title">The book</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="">Harry Potter and the Cursed Child</a></h2>
<p class="abs"><a href="">The Chinese version of the eighth Harry Potter story hits! Special rehearsal script!</a></p>
<p class="price">29.37 yuan</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="">All right? All right.</a></h2>
<p class="abs"><a href="">Best-selling author Da Bing's 2016 new book! Let me tell you something, okay okay!</a></p>
<p class="price">17.99 yuan</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">Tons of good books, enjoy quality reading time beautiful Chinese typesetting, millions of readers choose!</p>
<a href="javascript:;" class="link-btn">Go read more</a>
<a href="javascript:;" class ="img">
<img src="images/hot-pd/more-duokan.jpg" alt="#" width="216" height="154">
</a>
</div>
</div>
</div>
</li>
<! - beautiful MIUI theme -- -- >
<li class="flex-item">
<h2 class="title">Beautiful MIUI theme</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="">Doraemon: Nobita's Antarctic Ice Adventure</a></h2>
<p class="abs"><a href="">Doraemon theater version custom theme</a></p>
<p class="price">free</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="">Mi Max 2 official theme</a></h2>
<p class="abs"><a href="">"Super lock screen suspension ball" with both left and right hands can reach the APP with one button and one finger</a></p>
<p class="price">15 m COINS</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="">Millet 6</a></h2>
<p class="abs"><a href="">3D dynamic color change, mi 6 official theme dazzle beautiful birth!</a></p>
<p class="price">12 m COINS</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">Personalized themes, flexible lock screen and free desktop make your phone unique!</p>
<a href="javascript:;" class="link-btn">Head to the MiUI-themed market</a>
<a href="javascript:;" class ="img">
<img src="images/hot-pd/more-duokan.jpg" alt="#" width="216" height="154">
</a>
</div>
</div>
</div>
</li>
<! - the game -- -- >
<li class="flex-item">
<h2 class="title">The game</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="">Pomelo mobile game simulator</a></h2>
<p class="abs"><a href="">Play all xiaomi mobile games on the computer</a></p>
<p class="price">free</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="">Knight errant world</a></h2>
<p class="abs"><a href="">A lifetime can not miss the romantic martial arts!!</a></p>
<p class="price">free</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="">Old nine door</a></h2>
<p class="abs"><a href="">Nine enemies, tomb raiding notes prequel line</a></p>
<p class="price">free</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">Free downloads of massive mobile games every day with cash benefits</p>
<a href="javascript:;" class="link-btn">Head to the Mi Game store</a>
<a href="javascript:;" class ="img">
<img src="images/hot-pd/more-duokan.jpg" alt="#" width="216" height="154">
</a>
</div>
</div>
</div>
</li>
<! - application - >
<li class="flex-item">
<h2 class="title">application</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 m prize of gold</a></h2>
<p class="abs"><a href="">The best apps and games</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="">Help you focus on the important moments in your life</a></p>
<p class="price">free</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="">Millet application</a></h2>
<p class="abs"><a href="">Xiaomi produces must-have products</a></p>
<p class="price">free</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">Help Xiaomi and other Android phone users find good Android apps</p>
<a href="javascript:;" class="link-btn">Head to the Xiaomi App Store</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>
<! - video - >
<div class="video">
<div class="head">
<p class="title">video</p>
<a href="javascript:;" class="btn">Look at all<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="">Listen to Lei on millet 7 years of technology exploration road</a></h4>
<p class="abs"><a href="">The culmination of 6 or 7 years of technological exploration by Xiaomi</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="">Mi 6 appearance design video</a></h4>
<p class="abs"><a href="">Shock!!! The Mi 6 is so beautiful</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="">Mi TV 4 appearance design video</a></h4>
<p class="abs"><a href="">The crying! The most beautiful Xiaomi TV ever</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="">The birth of 4.9mm ultra-thin TV is revealed</a></h4>
<p class="abs"><a href="">Xiaomi TV engineer tells the story behind the ultimate</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>Booking service</a>
</li>
<li>
<a href="javascript:;">
<i class="iconfont icon-iconfont7tian"></i>7 days for return without reason</a>
</li>
<li>
<a href="javascript:;">
<i class="iconfont icon-15tian"></i>Free exchange for 15 days</a>
</li>
<li>
<a href="javascript:;">
<i class="iconfont icon-liwu"></i>Shipping is free over 150 yuan</a>
</li>
<li>
<a href="javascript:;">
<i class="iconfont icon-ditu"></i>More than 520 after-sales outlets</a>
</li>
</ul>
</div>
<div class="f-bd clearFix">
<div class="links">
<dl>
<dt>Help center</dt>
<dd><a href="javascript:;">Account management</a></dd>
<dd><a href="javascript:;">Shopping guide</a></dd>
<dd><a href="javascript:;">Order operation</a></dd>
</dl>
<dl>
<dt>Service support</dt>
<dd><a href="javascript:;">After sales policy</a></dd>
<dd><a href="javascript:;">self-service</a></dd>
<dd><a href="javascript:;">Related to download</a></dd>
</dl>
<dl>
<dt>Offline store</dt>
<dd><a href="javascript:;">The house of millet</a></dd>
<dd><a href="javascript:;">Service outlets</a></dd>
<dd><a href="javascript:;">Retail outlets</a></dd>
</dl>
<dl>
<dt>About millet</dt>
<dd><a href="javascript:;">Understanding of millet</a></dd>
<dd><a href="javascript:;">Join the millet</a></dd>
<dd><a href="javascript:;">Contact us</a></dd>
</dl>
<dl>
<dt>Pay attention to our</dt>
<dd><a href="javascript:;">Sina weibo</a></dd>
<dd><a href="javascript:;">Millet tribe</a></dd>
<dd><a href="javascript:;">The official WeChat</a></dd>
</dl>
<dl>
<dt>Characteristic service</dt>
<dd><a href="javascript:;">F code channel</a></dd>
<dd><a href="javascript:;">Present code</a></dd>
<dd><a href="javascript:;">Anti-counterfeiting query</a></dd>
</dl>
</div>
<div class="contact fr">
<p class="phone">The 400-100-5678</p>
<p class="time">Monday to Sunday 8:00-18:00</p>
<p>(Call charge only)</p>
<a href="javascript:;" class="cs">
<i class="iconfont icon-duanxin"></i>24 hours online customer service</a>
</div>
</div>
<div class="f-ft"></div>
</div>
</footer>
<! --footer end-->
</body>
</html>
Copy the codeindex.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.2 s linear;
transition: all 0.2 s 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
}
Copy the codejs
/** * Created by Administrator on 2017/5/25. */
$(function() {
var $slider = $(".xm-star,.recommend");
// Add mouse-over events to XM-star and Recommend, find the button based on the object this points to and add click events
$slider.mouseenter(function () {
var $this = $(this),
$sliderItem = $this.find(".brick-list"), / / by items
$pre = $this.find(".btn-group .pre"),
$next = $this.find(".btn-group .next"),
len = $sliderItem.children().length, / / number of li
width = 248 * len, //248 is the placeholder width for each LI
page = 0.// Initial page
max = len / 5; // Maximum page
// Set the ul width so that all the Li are in a row
$sliderItem.css("width", width);
$pre.on("click",clickHandleFn);
// Set the button hover effect
$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);
}
/ / move
function move(page){
$sliderItem.css("transform"."translate("+ (-width / max)*page +"px)");
}
// Disable button
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"); }}// Activate button
function enable(page) {
if (page > 0) {
$next.on("click", clickHandleFn).removeClass("disabled");
}
if (page < max - 1) {
$pre.on("click", clickHandleFn).removeClass("disabled"); }}}); });Copy the codeThe main core code is shown above, and the js, CSS and pictures referenced can be downloaded in the source code.
Download address:Let me download