移动端-胡撒网

@charset "utf-8";
/*=========================Reset_start==========================*/
body,h1,h2,h3,h4,h5,h6,div,p,dl,dt,dd,ol,ul,li,form,table,th,td,a,img,span,strong,var,em,input,textarea,select,option
    {
        margin: 0; padding: 0;
        font-size: 14px;
    }
html,body
    {
        font-family:"微软雅黑","宋体",Arail,Tabhoma;
        text-align: left;
    }
ul,ol
    {
        list-style: none;
    }
img
    {
        border: 0 none;/*浏览器兼容问题，边框问题*/
    }
input,select,textarea
    {
        outline:0;/*去除外面的实线*/
    }
textarea
{
    resize:none;/*固定文本框*/
    overflow: auto;/*自定义的出现滚动条*/
}
table
    {
        border-collapse: collapse; 
        border-spacing: 0;
    }
th,strong,var,em
    {
        font-weight: normal; 
        font-style: normal;
    }
a
    {
        text-decoration: none;
        list-style: none;
    }

/*==========================Reset_End===========================*/

body
{
    background: #eeeeee;
}
/*产品说明*/
._rule
{
    background: #fff;
    overflow: hidden;
    padding: 5px 10px;
    margin-bottom: 10px;
}
._ruleLeft
{
    float: left;
}
._ruleLeft span
{
    display: block;
    color: #333;
    font-size: 16px;
    font-weight: bold;
}
._ruleLeft a
{
    display: block;
    color: #999;
    font-size: 14px;
}
._ruleRight
{
    float: right;
}
._ruleRight a
{
    display: block;
    color: #fff;
    background: #05cdff;
    border-radius: 5px;
    font-size: 14px;
}
/*主体部分*/
._main
{
    background: #fff;
    width: 97%;
    margin: 0 auto;
    padding: 10px;
    overflow: hidden;
    margin-top: 5px;
    box-sizing: border-box;
}
._mainLeft
{
    float: left;
    border: 1px solid #dddddd;
    width: 24%;
    box-sizing: border-box;
}
._mainLeft img
{
    display: block;
    width: 76%;
    height: auto;
    margin: 0 auto;
}
._mainRight
{
    float: left;
    padding-left: 10px;
    box-sizing: border-box;
    width: 76%;
}
._mainRight ol
{
    float: left;
}
._mainRight li:nth-child(1)
{
    color: #333;
    font-size: 16px;
    font-weight: bold;
}
._mainRight li:nth-child(2)
{
    color: #999;
    font-size: 14px;
}
._mainRight li:nth-child(3) span:nth-child(1)
{
    font-size: 16px;
    font-weight: bold;
    color: #ff9934;
}
._mainRight li:nth-child(3) span:nth-child(2)
{
    font-size: 14px;
    font-weight: bold;
    color: #999;
}
._mainRight li:nth-child(4) div
{
    border-radius: 10px;
    background: #dddddd;
    color: #fff;
    text-align: center;
    position: relative;
    height: 21px;
}
._mainRight li:nth-child(4) p
{
    position: absolute;
    z-index: 5;
    left:10% ;
}
._mainRight li:nth-child(4) span
{
    position:absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #ff9934;
    width: 45%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    z-index: 2;
}
._buy
{
    margin-left:36%;
    float: left;
}
._buy p
{
    text-align: right;
    padding-bottom: 42px;
}
._buy a
{
    color: #05cdff;
    border: 1px solid #05cdff;
    text-align: center;
    border-radius: 2px;
}

