>웹 프론트엔드 >HTML 튜토리얼 >怎样用CSS在table中设置浮动层_html/css_WEB-ITnose

怎样用CSS在table中设置浮动层_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 12:20:111292검색

如图,怎么样在该空模板中用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>

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.