一个比较漂亮的tab样式

最新推荐文章于 2024-02-07 11:08:46 发布

iteye_19488

最新推荐文章于 2024-02-07 11:08:46 发布

阅读量2.5k

点赞数

分类专栏： css javascript 文章标签： JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/iteye_19488/article/details/81934471

版权

css javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

直接上代码吧：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, p, blockquote, th, td {
margin:0;
padding:0;
font:宋体;
font-size:12px;
}

ol, ul {
list-style:none outside none;
}

/*link*/
a{color:#106aa9; text-decoration:none;}

/*content nav one*/
.navC{border-bottom:1px solid #cce2ed;}
.navC li{border-left:1px solid #cce2ed;border-right:1px solid #cce2ed;}
.navC li a{border-top:1px solid #cce2ed;background:#f1f6fa;font-size:14px;}
.navC li a:hover{background:#ffffff;text-decoration:none;}
.navC .current,.navC li:hover{border-left:1px solid #cce2ed;border-right:1px solid #cce2ed;}
.navC li:hover a{border-top:1px solid #cce2ed;}
.navC .current a,.navC .current a:hover{background:#ffffff;border-bottom:1px solid #ffffff;color:#333333;border-top:1px solid #cce2ed;}
.navC .current a{ font-weight:700;}

.navC{height:28px;line-height:28px;}
	.navC ul{padding-left:10px;float:left;margin-bottom:-1px;} /*ie6*/
		.navC li{float:left;margin-right:5px;}
			.navC li a{float:left;display:block;padding:0 15px;height:28px;overflow:hidden;margin-top:-1px;_position:relative;}

.mb10{ margin:10px; }
.mb20{ margin:20px; }
.pd10{ padding:10px;}

/*table*/
.tdtable{border:0px;cellspacing:0;cellpadding:0;align:center;width:98%;border-collapse:collapse;}
.tdtable th,tr{height:40px;}
.tdtable th{background:#cce2ed;padding:10px;padding:4px;border:solid 1px #fff;}
.tdtable td{border:solid 1px #cce2ed;padding:4px;}


</style>
</head>
<body>
<div id="mainContainer">
	<div id="navContainer" class="navC mb10">
		<ul>
			<li><a href="#" hidefocus="true">系统设置1</a></li>
			<li><a href="#" hidefocus="true">系统设置2</a></li>
			<li class="current"><a href="#" hidefocus="true">系统设置3</a></li>
			<li><a href="#" hidefocus="true">系统设置4</a></li>
			<li><a href="#" hidefocus="true">系统设置5</a></li>
		</ul>
	</div>
	<div class="mb20">
	<table class="tdtable">
	<tbody>
		<tr>
			<th>
				<strong>留言薄</strong>编号
			</th>
			<th>
				手机号码
			</th>
			<th>
				留言时间
			</th>
			<th>
				留言
			</th>
			<th>
				操作
			</th>
		</tr>		
		<tr>
			<td>
				1
			</td>
			<td>
				13638688356
			</td>
			<td>
				
			</td>
			<td>
				意见内容意见内容意见内容
			</td>
			<td>					
				<a href="message-board!delete.action?id=1&amp;msgType=" class="del">删除</a>
			</td>
		</tr>	
		<tr>
			<td>
				2
			</td>
			<td>
				13638688356
			</td>
			<td>
				
			</td>
			<td>
				意见内容意见内容意见内容
			</td>
			<td>					
				<a href="message-board!delete.action?id=2&amp;msgType=" class="del">删除</a>
			</td>
		</tr>	
		<tr>
			<td>
				8
			</td>
			<td>
				13638688356
			</td>
			<td>
				
			</td>
			<td>
				我爱你，就象老鼠爱大米11
			</td>
			<td>					
				<a href="message-board!delete.action?id=8&amp;msgType=" class="del">删除</a>
			</td>
		</tr>		
		<tr>
			<td bgcolor="#fafafa" align="right" colspan="6">
				<div id="footer">
					第1页, 共1页
					<a href="javascript:jumpPage(1)">首页</a>
					
					
					<a href="javascript:jumpPage(1)">末页</a>
				</div>
			</td>
		</tr>
	</tbody>
	</table>	

	</div>
</div>
</body>
</html>

看看效果吧：

iteye_19488

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
一个比较漂亮的tab样式

直接上代码吧：&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;&lt;style&gt;body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, p, blo...
复制链接

扫一扫