首页 新闻 赞助 找找看

同样的背景色,前景色,在手机上显示的偏暗...

0
悬赏园豆:100 [已关闭问题] 关闭于 2016-06-23 15:46
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
    <meta name="applicable-device" content="mobile">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/zepto.min.js"></script>
    <script src="js/swiper.min.js"></script>
</head>
<body>
    <header class="header">
        <img class="logo" src="images/logo.png" alt="">
        <div class="right">
            <a href="" class="search"></a>
            <a href="" class="user"></a>
        </div>
    </header>
    <nav class="nav">
        <div class="a_link active"><a href="">首页</a></div>
        <div class="a_link"><a href="">网游</a></div>
        <div class="a_link"><a href="">单击</a></div>
        <div class="a_link"><a href="">分类</a></div>
        <div class="a_link"><a href="">资讯</a></div>
    </nav>
    <div class="banner_swiper" id="swiperBanner">
        <div class="wrapper">
              <a href="" class="slide"><img src="images/banner1.png" alt=""></a>
              <a href="" class="slide"><img src="images/banner2.png" alt=""></a>
              <a href="" class="slide"><img src="images/banner3.png" alt=""></a>
        </div>
    </div>
    <div class="my_play">
        <div class="public_tit">
            <h2>我玩过的</h2>
            <!-- <div class="list_page" id="swiperListPage"><span></span><span></span></div> -->
        </div>
        <div class="list_swiper" id="swiperList">
            <div class="list_wrapper">
                  <div class="list_slide">
                      <a href="" class="list_box"><img src="images/game_logo_1.jpg" alt=""><p>音乐律动1</p></a>
                      <a href="" class="list_box"><img src="images/game_logo_2.jpg" alt=""><p>音乐律动2</p></a>
                      <a href="" class="list_box"><img src="images/game_logo_3.jpg" alt=""><p>音乐律动3</p></a>
                      <a href="" class="list_box"><img src="images/game_logo_1.jpg" alt=""><p>音乐律动4</p></a>
                  </div>
                  <div class="list_slide">
                      <a href="" class="list_box"><img src="images/game_logo_1.jpg" alt=""><p>音乐律动5</p></a>
                      <a href="" class="list_box"><img src="images/game_logo_2.jpg" alt=""><p>音乐律动6</p></a>
                      <a href="" class="list_box"><img src="images/game_logo_3.jpg" alt=""><p>音乐律动7</p></a>
                      <a href="" class="list_box"><img src="images/game_logo_1.jpg" alt=""><p>音乐律动8</p></a>
                  </div>
            </div>
        </div>
    </div>
    <div class="week_recommend">
        <div class="public_tit">
            <h2>本周推荐</h2>
        </div>
        <div class="game_wrap">
            <a href="" class="game_box">
                <img src="images/game_logo_1.jpg" alt="">
                <div><h2>德玛西亚</h2><p>策略类</p></div>
            </a>
            <a href="" class="game_box">
                <img src="images/game_logo_2.jpg" alt="">
                <div><h2>德玛西亚</h2><p>策略类</p></div>
            </a>
            <a href="" class="game_box">
                <img src="images/game_logo_3.jpg" alt="">
                <div><h2>德玛西亚</h2><p>策略类</p></div>
            </a>
            <a href="" class="game_box">
                <img src="images/game_logo_1.jpg" alt="">
                <div><h2>德玛西亚</h2><p>策略类</p></div>
            </a>
        </div>
    </div>
    <div class="hot_online">
        <div class="public_tit">
            <h2>热门网游</h2>
            <a href="">更多></a>
        </div>
        <a class="adv_banner"><img src="images/banner.jpg" alt=""></a>
        <div class="list_wrap">
            <div class="g_box">
                <a href="" class="g_img"><img src="images/game_logo_1.jpg" alt=""><p>音乐律动5</p></a>
                <a href="" class="g_start">开始</a>
            </div>
            <div class="g_box">
                <a href="" class="g_img"><img src="images/game_logo_2.jpg" alt=""><p>音乐律动5</p></a>
                <a href="" class="g_start">开始</a>
            </div>
            <div class="g_box">
                <a href="" class="g_img"><img src="images/game_logo_3.jpg" alt=""><p>音乐律动5</p></a>
                <a href="" class="g_start">开始</a>
            </div>
            <div class="g_box">
                <a href="" class="g_img"><img src="images/game_logo_1.jpg" alt=""><p>音乐律动5</p></a>
                <a href="" class="g_start">开始</a>
            </div>
        </div>
    </div>
    <div class="hot_alone">
        <div class="public_tit">
            <h2>热门单击</h2>
            <a href="">更多></a>
        </div>
        <div class="list_wrap">
            <div class="g_box">
                <a href="" class="g_img">
                    <img src="images/game_logo_1.jpg" alt="">
                    <div class="g_img_txt">
                        <h2>音乐律动5</h2>
                        <p><span>休闲类</span><span>人气:20000</span></p>
                    </div>
                </a>
                <a href="" class="g_start">开始</a>
            </div>
            <div class="g_box">
                <a href="" class="g_img">
                    <img src="images/game_logo_1.jpg" alt="">
                    <div class="g_img_txt">
                        <h2>音乐律动5</h2>
                        <p><span>休闲类</span><span>人气:20000</span></p>
                    </div>
                </a>
                <a href="" class="g_start">开始</a>
            </div>
            <div class="g_box">
                <a href="" class="g_img">
                    <img src="images/game_logo_1.jpg" alt="">
                    <div class="g_img_txt">
                        <h2>音乐律动5</h2>
                        <p><span>休闲类</span><span>人气:20000</span></p>
                    </div>
                </a>
                <a href="" class="g_start">开始</a>
            </div>
            <div class="g_box">
                <a href="" class="g_img">
                    <img src="images/game_logo_1.jpg" alt="">
                    <div class="g_img_txt">
                        <h2>音乐律动5</h2>
                        <p><span>休闲类</span><span>人气:20000</span></p>
                    </div>
                </a>
                <a href="" class="g_start">开始</a>
            </div>
        </div>
    </div>
    <div class="adv_index">
        <img src="images/banner.jpg" alt="">
        <div class="tip">其实不拿奖又怎么样,有一种王被称为“无冕之王”</div>
    </div>
    <div class="hot_online">
        <div class="public_tit">
            <h2>最新游戏</h2>
            <a href="">更多></a>
        </div>
        <div class="list_wrap">
            <div class="g_box">
                <a href="" class="g_img"><img src="images/game_logo_1.jpg" alt=""><p>音乐律动5</p></a>
            </div>
            <div class="g_box">
                <a href="" class="g_img"><img src="images/game_logo_2.jpg" alt=""><p>音乐律动5</p></a>
            </div>
            <div class="g_box">
                <a href="" class="g_img"><img src="images/game_logo_3.jpg" alt=""><p>音乐律动5</p></a>
            </div>
            <div class="g_box">
                <a href="" class="g_img"><img src="images/game_logo_1.jpg" alt=""><p>音乐律动5</p></a>
            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="user"><a href="">登录</a> - <a href="">注册</a></div>
        <div class="other"><a href="">关于我们</a> - <a href="">联系我们</a> - <a href="">开放平台</a> - <a href="">意见反馈</a> <p>请向您的好友推荐www.7723.cn</p></div>
    </footer>
    <script>
        var swiperBanner = new Swiper('#swiperBanner', {
            wrapperClass:'wrapper',
            slideClass :'slide',
            initialSlide :1,
            autoplay : 8000,
            loop : true,
            slidesPerView: 'auto',
            centeredSlides : true,
            paginationClickable: true,
            spaceBetween: 10
        });
        var swiperList = new Swiper('#swiperList', {
            wrapperClass:'list_wrapper',
            slideClass :'list_slide',
            loop : true
        });
    </script>
