Css 结合图片实现的不规则TAB选项卡效果

发布时间：2018-08-17 13:44:37 所属栏目：政策来源：站长网

导读：Css 结合图片实现的不规则TAB选项卡效果，本例中CSS结合两张小图片实现的效果，将中规中矩的方角换成了不规则的圆角，也就是这一换，倒让浏览者新鲜了不少，也使选项卡增多了几份灵感，不是吗？演示： htmlheadmeta http-equiv=Content-Type content=text

　　Css 结合图片实现的不规则TAB选项卡效果，本例中CSS结合两张小图片实现的效果，将中规中矩的方角换成了不规则的圆角，也就是这一换，倒让浏览者新鲜了不少，也使选项卡增多了几份灵感，不是吗？

　　演示：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>不规则TAB选项卡效果</title> <style type="text/css">  </style> </head> <body style="text-align:center"> <script type="text/javascript"> function setTab03Syn ( i ) { selectTab03Syn(i); } function selectTab03Syn ( i ) { switch(i){ case 1: document.getElementById("TabCon1").style.display="block"; document.getElementById("TabCon2").style.display="none"; document.getElementById("font1").style.color="#ffffff"; document.getElementById("font2").style.color="#000000"; break; case 2: document.getElementById("TabCon1").style.display="none"; document.getElementById("TabCon2").style.display="block"; document.getElementById("font1").style.color="#000000"; document.getElementById("font2").style.color="#ffffff"; break; } } </script> <div class="tab"> <div id="bg" class="xixi1"> <div id="font1" class="tab1" onMouseOver="setTab03Syn(1);document.getElementById('bg').className='xixi1'">新闻标签</div> <div id="font2" class="tab2" onMouseOver="setTab03Syn(2);document.getElementById('bg').className='xixi2'">新闻标签</div> </div> <div id="TabCon1">不规则TAB选项卡效果，烈火网</div> <div id="TabCon2" style="display:none">不规则TAB选项卡效果2</div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：辽源站长网）

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