内容
-
图书
-
MIUI 主题
-
游戏
-
应用
花了一天的时间给粉丝做了一个小米官网（高仿）
身为前端程序员，经常会找几个官网试试手，哈哈，这次拿小米官网试试手吧。
目录
效果图：
项目结构
index.html
index.css
js
下载地址：点我下载
效果图：
项目结构
index.html
小米官网
-
小米电视4A 43英寸
6月1日-3日,限量送儿童会员年卡
2099元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 49英寸
6月1日-3日,下单立减300
2599元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米笔记本Air 13.3英寸
独立显卡，全金属机身，超长续航
4999元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米笔记本Air 12.5英寸
独立显卡，全金属机身，超长续航
3599元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
小米电视4A 43英寸
6月1日-3日,限量送儿童会员年卡
2099元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
小米电视4A 43英寸
6月1日-3日,限量送儿童会员年卡
2099元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
小米电视4A 43英寸
6月1日-3日,限量送儿童会员年卡
2099元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视3s 55英寸
6月1日-3日,直降400元
3599元
3999元享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 65英寸
6月1日-3日,下单立减1000
5699元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
电视4A 49英寸人工智能语音版
6月1日~3日，下单立减200元
2899元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米笔记本Air 12.5英寸
独立显卡，全金属机身，超长续航
3599元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 43英寸
6月1日-3日,限量送儿童会员年卡
2099元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 43英寸
6月1日-3日,限量送儿童会员年卡
2099元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米盒子3s
6月1日-3日,限量送儿童会员年卡
299元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 43英寸
6月1日-3日,限量送儿童会员年卡
2099元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 49英寸
6月1日-3日,下单立减300
2599元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米笔记本Air 13.3英寸
独立显卡，全金属机身，超长续航
4999元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米笔记本Air 12.5英寸
独立显卡，全金属机身，超长续航
3599元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 43英寸
6月1日-3日,限量送儿童会员年卡
2099元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 43英寸
6月1日-3日,限量送儿童会员年卡
2099元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 43英寸
6月1日-3日,限量送儿童会员年卡
2099元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 43英寸
6月1日-3日,限量送儿童会员年卡
2099元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 49英寸
6月1日-3日,下单立减300
2599元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米笔记本Air 13.3英寸
独立显卡，全金属机身，超长续航
4999元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米笔记本Air 12.5英寸
独立显卡，全金属机身，超长续航
3599元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 43英寸
6月1日-3日,限量送儿童会员年卡
2099元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 43英寸
6月1日-3日,限量送儿童会员年卡
2099元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 43英寸
6月1日-3日,限量送儿童会员年卡
2099元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 43英寸
6月1日-3日,限量送儿童会员年卡
2099元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 49英寸
6月1日-3日,下单立减300
2599元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米笔记本Air 13.3英寸
独立显卡，全金属机身，超长续航
4999元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米笔记本Air 12.5英寸
独立显卡，全金属机身，超长续航
3599元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 43英寸
6月1日-3日,限量送儿童会员年卡
2099元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 43英寸
6月1日-3日,限量送儿童会员年卡
2099元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
-
小米电视4A 43英寸
6月1日-3日,限量送儿童会员年卡
2099元
享9.8折速度很快，外观漂亮，分量很足！ 每次开机黄灯都亮一会...
为你推荐
-
小米Note 2
2799元起
-
小米5s 64GB
1999元
-
小米5s Plus
2299元起
-
小米电视4A 49英寸 标准版
2599元
-
小米笔记本
3599元起
-
10000mAh小米移动电源2
79元
-
小米手环 2
149元
-
小米盒子3c
199元
-
米家车载空气净化器
449元
-
小米路由器3
149元
-
小米Note 2
2799元起
-
小米5s 64GB
1999元
-
小米5s Plus
2299元起
-
小米电视4A 49英寸 标准版
2599元
-
小米笔记本
3599元起
-
10000mAh小米移动电源2
79元
-
小米手环 2
149元
-
小米盒子3c
199元
-
米家车载空气净化器
449元
-
小米路由器3
149元
周边
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及图片请在源码中下载。
下载地址：点我下载