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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0