北京教師招聘考試公告

時間 2020-11-26

標籤 javascript css html java jquery web 瀏覽器 app webstorm ide 欄目 JavaScript 简体版

原文原文鏈接

主要用來記錄如何兼容安卓手機裏面按鈕line-height 居中的問題javascript

【html】css

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="author" content="cc">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="generator" content="webstorm">
    <!--移動端響應式-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <!--支持IE的兼容模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--讓部分國產瀏覽器默認採用高速模式渲染頁面-->
    <meta name="renderer" content="webkit">
    <!--頁面style css-->
    <link rel="stylesheet" href="http://www.ysedu.com/all/css/font.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ysedu.com/all/css/cc.base.css">
    <link rel="stylesheet" type="text/css" href="http://www.ysedu.com/all/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="http://www.ysedu.com/all/css/cc.mobile.css">
    <title>北京教師招聘考試公告</title>
    <meta name="description" content="<?=$seo['description']?>">
    <meta name="keywords" content="<?=$seo['keywords']?>">
    <!--JQ庫-->
    <script src="http://www.ysedu.com/all/js/jquery-1.8.3.min.js"></script>
    <script src="http://www.ysedu.com/all/js/swiper.min.js"></script>
    <script src="http://www.ysedu.com/all/js/cc.mobile.js"></script>
    <link rel="stylesheet" href="css/gzgg.css">
</head>
<body>
    <div id="header">
        <div class="logo"></div>
        <a class="tel" href="tel:4006255668"></a>
    </div>
    <div id="banner" class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><a href=""><img src="./img/gzgg_banner1.png" alt="" width="100%"></a></div>
            <div class="swiper-slide"><a href=""><img src="./img/gzgg_banner1.png" alt="" width="100%"></a></div>
            <div class="swiper-slide"><a href=""><img src="./img/gzgg_banner1.png" alt="" width="100%"></a></div>
        </div>
    </div>
    <div id="nav">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><div class="area" data="cy">所有</div></div>
                <div class="swiper-slide"><div class="area" data="cy">朝陽</div></div>
                <div class="swiper-slide"><div class="area" data="xc">西城</div></div>
                <div class="swiper-slide"><div class="area" data="dx">大興</div></div>
                <div class="swiper-slide"><div class="area" data="hd">海淀</div></div>
                <div class="swiper-slide"><div class="area" data="hr">懷柔</div></div>
                <div class="swiper-slide"><div class="area" data="sjs">石景山</div></div>
                <div class="swiper-slide"><div class="area" data="mtg">門頭溝</div></div>
                <div class="swiper-slide"><div class="area" data="ft">豐臺</div></div>
                <div class="swiper-slide"><div class="area" data="dc">東城</div></div>
                <div class="swiper-slide"><div class="area" data="my">密雲</div></div>
                <div class="swiper-slide"><div class="area" data="tz">通州</div></div>
                <div class="swiper-slide"><div class="area" data="cp">昌平</div></div>
                <div class="swiper-slide"><div class="area" data="sy">順義</div></div>
                <div class="swiper-slide"><div class="area" data="yq">延慶</div></div>
                <div class="swiper-slide"><div class="area" data="fs">房山</div></div>
                <div class="swiper-slide"><div class="area" data="fs">燕山</div></div>
                <div class="swiper-slide"><div class="area" data="pg">平谷</div></div>
            </div>
        </div>
    </div>
    <div id="ad">
        <a href=""><img src="./img/gzgg_ad.png" width="100%" alt=""></a>
    </div>
    <div id="notice">
        <table>
            <tr>
                <th>區縣</th>
                <th>18招聘公告</th>
                <th>19招聘公告</th>
            </tr>
            <tr id="cy">
                <td>朝陽區</td>
                <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td>
                <td>已公佈 <span><a href="" class="jq">加羣</a></span></td>
            </tr>
            <tr id="xc">
                <td>西城區</td>
                <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td>
                <td>已公佈 <span><a href="" class="jq">加羣</a></span></td>
            </tr>
            <tr id="dx">
                <td>大興區</td>
                <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td>
                <td>待公佈 <span><a href="" class="jq">加羣</a></span></td>
            </tr>
            <tr id="hd">
                <td>海淀區</td>
                <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td>
                <td>待公佈 <span><a href="" class="jq">加羣</a></span></td>
            </tr>
            <tr id="hr">
                <td>懷柔區</td>
                <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td>
                <td>待公佈 <span><a href="" class="jq">加羣</a></span></td>
            </tr>
            <tr id="sjs">
                <td>石景山區</td>
                <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td>
                <td>待公佈 <span><a href="" class="jq">加羣</a></span></td>
            </tr>
            <tr id="mtg">
                <td>門頭溝區</td>
                <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td>
                <td>待公佈 <span><a href="" class="jq">加羣</a></span></td>
            </tr>
            <tr id="ft">
                <td>豐臺區</td>
                <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td>
                <td>待公佈 <span><a href="" class="jq">加羣</a></span></td>
            </tr>
            <tr id="dc">
                <td>東城區</td>
                <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td>
                <td>待公佈 <span><a href="" class="jq">加羣</a></span></td>
            </tr>
            <tr id="my">
                <td>密雲區</td>
                <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td>
                <td>已公佈 <span><a href="" class="jq">加羣</a></span></td>
            </tr>
            <tr id="tz">
                <td>通州區</td>
                <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td>
                <td>待公佈 <span><a href="" class="jq">加羣</a></span></td>
            </tr>
            <tr id="cp">
                <td>昌平區</td>
                <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td>
                <td>已公佈 <span><a href="" class="jq">加羣</a></span></td>
            </tr>
            <tr id="sy">
                <td>順義區</td>
                <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td>
                <td>待公佈 <span><a href="" class="jq">加羣</a></span></td>
            </tr>
            <tr id="yq">
                <td>延慶區</td>
                <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td>
                <td>待公佈 <span><a href="" class="jq">加羣</a></span></td>
            </tr>
            <tr id="fs">
                <td>房山區（含燕山）</td>
                <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td>
                <td>待公佈 <span><a href="" class="jq">加羣</a></span></td>
            </tr>
            <tr id="pg">
                <td>平谷區</td>
                <td><a href="http://www.ysedu.com/ydgg/41874.html" target="_blank" class="ck">查看</a></td>
                <td>待公佈 <span><a href="" class="jq">加羣</a></span></td>
            </tr>
        </table>
    </div>
    <div id="zixun">
        <a href="javascript:void(0);" onclick=""><div class="zxzx">公招課程</div></a>
        <a href="javascript:void(0);" onclick=""><div class="lqzl">歷年真題</div></a>
    </div>
    <script>
        var mySwiper = new Swiper('#banner.swiper-container',{
            loop: true,
            autoplay: {
                delay: 1000
            },
            speed: 600,
        });
        var mySwiper2 = new Swiper('#nav .swiper-container',{
            loop: true,
            slidesPerView: 6,
            spaceBetween: 30,
        });
        //滑動到指定位置
        $("#nav .area").click(function(){
            var _data = $(this).attr("data");
            scrollTo('#'+_data,300);
        });
        function scrollTo(ele, speed){
            if(!speed) speed = 300;
            if(!ele){
                $("html,body").animate({scrollTop:0},speed);
            }else{
                if(ele.length>0) $("html,body").animate({scrollTop:$(ele).offset().top},speed);
            }
            return false;
        }
    </script>
