CSS竖向选项卡

最新推荐文章于 2021-06-19 05:34:32 发布

beichen_

最新推荐文章于 2021-06-19 05:34:32 发布

阅读量584

点赞数

分类专栏： CSS Study 文章标签： css javascript class 招聘 html float

本文链接：https://blog.csdn.net/beichen_/article/details/3975258

版权

CSS Study 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

	<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>竖向标签选项卡</title>
	<style type="text/css">
	<!--
	.left_box{
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	font-family: inherit;
	}
	.infopublish ul.left_box li {
	line-height: 1.89;
	}
	body {
	color: #333;
	text-align: left;
	font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
	width:300px;
	}
	ol, ul {
	list-style: none;
	}
	.box{
	border:1px solid #99BBDD;
	padding-bottom:2px;

	}
	.box_1 ul{
	padding:5px;
	}
	.box_title{
	position: relative;
	height: 28px;
	}
	.box_title h3 {
	height: 26px;
	line-height: 26px;
	margin: 1px 1px 0;
	padding: 0 10px;
	font-weight: bold;
	font-size: 120%;
	color: #275c91;
	}
	.box_title span {
	float:right;
	padding-top:5px;
	padding-right:5px;
	}

	.infopublish {
	border-color: #7bce74;
	}
	.infopublish .box_title {
	background: none;
	}
	.infopublish .box_title h3 {
	height: 30px;
	line-height: 30px;
	margin: 1px 1px 0;
	color: #fff;
	background: url(nav.png) repeat-x 0 -390px;
	}
	* html .clearfix {
	height: 1%;
	}
	.clearfix {
	display: block;
	}
	/**/
	.clearfix:after {
	content: ".";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}
	.v-tab {
	width: 71px;
	float: left;
	display: inline;
	overflow: hidden;
	margin: -2px 1px -6px -5px !important;
	margin: -5px 1px -6px -5px;
	}

	.v-tab li {
	float: left;
	}
	.v-tab li a {
	float: left;
	width: 70px;
	height: 29px;
	line-height: 29px;
	text-align: center;
	background: #ebf7e9;
	border: solid #7bce74;
	border-width: 0 1px 1px 0;
	}
	.v-tab li a:link,
	.v-tab li a:visited {
	color: #2e7428;
	}
	.v-tab li a.current,
	.v-tab li a:hover,
	.v-tab li a:active {
	background: #fff;
	border-right: 0;
	font-weight: bold;
	padding-right: 1px;
	}
	.box .left_box li{
	line-height:24px;
	}
	.disable {
	display: none;
	}
	-->
	</style>
	<script language="javascript" type="text/javascript">
	function doClick_jy(o){
	o.className="current";
	var j;
	var id;
	var e;
	for(var i=1;i<=8;i++){
	id ="jy"+i;
	j = document.getElementById(id);
	e = document.getElementById("jy_con"+i);
	if(id != o.id){
	j.className="";
	e.style.display = "none";
	}else{
	e.style.display = "block";
	}
	}
	}

	</script>
	</head>
	<body>
	<div class="box infopublish">
	<div class="box_1 clearfix">
	<ul class="v-tab">
	<li><a href="#" class="current" id="jy1" onmouseover="javascript:doClick_jy(this)">共享世纪1</a></li>
	<li><a href="#" id="jy2" onmouseover="javascript:doClick_jy(this)">共享世纪2</a></li>
	<li><a href="#" id="jy3" onmouseover="javascript:doClick_jy(this)">共享世纪3</a></li>
	<li><a href="#" id="jy4" onmouseover="javascript:doClick_jy(this)">共享世纪4</a></li>
	<li><a href="#" id="jy5" onmouseover="javascript:doClick_jy(this)">共享世纪5</a></li>
	<li><a href="#" id="jy6" onmouseover="javascript:doClick_jy(this)">共享世纪6</a></li>
	<li><a href="#" id="jy7" onmouseover="javascript:doClick_jy(this)">共享世纪7</a></li>
	<li><a href="#" id="jy8" onmouseover="javascript:doClick_jy(this)">共享世纪8</a></li>
	</ul>
	<ul class="left_box" style="display:block;" id="jy_con1">
	<li>· <a href="http://www.2ky.cn" target="_blank">本例官方地址1</a></li>
	<li>· <a href="http://www.2ky.cn" target="_blank">本例官方地址1</a></li>
	<li>· <a href="http://www.2ky.cn" target="_blank">本例官方地址1</a></li>
	<li>· <a href="http://www.2ky.cn" target="_blank">本例官方地址1</a></li>
	<li>· <a href="http://www.2ky.cn" target="_blank">本例官方地址1</a></li>
	<li>· <a href="http://www.2ky.cn" target="_blank">本例官方地址1</a></li>
	<li>· <a href="http://www.2ky.cn" target="_blank">本例官方地址1</a></li>
	<li>· <a href="http://www.2ky.cn" target="_blank">本例官方地址1</a></li>
	<li>· <a href="http://www.2ky.cn" target="_blank">本例官方地址</a>1</li>
	<li>· <a href="http://www.2ky.cn" target="_blank">本例官方地址1</a></li>
	</ul>
	<ul class="left_box disable" id="jy_con2">
	<li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">本例交流地址2</a></li>
	<li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">本例交流地址2</a></li>
	<li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">本例交流地址2</a></li>
	<li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">本例交流地址2</a></li>
	<li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">本例交流地址2</a></li>
	<li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">本例交流地址2</a></li>
	<li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">本例交流地址2</a></li>
	<li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">本例交流地址2</a></li>
	<li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">本例交流地址2</a></li>
	<li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">本例交流地址2</a></li>
	</ul>
	<ul class="left_box disable" id="jy_con3">
	<li>· <a href="/Bbs/Exchange/20080725/33967.html" target="_blank">25万会员的公考论坛，寻求合作</a></li>
	<li>· <a href="/Bbs/Exchange/20080722/33771.html" target="_blank">寻找论坛推广高手</a></li>
	<li>· <a href="/Bbs/Exchange/20080718/33476.html" target="_blank">寻音乐类站长或版主合作，高底薪</a></li>
	<li>· <a href="/Bbs/Exchange/20080707/32447.html" target="_blank">厦门北纬信息诚招各级代理商</a></li>
	<li>· <a href="/Bbs/Exchange/20080603/30550.html" target="_blank">正规潜力站，寻求合作伙伴</a></li>
	<li>· <a href="/Bbs/Exchange/20080603/30544.html" target="_blank">个人至强2.8双核空闲服务器寻人合作!</a></li>
	<li>· <a href="/Bbs/Exchange/20080603/30543.html" target="_blank">寻对财经股票类感兴趣朋友合作做站</a></li>
	<li>· <a href="/Bbs/Exchange/20080527/30057.html" target="_blank">诚意招网站合作</a></li>
	<li>· <a href="/Bbs/Exchange/20080523/29767.html" target="_blank">闲置服务器空间招合作商 IP>三千</a></li>
	<li>· <a href="/Bbs/Exchange/20080521/29599.html" target="_blank">广告位换空间做小说站</a></li>
	</ul>
	<ul class="left_box disable" id="jy_con4">
	<li>· <a href="/Bbs/Exchange/20080820/35679.html" target="_blank">nb.la 绝对牛的米出售</a></li>
	<li>· <a href="/Bbs/Exchange/20080820/35677.html" target="_blank">chaozuo.com 炒作 5万出售</a></li>
	<li>· <a href="/Bbs/Exchange/20080820/35676.html" target="_blank">766.net 3位数字好米出售</a></li>
	<li>· <a href="/Bbs/Exchange/20080820/35674.html" target="_blank">出售行业和企业域名</a></li>
	<li>· <a href="/Bbs/Exchange/20080820/35673.html" target="_blank">收下载站玉米要求PR3以上</a></li>
	<li>· <a href="/Bbs/Exchange/20080820/35671.html" target="_blank">出售BJJB.CN</a></li>
	<li>· <a href="/Bbs/Exchange/20080820/35670.html" target="_blank">xindf.com新东方出售</a></li>
	<li>· <a href="/Bbs/Exchange/20080815/35378.html" target="_blank">出售51wan.la(我要玩啦)</a></li>
	<li>· <a href="/Bbs/Exchange/20080815/35377.html" target="_blank">广东门户米Gdeol.com出售</a></li>
	<li>· <a href="/Bbs/Exchange/20080815/35375.html" target="_blank">www.117.hk出售</a></li>
	</ul>
	<ul class="left_box disable" id="jy_con5">
	<li>· <a href="/Bbs/Exchange/20080815/35381.html" target="_blank">出售网赚论坛数据加空间加域名</a></li>
	<li>· <a href="/Bbs/Exchange/20080725/33970.html" target="_blank">出售1.6WIP 5-7WPV小说下载网站</a></li>
	<li>· <a href="/Bbs/Exchange/20080715/33141.html" target="_blank">logo之家整站出售</a></li>
	<li>· <a href="/Bbs/Exchange/20080618/31279.html" target="_blank">转让一个上海真如机房5个月托管</a></li>
	<li>· <a href="/Bbs/Exchange/20080530/30387.html" target="_blank">出售一个有PR值贴数近2万的论坛</a></li>
	<li>· <a href="/Bbs/Exchange/20080530/30386.html" target="_blank">新站出售！[中国WEB技术]</a></li>
	<li>· <a href="/Bbs/Exchange/20080528/30200.html" target="_blank">联盟+域名出售（转行）</a></li>
	<li>· <a href="/Bbs/Exchange/20080528/30199.html" target="_blank">时尚类网站出售</a></li>
	<li>· <a href="/Bbs/Exchange/20080527/30059.html" target="_blank">求购WAP手机类网站！</a></li>
	<li>· <a href="/Bbs/Exchange/20080526/29926.html" target="_blank">成都本地门户网站出售DMOZ3年历史</a></li>
	</ul>
	<ul class="left_box disable" id="jy_con6">
	<li>· <a href="/Bbs/Exchange/20080815/35386.html" target="_blank">上海数据招聘IDC销售工程师</a></li>
	<li>· <a href="/Bbs/Exchange/20080815/35385.html" target="_blank">急招女性发贴员兼职</a></li>
	<li>· <a href="/Bbs/Exchange/20080723/33858.html" target="_blank">机客网159.com人民币招版主</a></li>
	<li>· <a href="/Bbs/Exchange/20080708/32566.html" target="_blank">求职：手工发帖推广网站</a></li>
	<li>· <a href="/Bbs/Exchange/20080708/32556.html" target="_blank">北纬信息招聘销售工程师</a></li>
	<li>· <a href="/Bbs/Exchange/20080708/32555.html" target="_blank">诚聘网站产品经理 - 北京</a></li>
	<li>· <a href="/Bbs/Exchange/20080708/32550.html" target="_blank">西安招聘PHP程序员及网站美工</a></li>
	<li>· <a href="/Bbs/Exchange/20080611/30892.html" target="_blank">急找ASP网站开发人员一名(上海）</a></li>
	<li>· <a href="/Bbs/Exchange/20080530/30384.html" target="_blank">招聘ASP程序员和美工</a></li>
	<li>· <a href="/Bbs/Exchange/20080530/30383.html" target="_blank">西安网络公司招聘网络程序设计人员</a></li>
	</ul>
	<ul class="left_box disable" id="jy_con7">
	<li>· <a href="/Bbs/Exchange/20080619/31309.html" target="_blank">请人仿照17tech DEDecms模板</a></li>
	<li>· <a href="/Bbs/Exchange/20080611/30890.html" target="_blank">500元做一个网站，做的火速联系</a></li>
	<li>· <a href="/Bbs/Exchange/20080528/30208.html" target="_blank">想定做个格子铺程序</a></li>
	<li>· <a href="/Bbs/Exchange/20080528/30194.html" target="_blank">找人制作外贸电子商务网站</a></li>
	<li>· <a href="/Bbs/Exchange/20080526/29930.html" target="_blank">定做一个www.1d.com一样的网站</a></li>
	<li>· <a href="/Bbs/Exchange/20080523/29778.html" target="_blank">诚接个种网站全FLASH交互ASP</a></li>
	<li>· <a href="/Bbs/Exchange/20080522/29701.html" target="_blank">急找人外包1000款flash游戏汉化</a></li>
	<li>· <a href="/Bbs/Exchange/20080522/29653.html" target="_blank">找人做2个网站望能找到技术员合作</a></li>
	<li>· <a href="/Bbs/Exchange/20080519/29374.html" target="_blank">求驾校理科模拟考试程序！！</a></li>
	<li>· <a href="/Bbs/Exchange/20080519/29373.html" target="_blank">付费请朋友帮忙做个dz6.0的支付插件</a></li>
	</ul>
	<ul class="left_box disable" id="jy_con8">
	<li>· <a href="/Bbs/Exchange/20080725/33973.html" target="_blank">承接VI LOGO 标志广告平面设计</a></li>
	<li>· <a href="/Bbs/Exchange/20080725/33972.html" target="_blank">SHOPEX商业模板只需50元</a></li>
	<li>· <a href="/Bbs/Exchange/20080707/32448.html" target="_blank">网站设计制作招标：有意者请报价</a></li>
	<li>· <a href="/Bbs/Exchange/20080620/31422.html" target="_blank">英文网站高手设计LOGO报酬300</a></li>
	<li>· <a href="/Bbs/Exchange/20080603/30558.html" target="_blank">免费设计88*31网站的LOGO</a></li>
	<li>· <a href="/Bbs/Exchange/20080603/30557.html" target="_blank">出RMB请人做电影站！有能力的进！</a></li>
	<li>· <a href="/Bbs/Exchange/20080521/29593.html" target="_blank">一千元请人设计网站，包括LOGO</a></li>
	<li>· <a href="/Bbs/Exchange/20080521/29580.html" target="_blank">本人专业网站设计及制作</a></li>
	<li>· <a href="/Bbs/Exchange/20080521/29578.html" target="_blank">急需要做DEDE模板 DIV+CSS也可</a></li>
	<li>· <a href="/Bbs/Exchange/20080513/28973.html" target="_blank">50元做一个HTML的页面</a></li>
	</ul>
	</div>
	</div>
	</body>
	</html>

beichen_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS竖向选项卡

xmlns="http://www.w3.org/1999/xhtml"> http-equiv="Content-Type" content="text/html; charset=gb2312" /> 竖向标签选项卡 type="text/css">
复制链接

扫一扫