标签在右侧的竖向选项卡

2024-09-05 12:19:26

字体：大中小

来源：转载

供稿：网友

竖向简洁的标签选项卡，多见于网页的左侧，视觉效果极好，使网页看上去更简洁，整齐，本人比较喜欢这种风格，你可以试着给它加个背景，这样会和你的网页更搭配一些。

<!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>竖向简洁的标签选项卡</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">body{padding:50px;margin:0;color:#666;font:12px arial,sans-serif;}#getId{width:400px;}.tabT{width:100px;float:right;padding:0;margin:0px;background:url(http://www.codefans.net/jscss/demoimg/200903/dot.jpg) repeat-y;height:400px;}.tab,.tab li{padding:0;margin:0;border:none}.tab{height:23px;display:block;}.tab li{display:block;height:18px;line-height:18px;padding:10px 2px;text-align:center;cursor:pointer;}.tab li.current{display:block;color:red;background-color:#fff;border-right:1px solid red;border-left:0px solid red;border-top:1px solid red;border-bottom:1px solid red;padding:10px 2px;}.show,hidden{float:left;width:299px;margin-top:0px;border-style:solid;border-width:1px 0px 1px 1px;border-color:red;text-align:left;height:400px;}.hidden{display:none;}.show{display:block;}.con{padding:10px;}</style><script type="text/javascript" language="javascript"></script></head><body><div id="getId"><div class="tabT">		<ul class="tab">		<li id="tabId1" class="current" onclick="tab('tabId1','tabC1');">Home</li>		<li id="tabId2" onclick="tab('tabId2','tabC2');">ASP</li>		<li id="tabId3" onclick="tab('tabId3','tabC3');">PHP</li>		<li id="tabId4" onclick="tab('tabId4','tabC4');">JSP</li>		</ul>	</div>	<div class="show" id="tabC1"><div class="con">Home Page</div>	</div>	<div class="hidden" id="tabC2"><div class="con">ASP</div>	</div>	<div class="hidden" id="tabC3"><div class="con">PHP</div>	</div>	<div class="hidden" id="tabC4"><div class="con">JSP</div>	</div></div></body></html>

上一篇：标签在左侧的CSS竖向简洁选项卡

下一篇：JS仿QQ的展开/折叠菜单

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注