jquery实现手机端移动端砸金蛋活动页面代码
代码语言:html
所属分类:布局界面
代码描述:jquery实现手机端移动端砸金蛋活动页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<style>
@charset "utf-8";
body {
width: 100%;
height: 100%;
margin: 0px auto;
font: 12px/1.5 "Microsoft YaHei", Helvitica, Verdana, Arial, san-serif;
color: #333333;
background: #f4f0ca;
}
a {
color: #333333;
text-decoration: none;
}
a:hover {
color: #e8383d;
text-decoration: underline;
}
h1,h2,h3 {
margin: 0px;
}
img,ul,li,p {
margin: 0px;
list-style: none;
padding: 0px;
}
.Title {
width: 100%;
height: 48px;
font: 18px/48px "Microsoft YaHei";
color: #fff;
background: #d03237;
text-align: center;
position: relative;
}
.Title .back {
width: 48px;
height: 48px;
text-indent: -9999px;
background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhajindan/NavIco.png) no-repeat left top;
position: absolute;
left: 0px;
top: 0px;
}
#main {
width: 100%;
height: 302px;
background: #e8383d;
position: relative;
}
#main .bg {
width: 100%;
height: 58px;
background: #f4f0ca;
position: absolute;
z-index: 1;
bottom: 0px;
}
.egg {
width: 310px;
height: auto;
margin: 0px auto;
padding-top: 50px;
z-index: 2;
position: relative;
background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhajindan/MainBg.jpg) top center no-repeat;
background-size: 340px 302px;
}
.eggList {
padding-top: 0px;
position: relative;
width: 310px;
margin: 0px auto;
}
.eggbtn {
background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhajindan/egg_1.png) no-repeat bottom;
width: 158px;
height: 187px;
margin: 0px auto;
cursor: pointer;
position: relative;
background-size: 158px 161px;
}
.eggbtn span {
position: absolute;
width: 30px;
height: 60px;
left: 68px;
top: 64px;
color: #ff0;
font-size: 42px;
font-weight: bold
}
.eggbtn.curr {
background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhajindan/egg_2.png) no-repeat bottom;
cursor: default;
z-index: 300;
background-size: 158px 161px;
}
.eggbtn.curr sup {
position: absolute;
background: url(images/img-4.png) no-repeat;
width: 232px;
height: 181px;
top: -36px;
left: -34px;
z-index: 800;
}
.hammer {
background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhajindan/img-6.png) no-repeat;
width: 74px;
height: 87px;
position: absolute;
text-indent: -9999px;
z-index: 150;
left: 168px;
top: 10px;
}
.resultTip {
position: absolute;
background: #ffc;
width: 148px;
padding: 6px;
z-index: 500;
top: 200px;
left: 10px;
color: #f60;
text-align: center;
overflow: hidden;
display: none;
z-index: 500;
}
.resultTip b {
font-size: 14px;
line-height: 24px;
}
.InfoBox {
padding: 0px 10px;
}
/*抽奖机会*/
.Opportunity {
width: 120px;
height: 26px;
margin: 30px auto 0px;
background: #ba2d31;
text-align: center;
font: 12px/24px "Microsoft YaHei";
color: #fff;
border-radius: 30px;
}
/*中奖人滚动字幕*/
.winners_user {
width: auto;
height: 24px;
background: #f2e7b9;
margin: 0px auto;
position: relative;
margin-top: 10px;
}
.winners_user .ico {
width: 29px;
height: 24px;
position: absolute;
left: 0px;
top: 0px;
z-index: 999;
background: url(//repo.bfw.wiki/bfwrepo/images/huodong/zhajindan/winners_user.png) center top no-repeat;
background-size: 29px 24px;
}
.winners_user #winners_user {
width: auto;
height: 24px;
overflow: hidden;
position: relative;
}
.winners_user #winners_info {
position: absolute;
left: 0px;
top: 0px;
}
.winners_user #winners_info ul {
width: 100000%;
height: 24px;
}
.winners_user #winners_info li {
float: left;
padding-right: 30px;
line-height: 24px;
white-space: nowrap;
}
.winners_user #winners_info li span {
color: #e8471d;
font-weight: bold;
}
/*三个按钮*/
.relevant-list {
width: 100%;
height: 80px;
margin: 0px auto;
padding: 20px 0px;
overflow: hidden;
position: relative;
}
.relevant-list div {
width: 28%;
height: 80px;
text-align: center;
font-size: 14px;
}
.relevant-list div a {
display: block;
height: 80px;
}
.relevant-list div a span {
margin-top: 15px;
}
.relevant-list div a strong {
font-weight: normal;
display: block;
line-height: 1;
}
.relevant-list .award_list_ico {
background: #fff;
position: absolute;
left: 0px;
top: 20px;
}
.relevant-list .award_list_ico span {
wid.........完整代码请登录后点击上方下载按钮下载查看
网友评论0