html页面中引用公共代码如导航栏底部信息

一.公共部分：css样式

<style type="text/css">
    /*pc端底部*/
    .footer {
        box-sizing: border-box;
        width: 96%;
        position: fixed;
        left: 2%;
        bottom: 0px;
        color: #fff;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .footer .left {display: inline-block;}
    .footer .right {display: inline-block;float: right;}
    /*微信二维码*/
    .wx_box {position: relative;}
    .wx_erweima_box {display: none; position: absolute;left: -120px;bottom: 60px;width: 200px !important;height: 200px !important;max-width: 200px;}
    .wx_erweima_box:after {
        z-index: 10000;
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        background-color: #fff;
        transform:rotate(45deg);
        -ms-transform:rotate(45deg);     /* IE 9 */
        -moz-transform:rotate(45deg);     /* Firefox */
        -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
        -o-transform:rotate(45deg);
        margin-top: -14px;
        margin-left: 126px;
    }
    .wx_erweima {
        width: 200px !important;height: 200px !important;max-width: 200px;
    }
</style>

标签内容

<div class="footer big_screen_display">
    <div class="left">
        <div style="margin:5px 0;">中国</div>
        <div>测试内容</div>
    </div>
    <div class="right">
        <img src="images/QQ.png" />
        <div class="wx_box" style="display: inline-block;" onmouseenter="changeShowErweima()" onmouseleave="hideErweima()" >
            <img src="images/weixin.png"/>
            <div class="wx_erweima_box">
                <img src="images/wx_erweima.jpg" class="wx_erweima"/>
            </div>
        </div>
        <a target="_blank" href="http://blog.sina.com.cn/u/2004204804"><img src="images/weibo.png" style="margin-right:0px;" /></a>
    </div>
</div>

javascript部分

<script type="text/javascript">
    //切换展示二维码
    function changeShowErweima(){
        if($('.wx_erweima_box')[0].style.display == 'block'){
            $('.wx_erweima_box')[0].style.display = 'none';
        }else{
            $('.wx_erweima_box')[0].style.display = 'block';
        }
    }
    function hideErweima() {
        $('.wx_erweima_box')[0].style.display = 'none';
    }
</script>

二.引入页面：

//在需要的地方写人如下标签
<div class="footerpage_m"></div>
<script type="text/javascript">
    $(function() {
        //调用公共footer
        $('.footerpage_m').load('common/footer_m.html')
        })
</script>