经典的双层网页选项卡，CSS标签面板

发布时间：2018-08-24 15:31:57 所属栏目：政策来源：站长网

导读：一个经典的CSS标签面板，当然也不单纯是CSS，Js在本代码内也发挥了重要作用，本CSS标签的每个面板id属性是唯一的，用于区别同一页面中的多个面板，同时它还可以指定标签段数、标签面板中的行数、指定每行标签数、标识每个标签的宽度、高度以及指定相邻行中

　　一个经典的CSS标签面板，当然也不单纯是CSS，Js在本代码内也发挥了重要作用，本CSS标签的每个面板id属性是唯一的，用于区别同一页面中的多个面板，同时它还可以指定标签段数、标签面板中的行数、指定每行标签数、标识每个标签的宽度、高度以及指定相邻行中标签之间的垂直、水平偏移量、标识每个段的当前位置，位置是标签面板中出现的顺序等，并且为了兼容性更好，这里根据不同的浏览器显示不同的DIV。

　　示例：

<html> <head> <title>一个经典的CSS标签面板</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <style type="text/css"> .tab { font-family: sans-serif; line-height:150%; font-weight:bold; position:absolute; text-align:center; border:2px; border-color: #999999; border-style:outset; border-bottom-style:none; width:90px; margin:0px; } .panel { font-family: sans-serif; font-size:smaller; position:absolute; border:2px; border-color:#999999; border-style: outset; width:400px; height:200px; left:0px; top:54px; margin:0px; padding:6px; } h1{ text-align:center; } </style> <script language="<b>Java</b>Script">  </script> </head> <body> <div style="background-color:transparent;position:relative;width:400px;height:200px;"> <div class="tab" style="background-color:yellow;height:78px;left:0px;top:24px;z-index:8" id="p1tab0" onClick="selectTab(0)">HTML</div> <div class="tab" style="background-color:orange;height:78px;left:90px;top:24px;z-index:7" id="p1tab1" onClick="selectTab(1)">XHTML</div> <div class="tab" style="background-color:red;height:78px;left:180px;top:24px;z-index:6" id="p1tab2" onClick="selectTab(2)">CSS</div> <div class="tab" style="background-color:green;height:78px;left:270px;top:24px;z-index:5" id="p1tab3" onClick="selectTab(3)">DOM</div> <div class="tab" style="background-color:cyan;height:78px;left:10px;top:0px;z-index:4" id="p1tab4" onClick="selectTab(4)">JavaScript</div> <div class="tab" style="background-color:silver;height:78px;left:100px;top:0px;z-index:3" id="p1tab5" onClick="selectTab(5)">DHTML</div> <div class="tab" style="background-color:violet;height:78px;left:190px;top:0px;z-index:2" id="p1tab6" onClick="selectTab(6)">XML</div> <div class="tab" style="background-color:gray;height:78px;left:280px;top:0px;z-index:1" id="p1tab7" onClick="selectTab(7)">XSLT</div> <div class="panel" style="background-color:yellow;z-index:8" id="p1panel0"> <h2>Hypertext Markup language</h2> <p><a href="#" target="external">HTML</a>is the language in which Web pages are written.HTML uses tags to identify how text is to be structured and formatted within a document.</p> </div> <div class="panel" style="background-color:orange;z-index:7" id="p1panel1"> <h2>Hypertext Markup language</h2> <p><a href="#" target="external">HTML</a>is the language in which Web pages are written.HTML uses tags to identify how text is to be structured and formatted within a document.</p> </div> <div class="panel" style="background-color:red;z-index:6" id="p1panel2"> <h2>Hypertext Markup language</h2> <p><a href="#" target="external">HTML</a>is the language in which Web pages are written.HTML uses tags to identify how text is to be structured and formatted within a document.</p> </div> <div class="panel" style="background-color:green;z-index:5" id="p1panel3"> <h2>Hypertext Markup language</h2> <p><a href="#" target="external">HTML</a>is the language in which Web pages are written.HTML uses tags to identify how text is to be structured and formatted within a document.</p> </div> <div class="panel" style="background-color:cyan;z-index:4" id="p1panel4"> <h2>Hypertext Markup language</h2> <p><a href="#" target="external">HTML</a>is the language in which Web pages are written.HTML uses tags to identify how text is to be structured and formatted within a document.</p> </div> <div class="panel" style="background-color:silver;z-index:3" id="p1panel5"> <h2>Hypertext Markup language</h2> <p><a href="#" target="external">HTML</a>is the language in which Web pages are written.HTML uses tags to identify how text is to be structured and formatted within a document.</p> </div> <div class="panel" style="background-color:violet;z-index:2" id="p1panel6"> <h2>Hypertext Markup language</h2> <p><a href="#" target="external">HTML</a>is the language in which Web pages are written.HTML uses tags to identify how text is to be structured and formatted within a document.</p> </div> <div class="panel" style="background-color:gray;z-index:1" id="p1panel7"> <h2>Hypertext Markup language</h2> <p><a href="#" target="external">HTML</a>is the language in which Web pages are written.HTML uses tags to identify how text is to be structured and formatted within a document.</p> </div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：淮安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!