zoukankan      html  css  js  c++  java
  • html引用公共代码

    1.公共底部footer.html代码

    <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>陕西省西安市太白南路269号中天国际B座20层</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>
    <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>

    2.引入公共页面

    <div class="footerpage_m"></div>
    <script type="text/javascript">
        $(function() {
            //调用公共footer
            $('.footerpage_m').load('common/footer_m.html')
            })
  • 相关阅读:
    .Net并行编程
    ShopEx4.8.5.55328破解版
    PLinq
    C# 4.0 Parallel
    WCF、Web API、WCF REST、Web Service
    WCF 采用net.tcp协议
    MVC 过滤器3
    go orcale
    获取合并单元格中值的一个方法POI
    发起、维持和发展以利润为导向的企业的有目的性的行为(转)
  • 原文地址:https://www.cnblogs.com/duanzhenzhen/p/11132555.html
Copyright © 2011-2022 走看看