</body>
</html>
blockquote,body,button,dd,dl,dt,fieldset,figure,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{padding:0;margin:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}input,select{outline:0}ol,ul{list-style:none}label{cursor:pointer}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight: normal;}address,cite,dfn,em,var{font-style:normal}body{-webkit-text-size-adjust:none;-moz-user-select:none;-moz-text-size-adjust:none;-ms-user-select:none;-ms-text-size-adjust:none;-o-user-select:none;-o-text-size-adjust:none;user-select:none;text-size-adjust:none;background-color:#f5f5f5;min-height:100%;font:14px/1.125 "Microsoft Yahei",Arial,Helvetica,sans-serif;max-width: 640px;margin:0 auto;}a,body{-webkit-user-select:none}a{text-decoration: none;}.clearfix:after{content:"";height:0;visibility:hidden;display:block;clear:both}.clearfix{zoom:1}.clear{clear:both}

.header{background: #f9f9f9;overflow: hidden;padding:10px 10px 0;}
.header .logo{float: left;height:26px;margin:7px 0 0;}
.header .right{float: right;}
.header .right a{width:40px;height: 40px;display: inline-block;background-size: 24px auto}
.header .search{background: url(../images/search_ico.png) no-repeat center;}
.header .user{background: url(../images/user_ico.png) no-repeat center;}

.nav{border-bottom: 1px solid #ededed;overflow: hidden;background: #f9f9f9;}
.nav .a_link{float: left;width: 20%;}
.nav .a_link a{margin:6px 5px;display: block;height: 28px;text-align: center;border-radius: 14px;line-height: 28px;color: #3d3d3d;font-size: 16px;}
.nav .active a{background:#5ee367;color: #fff}

.banner_swiper{backface-visibility: hidden;overflow: hidden;position: relative;z-index: 1;padding:10px 0;background-color: #fff;max-height: 300px;}
.banner_swiper .wrapper{box-sizing: content-box;display: flex;height: 100%;position: relative;transition-property: transform;width: 100%;z-index: 1;}
.banner_swiper .slide{display: flex;flex-shrink: 0;height: 100%;position: relative;width: 50%}
.banner_swiper .slide img{width: 100%;height: 100%;border-radius: 6px}

.public_tit{padding:0 10px;height: 40px;overflow: hidden;line-height: 40px;position: relative;}
.public_tit h2{float: left;padding:0 0 0 30px;color: #808080}
.public_tit a{float: right;color: #484848}

.my_play{margin:10px 0;background-color: #fff;padding:0 0 10px;}
.my_play .public_tit h2{background: url(../images/tit_ico_1.png) left no-repeat;background-size: auto 16px;}
.my_play .list_page{position: absolute;height: 10px;right:10px;top:5px;}
.my_play .list_page span{display:inline-block;width: 10px;height: 10px;border-radius: 50%;background: #ededed}
.my_play .list_page .active{background: #5ee367}
.my_play .list_swiper{overflow: hidden;position: relative;z-index: 1;}
.my_play .list_wrapper{box-sizing: content-box;display: flex;height: 100%;position: relative;transition-property: transform;width: 100%;z-index: 1;}
.my_play .list_slide{display: flex;flex-shrink: 0;height: 100%;position: relative;width: 100%;width: 100%}
.my_play .list_box{width: 25%;box-sizing: content-box;text-align: center;color: #484848}
.my_play .list_box img{width: 60px;height:60px;border-radius: 6px;}
.my_play .list_box p{line-height: 24px;}

.week_recommend{margin:10px 0;background-color: #fff;}
.week_recommend .public_tit h2{background: url(../images/tit_ico_2.png) left no-repeat;background-size: auto 18px;}
.week_recommend .game_wrap{margin: 0 10px;overflow: hidden;}
.week_recommend .game_box{width: 50%;float: left;padding:0 0 12px;position: relative;overflow: hidden;}
.week_recommend .game_box img{width: 60px;height: 60px;float: left;border-radius: 6px;}
.week_recommend .game_box div{margin-left: 65px;color: #2a2a2a;line-height: 28px;}
.week_recommend .game_box p{color: #9e9e9e;margin:2px 0 0;}

.hot_online{margin:10px 0;background-color: #fff;}
.hot_online .public_tit h2{background: url(../images/tit_ico_5.png) left no-repeat;background-size: auto 22px;}
.hot_online .adv_banner img{max-width: 100%;}
.hot_online .list_wrap{overflow: hidden;padding:0 10px;}
.hot_online .g_box{width: 25%;float: left;text-align: center;margin:10px 0;}
.hot_online .g_img img{width: 60px;height: 60px;border-radius: 6px;}
.hot_online .g_img p{line-height: 24px;color: #484848}
.hot_online .g_start{width: 50px;margin:4px auto;line-height: 24px;border-radius: 15px;color: #5ee367;border:1px solid #5ee367;display: block;height: 24px;}

.hot_alone{margin:10px 0;background-color: #fff;}
.hot_alone .public_tit h2{background: url(../images/tit_ico_3.png) left no-repeat;background-size: auto 22px;}
.hot_alone .list_wrap{padding:0 10px;}
.hot_alone .g_box{padding:10px 0;border-bottom: 1px dotted #e1e1e1;position: relative;}
.hot_alone .g_box:last-child{border-bottom: 0}
.hot_alone .g_img{overflow: hidden;display: block;margin-right: 60px;}
.hot_alone .g_img img{width: 60px;height: 60px;border-radius: 6px;float: left;}
.hot_alone .g_img_txt{margin-left: 70px;line-height: 28px;}
.hot_alone .g_img_txt h2{color: #484848}
.hot_alone .g_img_txt span{color: #9e9e9e;padding:0 8px;}
.hot_alone .g_img_txt span:first-child{border-right: 1px solid #9e9e9e;padding:0 8px 0 0;}
.hot_alone .g_start{width: 50px;margin:4px auto;line-height: 24px;border-radius: 15px;color: #5ee367;border:1px solid #5ee367;display: block;height: 24px;position: absolute;right:0;top:18px;text-align: center;}

.adv_index{margin:10px 0;position: relative;}
.adv_index img{max-width: 100%;display: block;}
.adv_index .tip{position: absolute;bottom: 0;left: 0;width: 100%;height: 30px;line-height: 30px;background: rgba(0,0,0,.8);color: #fff;text-align: center;}

.footer{background: #363738;padding:10px 0 0;text-align: center;font-size: 12px;}
.footer .user,.footer .user a{color:#0ed41a}
.footer .other{padding:10px 0 0;line-height: 20px;}
.footer .other,.footer .other a{color:#808080}

 

 在手机上看项目的白底块,跟7724网站对比,明显比较暗...

知道怎么处理的,可以加我Q410232098;感激不敬。。。

羯瑞的主页 羯瑞 | 初学一级 | 园豆:107
提问于:2016-03-28 17:51
< >
分享
所有回答(1)
0

跟手机的分辨率和颜色对比度等有关系,只要大多数手机看起来舒服就行了

爱在右手边 | 园豆:304 (菜鸟二级) | 2016-03-29 18:11
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册