前端页面模板

侧边栏
<div class="frame">
    <div class="pr stop">
        <span class="pr">收起&gt;</span>
    </div>
    <div class="pr open hidden">
        <span class="pr">展开&lt;</span>
    </div>
    <p>
        扫一扫,下载游戏
    </p>
    <img src="http://gumballs.leiting.com/upfiles/qrcode/ewm_.png" alt="">
    <a href="https://itunes.apple.com/cn/app/id1156084215?mt=8" target="_blank" class="img btn btn_appstore2">不思议迷宫ios下载</a>
    <a href="https://gumballsdl.leiting.com/full/leiting_gumballs_0.1.62.apk" class="img btn btn_android2">不思议迷宫安卓预约</a>
    <a href="javascript:show_kf();" class="img btn btn_service">联系客服</a>
    <div class="channel">
        <i class="pr img wx_icon">微信公众号<img src="http://gumballs.leiting.com/pc/20161208/images/wx_gzh.jpg" alt=""></i>
        <i class="pr img tb_icon" onclick="window.location='http://tieba.baidu.com/f?kw=%E4%B8%8D%E6%80%9D%E8%AE%AE%E8%BF%B7%E5%AE%AB&amp;fr=home';">贴吧</i>
        <i class="pr img wb_icon" onclick="window.location='http://weibo.com/busiyimigong?refer_flag=1001030201_&amp;is_hot=1';">微博</i>
    </div>
</div>

css
.img{background:url(http://gumballs.leiting.com/pc/20170601/images/img.png?v=20170808)  no-repeat;}

.frame{width: 200px;height:auto;min-height: 390px;background: #4c3e35;position: fixed;top: 240px;right: 0;z-index: 1000;}
.frame .stop,.frame .open{width: 26px;height: 65px;background: #4c3e35;top: 0;left: -26px;cursor: pointer;}
.frame .stop span,.frame .open span{color: #fff;font-size: 15px;width: 16px;text-align: center;display: block;top: 10px;left: 50%;margin-left: -8px;}
.frame p,.warp .col .col_right .suspend p{line-height: 45px;text-align: center;color: #fff;font-size: 15px;}
.frame img,.warp .col .col_right .suspend img{width: 146px;height: 146px;display: block;margin: 0 auto;border: 5px solid #fff;border-radius: 5px;}
.frame a,.warp .col .col_right .suspend a{width: 164px;height: 49px;margin: 10px auto 0;}
.btn_appstore2{background-position:0 -394px;}
.btn_appstore2:hover{background-position:0 -337px;}
.btn_android2{background-position:0 -507px;}
.btn_android2:hover{background-position:0 -451px;}
.btn_tap{background-position:0 -735px;}
.btn_tap:hover{background-position:0 -678px;}
.btn_service{background-position:0 -621px;}
.btn_service:hover{background-position:0 -565px;}
底部版权-pc
<!-- <div class="footer footer_white">  白底版权 -->
<div class="footer">
    <div class="wrap">
        <div class="f_link">
            <a class="jbt_link ti" target="_blank" href="http://www.g-bits.com">吉比特</a>
            <a class="ltyx_link ti" target="_blank" href="http://www.leiting.com">雷霆游戏</a>
        </div>
        <div class="f_txt">
            <p>健康游戏公告: 抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活</p>
            <p>ICP证闽B2-20160040 | 闽网文许字[2015]1786-034号  | 新出网证(闽)字14号 | 闽ICP备12001243号-4
                <a target="_blank" href="http://sq.ccm.gov.cn/ccnt/sczr/service/business/emark/toDetail/62B5E134B68749379275369658A55456">
                    <img src="http://www.leiting.com/resource/terrace/images/main/wenhua.png" width="30" height="30" alt="互联网文化经营单位" title="互联网文化经营单位 ">
                </a>
                <a href="http://sq.ccm.gov.cn/ccnt/sczr/service/business/emark/gameNetTag/4028c08c51af8c94015210657bd23635" target="_blank">
                    <img src="http://wd.leiting.com/images/ba.png" height="28" width="24" alt="游戏电子标签">
                </a>
            </p>
            <p>互联网游戏出版号: ISBN 978-7-89988-382-2 | 版署批文号: 新广出审【2015】799号 | 文网游备字【2016】M-RPG0043</p>
            <p>Copyright<span>&copy;</span>
                <script src="http://www.leiting.com/common/copyRight.js" type="text/javascript"></script> G-BITS
                <a target="_blank" href="http://www.g-bits.com">吉比特网络</a>
                <a target="_blank" href="http://www.leiting.com">雷霆游戏</a>
                    <!-- <a key="54925a063b05a3da0fbc7aa0" logo_size="83x30" logo_type="realname" href="http://www.anquan.org">
                    <script src="http://static.anquan.org/static/outer/js/aq_auth.js"></script>
                </a> -->
            </p>
        </div>
    </div>
</div>
相关文章
相关标签/搜索