jquery实现带音乐播放控制的投票欢迎页面效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery实现带音乐播放控制的投票欢迎页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html class=""> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--苹果手机全屏问题--> <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> <title>投票</title> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/boilerplate.css"> <style> @charset "utf-8"; /* Simple fluid media Note: Fluid media requires that you remove the media's height and width attributes from the HTML http://www.alistapart.com/articles/fluid-images/ */ img, object, embed, video { max-width: 100%; } a{ text-decoration:none;} input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } /* IE 6 does not support max-width so default to width 100% */ .ie6 img { width:100%; } @font-face { font-family: 'AlluraRegular'; src: url('CornDog.ttf'); src: url('CornDog.ttf') format('truetype'); } body{ font-family:"微软雅黑";} .fluid { text-align: center; clear: both; margin-left: 0; width: 100%; float: left; display: block; } .fluidList { list-style:none; list-style-image:none; margin:0; padding:0; } .btn{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); box-shadow: 2px 2px 8px rgba(0,0,0,0.2); } .search_text{ width: 70%; padding: 0.46em; -webkit-padding: 0.46em; -moz-padding: 0.46em; border-radius: 5px 0px 0px 5px; -webkit-border-radius: 5px 0px 0px 5px; -moz-border-radius: 5px 0px 0px 5px; border: 1px solid #fff; line-height:1.5em; vertical-align: middle; } .search{ padding: 0.4em; -webkit-padding: 0.4em; -moz-padding: 0.4em; border-radius: 0 5px 5px 0px; -webkit-border-radius: 0 5px 5px 0px; -moz-border-radius: 0 5px 5px 0px; vertical-align: middle; /* border: 2px solid #fff; color: rgb(195, 13, 35); background-color: #fff;*/ border: 2px solid #fff; color: #fff; background-color: rgb(195, 13, 35); font-family: "微软雅黑"; line-height:1.5em; } .pages{ text-align: center; line-height: 4em; } .pages a{ text-decoration:none; color:#fff; display: inline-block; padding: 0.4em 0.6em; line-height: 1em; background-color:rgb(195, 13, 35); border:1px solid #fff; } .pages .current{ color:rgb(195, 13, 35); display: inline-block; padding: 0.4em 0.6em; line-height: 1em; background-color:#fff; border:1px solid #fff; } /* Mobile Layout: 480px and below. */ #ddd{ z-index:1;} #coutent_center{ position: fixed; top: 0.5em; height: 100%; width: 100%; overflow: auto; z-index: 99999; } #coutent_center2{ position: fixed; top: 0.5em; height: 100%; width: 100%; overflow: auto; } .gridContainer { margin-left: auto; margin-right: auto; width: 86.45%; padding-left: 2.275%; padding-right: 2.275%; clear: none; float: none; } #div1 { animation-delay: 1s; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; left: 10px; top: 1em; position: absolute; z-index:10; } #div2 { animation-delay:1.5s; -webkit-animation-delay:1.5s; -moz-animation-delay:1.5s; margin-top: 4em; z-index:10; } #div2_1{ animation-delay:2s; -webkit-animation-delay:2s; -moz-animation-delay:2s; z-index:10; } #div3 { animation-delay:3s; -webkit-animation-delay:3s; -moz-animation-delay:3s; margin-top: 2em; z-index:10; } #div4{ animation-delay:3.5s; -webkit-animation-delay:3.5s; -moz-animation-delay:3.5s; margin-top: 2em; z-index:10; } #div4 .go{ display: inline-block; padding: 0.8em 4em; color: rgb(195, 13, 35); background: #fff; border-radius: 4px; font-size: 1em; font-weight: 900; letter-spacing: 2px; z-index:10; } #search{ position:relative; animation-delay:1.5s; -webkit-animation-delay:1.5s; -moz-animation-delay:1.5s; } #content_list{ /*-webkit-box-shadow: 5px 7px 11px rgba(0,0,0,0.2); -moz-box-shadow: 5px 7px 11px rgba(0,0,0,0.2); box-shadow: 5px 7px 11px rgba(0,0,0,0.2);*/ margin-top:1em; } .content_title{ text-shadow:1px 1px 5px #000; font-family: "CornDog"; font-size: 1.5em; font-weight: bolder; letter-spacing: 2px; color: #fff; padding: 0.8em; } .content_list_li{ width:100%; background: #fff; border-radius: 5px; padding: 5px; width: 100%; } .content_list_li .content_list_li_left,.content_list_li_right{ width: 48.5%; display: inline-block; float: left; } .content_list_li .content_list_li_left{ text-align:center; } .content_list_li .content_list_li_left span{ display: inline-block; background: #fff; border-radius: 50%; box-shadow: 0px 0px 7px #FBB03B; overflow: hidden; height: 50%; width: 55%; border: #FBB03B solid 6px; } .content_list_li_right_li{ line-height: 1.5em; } .content_list_li_right_li_a{ line-height: 2.1em; } .to{ width: 80%; text-align: center; display: inline-block; color: #fff; background: rgb(195, 13, 35); border-radius: 4px; font-size: 1em; font-weight: 900; letter-spacing: 2px; cursor:pointer; } .t1:hover{background: rgb(228, 76, 94);} .on{ background: rgb(173, 167, 167); } .on a:hover,active{background: rgb(173, 167, 167) !important;} .content_list_li_right_li_a a:hover{ /*background: rgb(228, 76, 94);*/ color:#fff; } .zeroMargin_mobile{ margin-left: 0; } .hide_mobile{ display: none; } #tj_num{ margin:0 auto; text-align:center; width:100%; } #tj_num .go{ display: inline-block; width:78%; line-height:3.5em; color: rgb(195, 13, 35); background: #fff; border-radius: 4px; font-size: 1em; font-weight: 900; letter-spacing: 2px; z-inde.........完整代码请登录后点击上方下载按钮下载查看
网友评论0