jquery实现移动端手机端投票页面效果代码-html代码-BFW代码库

jquery实现移动端手机端投票页面效果代码

代码语言：html

代码描述：jquery实现移动端手机端投票页面效果代码，有投票规则、排行榜等

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>投票系统</title>
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
        <meta name="format-detection" content="telephone=NO">
        <meta name="apple-touch-fullscreen" content="YES"/>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
        <meta name="HandheldFriendly" content="True">
        <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/layer.css">
        <style>
            /* 顶部按钮 */
.logo{
    width: 90%;
    margin:1rem auto;
    display: flex;
    justify-content: space-between;
}
.logo_but{
    width:35%;
    height: 1.3rem;
    line-height: 1.3rem;
    font-size:0.6rem;
    border-radius: 3px;
    background:-webkit-linear-gradient(left,orangered,orange);
    background:-o-linear-gradient(right,orangered,orange);
    background:-moz-linear-gradient(right,orangered,orange);
    background:linear-gradient(to right,orangered,orange);
    color: #fffeff;
    text-align: center;
}

#main{
    width: 100%;
    height: 90vh;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    overflow: hidden;
    overflow-y: scroll;
}
/* 列表  */
.Exhibition{

}
.Exhibition_block{
        width: 44%;
    height: 10rem;
    float: left;
        background: #fff;
    border:1px solid #ebebeb;
        margin: 4% 2% 0% 3%;
}

.E_center{
        width: 90%;
    height: 100%;
    margin: 0 auto;
}
// .Exhibition li:last-child{
//      margin-bottom:2.5rem;
// }
.E_top{
        width: 100%;
    height: 45%;
    margin: 0.5rem 0;
}
.E_top img{
        width:100%;
        height:100%;
}
.E_bot p{
    height: 1rem;
        text-align: center;
    font-size: 0.7rem;
    line-height: 1rem;
    font-weight: 600;
    overflow: hidden;
}
.E_bot .sub{
        width: 100%;
    height: 1.3rem;
    line-height: 1.3rem;
    font-size:0.6rem;
    margin: 0.5rem auto;
    border-radius: 3px;
    background:-webkit-linear-gradient(left,orangered,orange);
    background:-o-linear-gradient(right,orangered,orange);
    background:-moz-linear-gradient(right,orangered,orange);
    background:linear-gradient(to right,orangered,orange);
    color: #fffeff;
}


/* 详情 */
.xiangqing{
    position: fixed;
    z-index:15;
    display: none;
}
.xiangqing .table {
    width: 85%;
    margin: 0 auto;
    height: 19rem;
    color: #555;
    background-size: contain;
    padding: 0.5rem 0;
    line-height: 1.7rem;
    color: #da2423;
    font-weight: both;
    margin-top: 1rem;
    background: #fff;
    position: relative;
    border-radius: 3px;
}
.xiangqing .table_scroll{
    width:100%;
    height:16rem;
}
.xiangqing .zuopin_title{
    width: 60%;
    height: 1rem;
    line-height: 1rem;
    margin: 0 auto;
    text-align: center;
    font-size: 1rem;
    color: #222;
    overflow:hidden;
}
.xiangqing .zuopin_title img{
    width:100%;
}
.xiangqing .wrap_head{
    width:85%;
    min-height:3rem;
    display: flex;
    margin: 1rem auto;
}
.xiangqing .wrap_pic{
    width: 3.5rem;
    height: 3.5rem;
}
.xiangqing .wrap_pic img{
    width:100%;
    border-radius: 8px;
}
.xiangqing .wrap_right{
    width:70%;
    height:auto;
}
.xiangqing .wrap_n.........完整代码请登录后点击上方下载按钮下载查看