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

网友评论0