How to use CSS to set a floating layer in the table_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:20:11
Original
1265 people have browsed it

As shown in the picture, how to use CSS to set a floating layer in this empty template. Ask for advice! ! !


Reply to discussion (solution)


<!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>
Copy after login

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template