比较流行的JS+CSS选项卡TAB

2024-09-05 12:19:51

字体：大中小

来源：转载

供稿：网友

可以放置多种网页元素的选项卡，简洁能用，而且外观也不错，可以在TAB里放置一个列表、一个图片、一个输入框、一段文字，四种布局实例，相信你会喜欢的。

<!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>比较流行的JS+CSS选项卡TAB</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">body,table,td,th,input,textarea,button,select{font:13px Verdana;}body{background-color:#eef;}div#tab{width:300px;text-align:left;}ul.tabU{list-style:none;margin:0px;padding:1px 0px 0px .5em;}ul.tabU li{display:inline;margin-right:2px;}ul.tabU li a{color:black;font-weight:bold;line-height:20px;text-decoration:none;background-image: url(/jscss/demoimg/200905/tabbgs.gif);border:1px #BBBBBB solid;border-bottom-width:0px;padding:0px 5px 2px;cursor: pointer;}div.tabC{display:none;border:1px solid;padding:6px;}div.tabD1 a.tabB1,a.tabB1:hover{background-position:0 -20px;border-color:#EAAD6B;}div.tabD1 div.tabC1{border-color:#EAAD6B;display:block;background-color:#FDEDD8;}div.tabD2 a.tabB2,a.tabB2:hover{background-position:0 -42px;border-color:#6ECEF3;}div.tabD2 div.tabC2{border-color:#6ECEF3;display:block;background-color:#E6F6FD;}div.tabD3 a.tabB3,a.tabB3:hover{background-position:0 -64px;border-color:#84AC44;}div.tabD3 div.tabC3{border-color:#84AC44;display:block;background-color:#F1F6E7;}div.tabD4 a.tabB4,a.tabB4:hover{background-position:0 -86px;border-color:#F37CA3;}div.tabD4 div.tabC4{border-color:#F37CA3;display:block;background-color:#FFEEF4;}div.tabD1 a.tabB1,div.tabD2 a.tabB2,div.tabD3 a.tabB3,div.tabD4 a.tabB4{padding:1px 5px 3px;}</style><script type="text/javascript"></script><ul class="tabU"><li>主页</li><li>输入框</li><li>图片</li><li>网页特效</li></ul><div class="tabC tabC1"><b>网站首页</div><div class="tabC tabC2"><input value="这里放置输入框"/></div><div class="tabC tabC3"><center><img alt="" src="/d/file/p/2024/09-05/16b2a6379bb83de193b8cbd576c35d03.gif" border="0"/></center></div><div class="tabC tabC4">网页特效</div></div></body></html>

上一篇：最简洁的仿QQ折叠菜单的实现

下一篇：精致纯CSS导航栏

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注