bootstrap底部固定，仿微信框，手机可用，pc浏览器背景有问题。

其中涉及到几个知识点：

 function show13() {
        $("#table11").hide();
        $("#table12").hide();
        $("#table13").toggle();
    }

这个是对应display:none的
show()显示
hide()隐藏
toggle()显示/隐藏

多样变种
https://blog.csdn.net/skh2015java/article/details/52790121

---

这个是底部固定

<div id="dg" style="z-index: 9999; width:100%; position: fixed ! important; right: 0px; bottom: 0px;">

多样变种：
html固定浮动在底部div的实现效果
https://blog.csdn.net/ligaogang/article/details/41441297
div页面底部悬浮显示
https://blog.csdn.net/sinat_29774479/article/details/78337467

---

这个是td当中居中，上下空白，背景图片（拉伸）等内容。

 <td  style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/4.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">

---

这一部分是table的部分属性，由于框架中已经定义了部分属性，所以在此进行强调，其中有用的是背景颜色。

<table width="100%" style=" width:100%; right: 0px; bottom: 0px;border:3px; border-color: #000;background: #EEE;">

所有代码：

<div id="dg" style="z-index: 9999; width:100%; position: fixed ! important; right: 0px; bottom: 0px;">
    <table width="100%" style=" width:100%; right: 0px; bottom: 0px;">
        <!--position: absolute;-->
        <tr>
            <td style="width:33%;text-align: center;padding:3%;">
                &emsp;&emsp;
            </td>
            <td valign="bottom" style="width:33%;text-align:bottom;padding:0%;">


                <table id="table1" width="100%" style="display:none; width:100%;bottom:0px;background: #FFF;">

                    <tr>
                        <td onclick="show11();" style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/1.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
                            法律法规
                        </td>
                    </tr>
                    <tr>
                        <td onclick="show12();" style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/4.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
                            标准查询
                        </td>
                    </tr><tr>
                        <td onclick="show13();" style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/2.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
                            规章制度
                        </td>
                    </tr>

                </table>


            </td>
            <td valign="bottom" style="width:33%;text-align:bottom;padding:0%;">

                <table id="table11" width="100%" style="display:none; width:100%;bottom:0px;background: #FFF;">
                    <tr>
                        <td  style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/1.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
                            安全
                        </td>
                    </tr>
                    <tr>
                        <td  style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/4.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
                            职业卫生
                        </td>
                    </tr>

                    <tr>
                        <td  style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/2.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
                            其他
                        </td>
                    </tr>
                </table>
                <table id="table12" width="100%" style="display:none; width:100%;bottom:0px;background: #FFF;">
                    <tr>
                        <td  style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/1.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
                            集团公司
                        </td>
                    </tr>
                    <tr>
                        <td  style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/4.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
                            油田
                        </td>
                    </tr>

                    <tr>
                        <td  style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/2.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
                            其他
                        </td>
                    </tr>
                </table>




                <table id="table13" width="100%" style="display:none; width:100%;bottom:0px;background: #FFF;">

                    <tr>
                        <td  style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/1.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
                            国家
                        </td>
                    </tr>
                    <tr>
                        <td  style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/4.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
                            石油行业
                        </td>
                    </tr>
                    <tr>
                        <td  style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/4.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
                            zsh企业
                        </td>
                    </tr>
                    <tr>
                        <td  style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/4.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
                            油田企业
                        </td>
                    </tr>
                    <tr>
                        <td  style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/2.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
                            其他
                        </td>
                    </tr>

                </table>
                <!--            <div class="dropdown-divider"></div>-->
            </td>
        </tr>
    </table>

    <table width="100%" style=" width:100%; right: 0px; bottom: 0px;border:3px; border-color: #000;background: #EEE;">
        <!--position: absolute;-->
        <tr>
            <td  style="text-align:center;vertical-align:middle;padding:3%;background-image:url('{$conf_templete}img_plus/2.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
                管理手册
            </td>
            <td  style="text-align:center;vertical-align:middle;padding:3%;background-image:url('{$conf_templete}img_plus/2.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
                <div href="#" onclick="show();">标准制度</div>
            </td>
            <td  style="text-align:center;vertical-align:middle;padding:3%;background-image:url('{$conf_templete}img_plus/2.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
                通用知识
                <!--            <div class="dropdown-divider"></div>-->
            </td>
        </tr>
    </table>
</div>
<script >
    function show() {
        $("#table1").toggle();
        $("#table11").hide();
        $("#table12").hide();
        $("#table13").hide();
//        $("#table1").css("background-image","url('{$conf_templete}img_plus/5.png')" );
    }
    function show11() {
        $("#table11").toggle();
        $("#table12").hide();
        $("#table13").hide();
    }
    function show12() {
        $("#table11").hide();
        $("#table12").toggle();
        $("#table13").hide();
    }
    function show13() {
        $("#table11").hide();
        $("#table12").hide();
        $("#table13").toggle();
    }

</script>

以上代码可以在手机端完美运行，但是电脑端却不行，360极速模式也不行，显示为背景过分拉伸错位。

手机端那里是有格子的。