CSS を使用して table_html/css_WEB-ITnose にフローティングレイヤーを設定する方法-htmlチュートリアル-php.cn

CSS を使用して table_html/css_WEB-ITnose にフローティングレイヤーを設定する方法

WBOY

リリース： 2016-06-24 12:20:11

オリジナル

1290 人が閲覧しました

写真に示すように、CSSを使用してこの空のテンプレートにフローティングレイヤーを設定する方法。アドバイスを求めてください！！！

ディスカッションへの返信 (解決策)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>    <title>Untitled Page</title>    <style type="text/css">        .tb1 td        {          border:solid 1px blue;	        }         .tb1 input        {          width:50px	        }        .tb2        {          /*通过ie6 ie7 ie8 ff3 opera 谷歌 safari测试*/          background-color:#0000CC;filter:alpha(opacity=20); -moz-opacity:0.5; opacity:0.5;/*遮罩层一定要设置背景，否则起不到遮罩作用。opacity=0时，遮罩层完全透明*/        }    </style>    <script type="text/javascript">    function Showtb2()    {      document.getElementById("tb2").style.display="block";    }    function Hidetb2()    {      document.getElementById("tb2").style.display="none";    }    </script></head><body>    <table cellpadding="0" cellspacing="0" style="height:200px; width:200px; margin-top:0px; position:absolute" class="tb1">        <tr>            <td>               <input id="Text1" type="text" /></td>            <td>               <input id="Text2" type="text" /></td>            <td>               <input id="Text3" type="text" /></td>        </tr>        <tr>            <td>               <input id="Text4" type="text" /></td>            <td>               <input id="Text5" type="text" /></td>            <td>               <input id="Text6" type="text" /></td>        </tr>        <tr>            <td>               <input id="Text7" type="text" /></td>            <td>               <input id="Text8" type="text" /></td>            <td>               <input id="Text9" type="text" /></td>        </tr>    </table>    <table id="tb2" cellpadding="0" cellspacing="0" style="height:200px; width:200px; margin-top:0px; position:absolute; display:none" class="tb2">    <tr>    <td></td>    </tr>    </table>        <div style="margin-top:250px; position:absolute">        <input id="Button1" type="button" value="显示"  onclick="Showtb2()"/>        <input id="Button2" type="button" value="隐藏"  onclick="Hidetb2()"/>    </div></body></html>

ログイン後にコピー