集成搜索页（例：日语）

<div class="width-center">

    <form class="search bunpou active" name="pf" role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">

        <input class="search-input" name="s" type="search" placeholder=" 查文法、单词、句子结构" autofocus>

        <span class="vkb-button home" title="开关软键盘"><i class="fas fa-keyboard"></i></span>

        <button type="submit" name="post_type" style="display:none;" value="bunpou"></button>
    </form>
    <div id="submit-buttons">

        <a class="button" href="#" title="查文法" onclick='href="http://bunpougo.com/?post_type=bunpou&s=" + pf.s.value'>文法<i>Go</i></a>

        <a class="button" href="#" style="background-image: url(/assets/hj_logo.png); background-size:100% auto;" title="查单词中文释义" onclick='href="https://dict.hjenglish.com/jp/jc/" + pf.s.value' target="_blank"></a>

        <a class="button" href="#" style="background-image: url(/assets/baidu_logo.png); background-size:110% auto;" title="百度一下" onclick='href="https://www.baidu.com/baidu?wd=" + pf.s.value' target="_blank"></a>
        
        <a class="button" href="#" style="background-image: url(/assets/jisho_logo.png); background-size:auto 90%;" title="查句子结构、单词英文释义" onclick='href="https://jisho.org/search/" + pf.s.value' target="_blank"></a>

        <a class="button" href="#" style="background-image: url(/assets/weblio_logo.png); background-size:90% auto;" title="查单词日文释义" onclick='href="https://www.weblio.jp/content/" + pf.s.value' target="_blank"></a>

        <a class="button" href="#" style="background-image: url(/assets/goo_logo.png); background-size:auto 70%;" title="查单词日文释义" onclick='href="https://dictionary.goo.ne.jp/srch/jn/" + pf.s.value + "/m0u/"' target="_blank"></a>

        <a class="button" href="#" style="background-image: url(/assets/japandict_logo.png); background-size:90% auto;" onclick='href="https://www.japandict.com/?s=" + pf.s.value' target="_blank"></a>

        <a class="button" href="#" style="background-color:#f4f4f4; background-image: url(/assets/tangorin_logo.png); background-size:100% auto;" onclick='href="https://tangorin.com/words?search=" + pf.s.value' target="_blank"></a>

        <a class="button" href="#" style="background-image: url(/assets/google_logo.png); background-size:90% auto;" onclick='href="https://www.google.com/search?q=" + pf.s.value' target="_blank"></a>

        <a class="button" href="#" style="background-image: url(/assets/yahoojp_logo.png); background-size:90% auto;" onclick='href="https://search.yahoo.co.jp/search?p=" + pf.s.value' target="_blank"></a>
        
        <a class="button" href="#" onclick='href="http://bunpougo.com/?s=" + pf.s.value' title="全站查询包括正文">站内全文查询</a>

    </div>

</div>

.search.logo {
    width: 100%;
    margin-top: 100px;
    font-size: 64px;
    text-align: center;
}
form.search.bunpou {
    width: 70%;
    margin: 30px auto 20px auto;
}
#submit-buttons {
    width: 520px;
    margin: 0 auto;
    font-size: 0px;
}
#submit-buttons a {
    display: inline-block;
    margin: 5px;
    width: 120px;
    height: 60px;
    vertical-align: top;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #FFF;
    border: thin solid #BDBDBD;
    border-radius: 5px;
    -moz-transition: transform 0.2s; /* Firefox 4 */
    -webkit-transition: transform 0.2s; /* Safari 和 Chrome */
    -o-transition: transform 0.2s; /* Opera */
    transition: transform 0.2s;
}
#submit-buttons a:hover {
    -ms-transform: translateY(-4px);
    -moz-transform: translateY(-4px);
    -webkit-transform: translateY(-4px);
    -o-transform: translateY(-4px);
    transform: translateY(-4px);
}
#submit-buttons a:first-child {
    color: #1A73E8;
    font-family: "Yu Gothic", "游ゴシック";
    font-size: 32px;
    line-height: 60px;
    font-weight: bold;
    text-align: center;
}
#submit-buttons a:last-child {
    color: #757575;
    font-size: 18px;
    line-height: 60px;
    text-align: center;
}