body
{
    background: #efefee;
}
/*登陆部分*/
._bg
{
    padding-top: 80%;
    width: 100%;
    position: relative;
}
._bg img
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}
._bg a:nth-child(2)
{
    position: absolute;
    left: 39%;
    top: 24%;
    width: 91px;
    height: 91px;
}
._bg a:nth-child(2) img
{
    width: 100%;
    height: 100%;

}
._bg button
{
    background: #1ed1fc;
    border-radius: 2px;
    position: absolute;
    left: 41%;
    top: 70%;
}
._bg button a
{
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height:29px;
}
._bg a:nth-child(3)
{
    position: absolute;
    left: 3%;
    top: 18%;
    font-size: 14px;
    color: #fff;
}
._bg a:nth-child(4)
{
    position: absolute;
    left: 76%;
    top: 36%;
    font-size: 14px;
    color: #a5988a;
}
._bg a:nth-child(5)
{
    position: absolute;
    right: 3%;
    top: 18%;

}
._bg a:nth-child(5) span:nth-child(1)
{
    color: #0acdfe;
    font-size: 14px;
}
._bg a:nth-child(5) span:nth-child(2)
{
    color: #959595;
    transform: scale(1.5);
}
._bg a:nth-child(6)
{
    position: absolute;
    left: 18%;
    top: 44%;
    font-size: 14px;
    color: #4396a9;
}
/*生活服务*/
._service
{
    margin-top: 15px;
    width: 100%;
    height: auto;
    padding-top: 12px;
    padding-left: 10px;
    background: url("../images/card-border.png")0px 0px repeat-x;
    box-sizing: border-box;
}
._service h3
{
    font-size: 16px;
    color:#333;
    font-weight: bold;
}
.ui-btn
{
    width: 18px;
    background: #f8f8f8;
}
.ui-row
{
    border-top: 2px solid #ccc;
}
.ui-row li:nth-child(1), .ui-row li:nth-child(2)
{
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.ui-row li:nth-child(3)
{
    border-bottom: 1px solid #ccc;
}
.ui-row li:nth-child(4), .ui-row li:nth-child(5)
{
    border-right: 1px solid #ccc;
}
.ui-row a
{
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    color: #212121;
}
.ui-row img
{
    width: 42px;
    height: 42px;
}
._foot
{
    background: #fff;
    margin-top: 5px;
}

/*头部*/
._head
{
    padding: 10px 10px 8px 16px;
    height: auto;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    width: 100%;
}
._head a:nth-child(1)
{
    float: left;
    width: 27px;
    height: 27px;
    display: block;
    background: url("../images/community-head.png") 0px 0px no-repeat;
    background-size:100% 100% ;
    margin-right: 10px;
}
._head a:nth-child(2)
{
    float: left;
    display: block;
    color: #ff9934;
    font-size: 14px;
    padding-top: 6px;
    padding-left: 20px;
    background: url("../images/community-qiandao.png") 0px 9px no-repeat;
    background-size: 15px 15px;
}
._head a:nth-child(3)
{
    float: right;
    width: 13px;
    height: 13px;
    margin-top: 6px;
    background: url("../images/comunity-fangdajing.png")0px 0px no-repeat;
    background-size: 100% 100%;
    margin-right: 30px;
}
._head a:nth-child(4)
{
    position: absolute;
    right:10px;
    top: 6px;
    width:19px;
    height: 13px;
    background: url("../images/community-talk.png")0px 0px no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
}
/*con start*/
._con
{
    width: 100%;
    padding-top: 45%;
    position: relative;
    background:#ff9934;
    box-sizing: border-box;
}
._conBg
{
    position: absolute;
    left: 12px;
    top: 7px;
    width: 93%;
    height: 92%;
    background: url("../images/community-bai.png") 0px 0px no-repeat;
}
._conBg ul
{
    padding-left: 24px;
    padding-right: 20px;
    padding-top: 24px;
    box-sizing: border-box;
}
._conBg li
{
    border-bottom: 1px dashed #eeeeee;
    height: 30px;
    line-height:30px;
}
._conBg a
{
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
._conA1
{
    position: relative;
}
._conA1 img
{
    position: absolute;
    top: 3px;
    width: 15px;
    height: 21px;
}
._conA1 img:nth-child(1)
{
    left: 27%;
}
._conA1 img:nth-child(3)
{
    right: 27%;
}
._conA1 span
{
    font-size: 18px;
    color: #ff9934;
    position: absolute;
    left: 35%;
}
._conA2,._conA3,._conA4
{
    padding-left: 13%;
    color: #333333;
}
._conA2
{
    background: url("../images/community-ding.png")18px 7px no-repeat;
    background-size: 15px 15px;
}
._conA3
{
    background: url("../images/community-re.png")18px 7px no-repeat;
    background-size: 15px 15px;
}._conA4
 {
     background: url("../images/community-jing.png")18px 7px no-repeat;
     background-size: 15px 15px;
 }
/*热门话题*/
._hotTopic
{
    border-bottom: 1px solid #dddddd;
    padding:12px 10px 0 10px;
    box-sizing: border-box;
    width: 100%;
}
._hotTopic_top
{
    overflow: hidden;
}
._hotTopic_top span:nth-child(1)
{
    height: 14px;
    width: 2px;
    background: #ff9934;
    margin-right: 3px;
    float: left;
    margin-top: 4px;
}
._hotTopic_top span:nth-child(2)
{
    color: #333;
    font-size: 16px;
    float: left;
}
._hotTopic_top a
{
    float: right;
    color: #999999;
    font-size: 12px;
}
/*八宫格*/
.ui-col a
{
    position: relative;
}
.ui-col img
{
    width: 90%;
    height: auto;
    padding-top: 10px;
    padding-left: 5px;
    padding-bottom: 20px;
}
.ui-col span
{
    position: absolute;
    bottom: 25px;
    color: #fff;
    font-size: 12px;
}
.ui-col:nth-child(1) span,.ui-col:nth-child(2) span,.ui-col:nth-child(3) span
{
    left: 30%;
}
.ui-col:nth-child(4) span,.ui-col:nth-child(5) span,.ui-col:nth-child(6) span,.ui-col:nth-child(7) span
{
    left: 25%;
}
.ui-col:nth-child(8) span
{
    left: 35%;
}
/*我关注的圈子*/
._care
{
    padding-top: 16px;
    box-sizing: border-box;
    width: 100%;
}
._careTop
{
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}
._careTop span:nth-child(1)
{
    height: 14px;
    width: 2px;
    background: #ff9934;
    margin-right: 3px;
    float: left;
    margin-top: 4px;
}
._careTop span:nth-child(2)
{
    color: #333;
    font-size: 16px;
    float: left;
}
._careTop a
{
    float: right;
    color: #999999;
    font-size: 12px;
}
._careRow img
{
    float: left;
    width: 50px;
    height: 50px;
    padding-left: 15px;
}
._careRow div
{
    float: left;
    padding-left: 10px;
    padding-top: 8px;
}
._careRow h4
{
    color: #ff9943;
}
/*选择导航栏*/
._nav
{
    border-top: 2px solid #dddddd;
    line-height:46px;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
}
._nav span
{
    float: left;
    width: 25%;
    text-align: center;
    display: block;
    border-bottom: 2px solid #F8F8F8;
}
._nav span:hover
{
    border-bottom:2px solid #ff9943;
    color: #ff9943;
}
/*主要内容*/
._main
{
    border: 1px solid #dddddd;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    box-sizing: border-box;
}
._mainHead
{
    padding: 15px 8px 10px 10px;
    overflow: hidden;
}
._mainHead img
{
    float: left;
    width: 28px;
    height: 28px;
}
._mainHead span:nth-child(2)
{
    padding-left: 10px;
    padding-top: 5px;
    font-size: 12px;
    display: block;
    float: left;
}
._mainHead span:nth-child(3)
{
    color: #bbbbbb;
    float: right;
}
._main p
{
    padding-left: 5px;
    font-size: 12px;
}
._mainPic
{
    overflow: hidden;
}
._mainPic img
{
    box-sizing: border-box;
    width: 33%;
    padding-left: 5px;
    height: auto;
    float: left;
}
._main ul
{
    overflow: hidden;
    padding-top: 11px;
    padding-left: 6px;
}
._main li
{
    float: left;
}
._main li:nth-child(1)
{
    color: #999999;
}
._main li:nth-child(2)
{
    margin-left: 27%;
    padding-left: 26px;
    background: url("../images/community-main3.png")0 4px no-repeat;
    background-size: 18px 11px;
}
._main li:nth-child(3)
{
    margin-left: 20px;
    padding-left: 23px;
    background: url("../images/community-main4.png")0 2px no-repeat;
    background-size: 16px 15px;
}
._main li:nth-child(4)
{
    margin-left: 20px;
    padding-left: 23px;
    background: url("../images/community-main5.png")0 0 no-repeat;
    background-size: 15px 16px;
}
/*广告*/
._ad
{
    padding: 14px 10px 13px;
    border-bottom:1px solid #dddddd;
    box-sizing: border-box;
    width: 100%;
}
._ad p
{
    font-size: 14px;
}
._ad a
{
    display: block;
    width: 96%;
    height: auto;
    padding-left: 10px;
    padding-right:10px;
    padding-top: 8px;
}
._ad img
{
    width: 100%;
    height: auto;
}
/*底部导航栏*/
._foot
{
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    padding-top: 5px;
    padding-bottom: 5px;
    position: relative;

}
._foot:after
{
    content: "";
    display: block;
    clear: both;
}
._foot li
{
    float: left;
    margin-left:6.4% ;
    text-align: center;
}
._foot a
{
    display: block;
    width: 100%;
    height: 100%;
    color: #666666;
}
._foot span
{
    display: block;
    width: 100%;

}
._foot li img
{
    width: 27px;
    height:22px
}
._foot li:nth-child(2)
{
    margin-left: 12.8%;
}
._footImg
{
    position: absolute;
    top:-10%;
    left: 41%;
    width: 60px;
    height: 51px;
}
._foot li:nth-child(3)
{
    margin-left: 29%;
}
._foot li:nth-child(3) img
{
    width: 23px;
    height: 23px;
}
._foot li:nth-child(4)
{
    margin-left: 10%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="活动">
    <meta name="description" content="活动">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/frozen.css">
    <link rel="stylesheet" href="css/activity.css">
    <title>Title</title>
    <style>
        .ui-slider
        {
            padding-top: 40%;
        }
        .ui-slider-indicators
        {
            display: none;
        }
        .ui-progress
        {
            height: 10px;
        }
    </style>
</head>
<body>
    <!--头部部分-->
    <header class="ui-header ui-header-stable ui-border-b">
        <i class="ui-icon-return" onclick="history.back()"></i>
        <h1>活动</h1>
    </header>
    <!--轮播图-->
    <div class="ui-slider">
        <ul class="ui-slider-content" style=" 300%; transition-property: transform; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(-375px, 0px) translateZ(0px);">
            <li class=""><span style="background-image:url(images/activity-bg.jpg)"></span></li>
            <li class="current"><span style="background-image:url(images/activity-bg.jpg)"></span></li>
            <li class=""><span style="background-image:url(images/activity-bg.jpg)"></span></li>
        </ul>
    </div>
    <!--产品说明-->
    <div class="_rule">
        <div class="_ruleLeft">
            <span>产品名称</span>
            <a href="">活动说明</a>
        </div>
        <div class="_ruleRight">
            <a href="">活动规则</a>
        </div>
    </div>
    <!--主体部分，产品介绍-->
    <div class="_main">
        <div class="_mainLeft">
            <img src="images/activity-wang.jpg" alt="">
        </div>
        <div class="_mainRight">
           <ol>
               <li>产品名称</li>
               <li>产品说明</li>
               <li>
                   <span>￥199</span>
                   <span>￥112</span>
               </li>
               <li>
                   <div>
                       <p>已抢购45%</p>
                       <span></span>
                   </div>
               </li>
           </ol>
            <span class="_buy">
                <p>1050m</p>
                <a href="">立即抢购</a>
            </span>
       </div>
   </div>
    <!--主体部分，产品介绍-->
    <div class="_main">
        <div class="_mainLeft">
            <img src="images/activity-da.jpg" alt="">
        </div>
        <div class="_mainRight">
            <ol>
                <li>产品名称</li>
                <li>产品说明</li>
                <li>
                    <span>￥199</span>
                    <span>￥112</span>
                </li>
                <li>
                    <div>
                        <p>已抢购45%</p>
                        <span></span>
                    </div>
                </li>
            </ol>
            <span class="_buy">
                <p>1050m</p>
                <a href="">立即抢购</a>
            </span>
        </div>
    </div>
    <!--主体部分，产品介绍-->
    <div class="_main">
        <div class="_mainLeft">
            <img src="images/activity-fu.jpg" alt="">
        </div>
        <div class="_mainRight">
            <ol>
                <li>产品名称</li>
                <li>产品说明</li>
                <li>
                    <span>￥199</span>
                    <span>￥112</span>
                </li>
                <li>
                    <div>
                        <p>已抢购45%</p>
                        <span></span>
                    </div>
                </li>
            </ol>
            <span class="_buy">
                <p>1050m</p>
                <a href="">立即抢购</a>
            </span>
        </div>
    </div>
    <!--主体部分，产品介绍-->
    <div class="_main">
        <div class="_mainLeft">
            <img src="images/activity-wang.jpg" alt="">
        </div>
        <div class="_mainRight">
            <ol>
                <li>产品名称</li>
                <li>产品说明</li>
                <li>
                    <span>￥199</span>
                    <span>￥112</span>
                </li>
                <li>
                    <div>
                        <p>已抢购45%</p>
                        <span></span>
                    </div>
                </li>
            </ol>
            <span class="_buy">
                <p>1050m</p>
                <a href="">立即抢购</a>
            </span>
        </div>
    </div>
    <!--主体部分，产品介绍-->
    <div class="_main">
        <div class="_mainLeft">
            <img src="images/activity-da.jpg" alt="">
        </div>
        <div class="_mainRight">
            <ol>
                <li>产品名称</li>
                <li>产品说明</li>
                <li>
                    <span>￥199</span>
                    <span>￥112</span>
                </li>
                <li>
                    <div>
                        <p>已抢购45%</p>
                        <span></span>
                    </div>
                </li>
            </ol>
            <span class="_buy">
                <p>1050m</p>
                <a href="">立即抢购</a>
            </span>
        </div>
    </div>
    <!--主体部分，产品介绍-->
    <div class="_main">
        <div class="_mainLeft">
            <img src="images/activity-fu.jpg" alt="">
        </div>
        <div class="_mainRight">
            <ol>
                <li>产品名称</li>
                <li>产品说明</li>
                <li>
                    <span>￥199</span>
                    <span>￥112</span>
                </li>
                <li>
                    <div>
                        <p>已抢购45%</p>
                        <span></span>
                    </div>
                </li>
            </ol>
            <span class="_buy">
                <p>1050m</p>
                <a href="">立即抢购</a>
            </span>
        </div>
    </div>
    <!------------------------js---------------------->
<script src="js/zepto.min.js"></script>
<script src="js/frozen.js"></script>
<script >
    var slider = new fz.Scroll('.ui-slider', {
        role: 'slider',
        indicator: true,
        autoplay: true,
        interval: 3000
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="卡支付">
    <meta name="description" content="卡支付">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/frozen.css">
    <link rel="stylesheet" href="css/community.css">
    <link rel="stylesheet" href="css/cardPayment.css">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <!--头部-->
    <header class="ui-header ui-header-stable ui-border-b">
        <h1>卡支付</h1>
        <img class="ui-btn" src="images/card-talk.png" alt="">
    </header>
    <!--登陆部分-->
    <div class="_bg">
        <img src="images/card-bg.jpg" alt="">
        <a href="">
            <img src="images/card-touxiang.png" alt="">
        </a>
        <a href="">银行卡</a>
        <a href="">银行卡</a>
        <a href="">
            <span>默认卡设置</span>
            <span>></span>
        </a>
        <a href="">账单</a>
        <button>
            <a href="">点击登录</a>
        </button>
    </div>
    <!--生活服务-->
    <div class="_service">
        <h3>生活服务</h3>
        <!--六宫格-->
        <ul class="ui-row">
            <li class="ui-col ui-col-33">
                <a href="">
                    <img src="images/card-lift-ran.jpg" alt="">
                    <p>燃气供暖</p>
                </a>
            </li>
            <li class="ui-col ui-col-33">
                <a href="">
                    <img src="images/card-life-dian.jpg" alt="">
                    <p>电费</p>
                </a>
            </li>
            <li class="ui-col ui-col-33">
                <a href="">
                    <img src="images/card-life-shui.jpg" alt="">
                    <p>水费</p>
                </a>
            </li>
            <li class="ui-col ui-col-33">
                <a href="">
                    <img src="images/card-life-gu.jpg" alt="">
                    <p>固话宽带</p>
                </a>
            </li>
            <li class="ui-col ui-col-33">
                <a href="">
                    <img src="images/card-life-you.jpg" alt="">
                    <p>有线电视</p>
                </a>
            </li>
            <li class="ui-col ui-col-33">
                <a href="">
                    <img src="images/card-life-wu.jpg" alt="">
                    <p>物业费</p>
                </a>
            </li>
        </ul>
    </div>
    <!--卡支付-->
    <div class="_service">
        <h3>卡支付</h3>
        <!--六宫格-->
        <ul class="ui-row">
            <li class="ui-col ui-col-33">
                <a href="">
                    <img src="images/card-card-ka.png" alt="">
                    <p>办卡进度</p>
                </a>
            </li>
            <li class="ui-col ui-col-33">
                <a href="">
                    <img src="images/card-card-kai.png" alt="">
                    <p>我要开卡</p>
                </a>
            </li>
            <li class="ui-col ui-col-33">
                <a href="">
                    <img src="images/card-card-banka.png" alt="">
                    <p>我要办卡</p>
                </a>
            </li>
            <li class="ui-col ui-col-33">
                <a href="">
                    <img src="images/card-card-guanli.png" alt="">
                    <p>卡片管理</p>
                </a>
            </li>
            <li class="ui-col ui-col-33">
                <a href="">
                    <img src="images/card-card-zhang.png" alt="">
                    <p>账址修改</p>
                </a>
            </li>
            <li class="ui-col ui-col-33">
                <a href="">
                    <img src="images/card-card-tuijian.png" alt="">
                    <p>推荐有礼</p>
                </a>
            </li>
        </ul>
    </div>
    <!--底部导航栏-->
    <ol class="_foot">
        <li>
            <a href="###">
                <img src="images/community-foot1.png" alt="">
                <span>首页</span>
            </a>
        </li>
        <li>
            <a href="###">
                <img src="images/community-foot2.jpg" alt="">
                <span>社交</span>
            </a>
        </li>
        <li>
            <a href="###">
                <img src="images/community-foot4.png" alt="">
                <span>发现</span>
            </a>
        </li>
        <li>
            <a href="###">
                <img src="images/community-foot5.png" alt="">
                <span>惠生活</span>
            </a>
        </li>
        <img src="images/community-foot3.png" alt="" class="_footImg">
    </ol>
    <!-----------js----------->
    <script src="js/zepto.min.js"></script>
    <script src="js/frozen.js"></script>
    <script>
        $("._foot li").tap(function(){
            var i=$('._foot li').index(this);
            var
                    arr1=["images/community-foot1-1.png","images/community-foot2-1.png","images/community-foot4-1.png","images/community-foot5-1.png"];
            var
                    arr2=["images/community-foot1.png","images/community-foot2.jpg","images/community-foot4.png","images/community-foot5.png"];
            $('._foot li img').eq(i).attr('src',arr1[i]).parent().parent().siblings().find('img').each(function (a) {
                for (var j=0;j<$('._foot li').length;j++){
                    if (i!=j){
                        $('._foot li img').eq(j).attr('src',arr2[j]);
                    }
                }
            });
            $('._foot li span').eq(i).css({"color":"#ff9934"}).parent().parent().siblings().find('span').css({"color":"#666"})
        });

    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="社区">
    <meta name="description" content="社区">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/community.css">
    <link rel="stylesheet" href="css/frozen.css">
    <title>Title</title>
    <style>
        .ui-slider
        {
            padding-top: 34%;
        }
        .ui-slider-indicators
        {
            display: none;
        }
        .ui-col a
        {
            display: block;
            width: 100%;
            height: 100%;
        }
        ._careRow
        {
            border-bottom: 1px solid #ddd;
        }
    </style>
</head>
<body>
<!--头部部分-->
    <div class="_head">
        <a href=""></a>
        <a href="">签到</a>
        <a href=""></a>
        <a href=""></a>
    </div>
<!--轮播图部分-->
<div class="ui-slider">
    <ul class="ui-slider-content" style=" 300%; transition-property: transform; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(-320px, 0px) translateZ(0px);">
        <li class=""><span style="background-image:url(images/community-bg.jpg)"></span></li>
        <li class="current"><span style="background-image:url(images/community-bg.jpg)"></span></li>
        <li class=""><span style="background-image:url(images/community-bg.jpg)"></span></li>
    </ul>
</div>
<!--精彩内容部分-->
<div class="_con">
    <div class="_conBg">
        <ul>
            <li>
                <a href="" class="_conA1">
                    <img src="images/community-huo.png" alt="">
                    <span>精彩不间断</span>
                    <img src="images/community-huo.png" alt="">
                </a>
            </li>
            <li>
                <a href="" class="_conA2">写好贴，拿大奖！百万好礼送不停！！！</a>
            </li>
            <li>
                <a href="" class="_conA3">闲置物品任你淘，百里挑一，有惊喜！</a>
            </li>
            <li>
                <a href="" class="_conA4">帮帮忙啊！帮帮忙！你帮，我帮，大家帮！</a>
            </li>
        </ul>
    </div>
</div>
<!--热门话题-->
<div class="_hotTopic">
    <div class="_hotTopic_top">
        <span></span>
        <span>热门话题</span>
        <a href="">更多</a>
    </div>
    <ul class="ui-row">
        <li class="ui-col ui-col-25">
            <a href="">
                <img src="images/community-bang.png" alt="">
                <span>帮帮忙</span>
            </a>
        </li>
        <li class="ui-col ui-col-25">
            <a href="">
                <img src="images/community-tao.png" alt="">
                <span>淘二手</span>
            </a>
        </li>
        <li class="ui-col ui-col-25">
            <a href="">
                <img src="images/community-er.png" alt="">
                <span>二次元</span>
            </a>
        </li>
        <li class="ui-col ui-col-25">
            <a href="">
                <img src="images/community-mei.png" alt="">
                <span>美丽计划</span>
            </a>
        </li>
        <li class="ui-col ui-col-25">
            <a href="">
                <img src="images/community-wo.png" alt="">
                <span>我爱运动</span>
            </a>
        </li>
        <li class="ui-col ui-col-25">
            <a href="">
                <img src="images/community-mu.png" alt="">
                <span>母婴同盟</span>
            </a>
        </li>
        <li class="ui-col ui-col-25">
            <a href="">
                <img src="images/community-shu.png" alt="">
                <span>数码狂人</span>
            </a>
        </li>
        <li class="ui-col ui-col-25">
            <a href="">
                <img src="images/community-cha.png" alt="">
                <span>茶道</span>
            </a>
        </li>

    </ul>
</div>
<!--我关注的圈子-->
<div class="_care">
    <div class="_careTop">
        <span></span>
        <span>我关注的圈子</span>
        <a href="">更多</a>
    </div>
    <ul class="ui-row _careRow">
        <li class="ui-col ui-col-50">
            <img src="images/commnity-care1.png" alt="">
            <div>
                <h3>帮帮忙</h3>
                <h4>帖子：539</h4>
            </div>
        </li>
        <li class="ui-col ui-col-50">
            <img src="images/commnity-care2.png" alt="">
            <div>
                <h3>数码狂人</h3>
                <h4>帖子：480</h4>
            </div>
        </li>
    </ul>
    <ul class="ui-row _careRow">
        <li class="ui-col ui-col-50">
            <img src="images/commnity-care3.png" alt="">
            <div>
                <h3>二次元</h3>
                <h4>帖子：1056</h4>
            </div>
        </li>
        <li class="ui-col ui-col-50">
            <img src="images/commnity-care4.png" alt="">
            <div>
                <h3>美丽计划</h3>
                <h4>帖子：3650</h4>
            </div>
        </li>
    </ul>
</div>
<!--选择导航栏-->
<div class="_nav">
    <span>精选</span>
    <span>帮帮忙</span>
    <span>胡撒去</span>
    <span>二手货</span>
</div>
<!--主要内容-->
<div class="_main">
    <div class="_mainHead">
        <img src="images/community-main1.png" alt="">
        <span>标题标题标题</span>
        <span>#电影控#</span>
    </div>
    <p>你需要将配色方案从图片中提取出来，那么今天这篇文章，我们就来为您列举推荐</p>
    <div class="_mainPic">
        <img src="images/community-main2.png" alt="">
        <img src="images/community-main2.png" alt="">
        <img src="images/community-main2.png" alt="">
    </div>
    <ul>
        <li>25分钟前</li>
        <li>121</li>
        <li>1230</li>
        <li>1102</li>
    </ul>
</div>
<!--主要内容-->
<div class="_main">
    <div class="_mainHead">
        <img src="images/community-main1.png" alt="">
        <span>标题标题标题</span>
        <span>#电影控#</span>
    </div>
    <p>你需要将配色方案从图片中提取出来，那么今天这篇文章，我们就来为您列举推荐</p>
    <div class="_mainPic">
        <img src="images/community-main2.png" alt="">
        <img src="images/community-main2.png" alt="">
        <img src="images/community-main2.png" alt="">
    </div>
    <ul>
        <li>25分钟前</li>
        <li>121</li>
        <li>1230</li>
        <li>1102</li>
    </ul>
</div>
<!--广告-->
<div class="_ad">
    <p>【名品特卖】全场生鲜抄底价</p>
    <a href="">
        <img src="images/community-ad.jpg" alt="">
    </a>
</div>
<!--主要内容-->
<div class="_main">
    <div class="_mainHead">
        <img src="images/community-main1.png" alt="">
        <span>标题标题标题</span>
        <span>#电影控#</span>
    </div>
    <p>你需要将配色方案从图片中提取出来，那么今天这篇文章，我们就来为您列举推荐</p>
    <div class="_mainPic">
        <img src="images/community-main2.png" alt="">
        <img src="images/community-main2.png" alt="">
        <img src="images/community-main2.png" alt="">
    </div>
    <ul>
        <li>25分钟前</li>
        <li>121</li>
        <li>1230</li>
        <li>1102</li>
    </ul>
</div>
<!--推荐圈子-->
<div class="_care">
    <div class="_careTop _Recommend">
        <p>推荐圈子</p>
    </div>
    <ul class="ui-row _careRow">
        <li class="ui-col ui-col-50">
            <img src="images/commnity-care1.png" alt="">
            <div>
                <h3>帮帮忙</h3>
                <h4>帖子：539</h4>
            </div>
        </li>
        <li class="ui-col ui-col-50">
            <img src="images/commnity-care2.png" alt="">
            <div>
                <h3>数码狂人</h3>
                <h4>帖子：480</h4>
            </div>
        </li>
    </ul>
    <ul class="ui-row _careRow">
        <li class="ui-col ui-col-50">
            <img src="images/commnity-care3.png" alt="">
            <div>
                <h3>二次元</h3>
                <h4>帖子：1056</h4>
            </div>
        </li>
        <li class="ui-col ui-col-50">
            <img src="images/commnity-care4.png" alt="">
            <div>
                <h3>美丽计划</h3>
                <h4>帖子：3650</h4>
            </div>
        </li>
    </ul>
</div>
<!--主要内容-->
<div class="_main">
    <div class="_mainHead">
        <img src="images/community-main1.png" alt="">
        <span>标题标题标题</span>
        <span>#电影控#</span>
    </div>
    <p>你需要将配色方案从图片中提取出来，那么今天这篇文章，我们就来为您列举推荐</p>
    <div class="_mainPic">
        <img src="images/community-main2.png" alt="">
        <img src="images/community-main2.png" alt="">
        <img src="images/community-main2.png" alt="">
    </div>
    <ul>
        <li>25分钟前</li>
        <li>121</li>
        <li>1230</li>
        <li>1102</li>
    </ul>
</div>
<!--主要内容-->
<div class="_main">
    <div class="_mainHead">
        <img src="images/community-main1.png" alt="">
        <span>标题标题标题</span>
        <span>#电影控#</span>
    </div>
    <p>你需要将配色方案从图片中提取出来，那么今天这篇文章，我们就来为您列举推荐</p>
    <div class="_mainPic">
        <img src="images/community-main2.png" alt="">
        <img src="images/community-main2.png" alt="">
        <img src="images/community-main2.png" alt="">
    </div>
    <ul>
        <li>25分钟前</li>
        <li>121</li>
        <li>1230</li>
        <li>1102</li>
    </ul>
</div>
<!--底部导航栏-->
<ol class="_foot">
    <li>
        <a href="###">
            <img src="images/community-foot1.png" alt="">
            <span>首页</span>
        </a>
    </li>
    <li>
        <a href="###">
            <img src="images/community-foot2.jpg" alt="">
            <span>社交</span>
        </a>
    </li>
    <li>
        <a href="###">
            <img src="images/community-foot4.png" alt="">
            <span>发现</span>
        </a>
    </li>
    <li>
        <a href="###">
            <img src="images/community-foot5.png" alt="">
            <span>惠生活</span>
        </a>
    </li>
    <img src="images/community-foot3.png" alt="" class="_footImg">
</ol>
<!----------------------js--------------------------->
<script src="js/zepto.min.js"></script>
<script src="js/frozen.js"></script>
<script src="js/community.js"></script>
</body>
</html>

var slider = new fz.Scroll('.ui-slider', {
    role: 'slider',
    indicator: true,
    autoplay: true,
    interval: 3000
});
/* 底部导航栏*/
$("._foot li").tap(function(){
    var i=$('._foot li').index(this);
    var
        arr1=["images/community-foot1-1.png","images/community-foot2-1.png","images/community-foot4-1.png","images/community-foot5-1.png"];
    var
        arr2=["images/community-foot1.png","images/community-foot2.jpg","images/community-foot4.png","images/community-foot5.png"];
    $('._foot li img').eq(i).attr('src',arr1[i]).parent().parent().siblings().find('img').each(function (a) {
        for (var j=0;j<$('._foot li').length;j++){
            if (i!=j){
                $('._foot li img').eq(j).attr('src',arr2[j]);
            }
        }
    });
    $('._foot li span').eq(i).css({"color":"#ff9934"}).parent().parent().siblings().find('span').css({"color":"#666"})
});