</body>
</html>

【CSS】html

body{
    background-color: #fff;
    padding: 0 .32rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#header{
    height: .52rem;
    width: 100%;
    position: relative;
    margin: .32rem auto;
}
#header .logo{
    width: 2.18rem;
    height: 0.52rem;
    background: url(../img/gzgg_logo.png) no-repeat center;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#header .tel{
    display: block;
    width: 2.22rem;
    height: 0.30rem;
    background: url(../img/gzgg_tel.png) no-repeat center;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    position: absolute;
    top: .12rem;
    right: 0;
}
#nav{
    margin: .5rem auto;
    position: relative;
    width: 7.18rem;
}
#nav .area{
    width: 1rem;
    height: 0.52rem;
    line-height: .52rem;
    background-color: #fff;
    font-size: 0.26rem;
    color: #000;
    background-color: #ededed;
    text-align: center;
    -webkit-border-radius: .05rem;
    -moz-border-radius: .05rem;
    border-radius: .05rem;
}
#nav .area:hover,
#nav .area:active{
    background-color: #ff6100;
    color: #fff;
}
#notice{
    margin: .5rem auto 1rem;
}
#notice table{
    width: 100%;
    text-align: center;
    border: none;
    border-collapse: collapse;
}
#notice tr{
    height: .64rem;
}
#notice tr:first-child{
    background: url(../img/gzgg_bg_table.jpg) no-repeat center;
    -webkit-background-size: cover;
    background-size: cover;
}
#notice tr:nth-of-type(odd){
    background-color: #e7f6f7;
}
#notice tr:last-child{
    border-bottom: .04rem solid #b1dadd;
}
#notice th{
    height: .82rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: .1rem;
}
#notice th{
    border: none;
    border-left: .04rem solid #62b5ba;
    border-right: .04rem solid #62b5ba;
    font-size: 0.32rem;
    color: #fff;
}
#notice td{
    border: none;
    border-left: .04rem solid #b1dadd;
    border-right: .04rem solid #b1dadd;
    font-size: 0.26rem;
    color: #000;
}
#notice td a.ck{
    display: inline-block;
    width: 2.12rem;
    height: 0.72rem;
    line-height: .72rem;
    text-align: center;
    font-size: .52rem;
    transform: scale(0.5);
    color: #ff7052;
    border-collapse: separate;
    -webkit-border-radius: .4rem;
    -moz-border-radius: .4rem;
    border-radius: .4rem;
    border: 1px solid #ff7052;
}
#notice td a.jq{
    display: table-cell;
    width: 1.06rem;
    height: 0.36rem;
    text-align: center;
    font-size: .26rem;
    color: #fff;
    background-color: #f4803e;
    -webkit-border-radius: .2rem;
    -moz-border-radius: .2rem;
    border-radius: .2rem;
}
#zixun{
    width: 7.5rem;
    height: .96rem;
    line-height: 1.1rem;
    background-color: #fff;
    background: rgba(5,5,5,0.40);
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
}
#zixun .zxzx,
#zixun .lqzl{
    display: table-cell;
    vertical-align: middle;
    width: 2.24rem;
    height: .56rem;
    border: 1px solid #FF7052;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    border-radius: .5rem;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: .4rem;
    font-size: .26rem;
    color: #000;
    line-height: normal;
    background: url(../img/gzgg_icon_zxzx.png) no-repeat .3rem center #fff;
    -webkit-background-size: 15%;
    background-size: 15%;
}
#zixun .lqzl{
    background-image: url(../img/gzgg_icon_lqzl.png);
}
#zixun a:last-child{
    margin-left: .5rem;
}