html的表格

最新推荐文章于 2024-08-18 21:08:41 发布

xuan_bai313

最新推荐文章于 2024-08-18 21:08:41 发布

阅读量145

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/xuan_bai313/article/details/38536533

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用html和css实现如下的样式：

html如下：

<table>
	<tr>
		<td rowspan="7" class="border-right first">
			<a href="javaScript:;">网站首页</a>
		</td>
	</tr>
	<tr>
		<td class="padding">
			<a href="javaScript:;">关于我们</a>
		</td>
		<td>
			<a href="javaScript:;">中心简介</a>
		</td>
		<td>
			<a href="javaScript:;">职能设置</a>
		</td>
		<td>
			<a href="javaScript:;">行车路线</a>
		</td>
		<td colspan="3" class="no-border">
			<a href="javaScript:;">工作回顾</a>
		</td>
	</tr>
	<tr>
		<td class="padding">
			<a href="javaScript:;">有问必答</a>
		</td>
		<td>
			<a href="javaScript:;">法律维权</a>
		</td>
		<td>
			<a href="javaScript:;">在线咨询</a>
		</td>
		<td colspan="4" class="no-border">
			<a href="javaScript:;">常见问题</a>
		</td>
	</tr>
	<tr>
		<td class="padding">
			<a href="javaScript:;">学生</a>
		</td>
		<td>
			<a href="javaScript:;">求职前</a>
		</td>
		<td>
			<a href="javaScript:;">求职中</a>
		</td>
		<td colspan="4" class="no-border">
			<a href="javaScript:;">签约后</a>
		</td>
	</tr>
	<tr>
		<td class="padding">
			<a href="javaScript:;">雇主</a>
		</td>
		<td>
			<a href="javaScript:;">生源概览</a>
		</td>
		<td>
			<a href="javaScript:;">专业介绍</a>
		</td>
		<td>
			<a href="javaScript:;">宣讲预定</a>
		</td>
		<td>
			<a href="javaScript:;">信息发布</a>
		</td>
		<td colspan="2" class="no-border">
			<a href="javaScript:;">招聘场地</a>
		</td>
	</tr>
	<tr>
		<td class="padding">
			<a href="javaScript:;">校友</a>
		</td>
		<td>
			<a href="javaScript:;">信使微博</a>
		</td>
		<td>
			<a href="javaScript:;">校友风采</a>
		</td>
		<td>
			<a href="javaScript:;">校友反馈</a>
		</td>
		<td>
			<a href="javaScript:;">就业去向</a>
		</td>
		<td>
			<a href="javaScript:;">东师信使</a>
		</td>
		<td colspan="2" class="no-border">
			<a href="javaScript:;">校友会</a>
		</td>
	</tr>
	<tr>
		<td colspan="8" class="no-border padding" >
		<a href="javaScript:;" class="max">东北高师就业联盟网</a>
	</td>
	</tr>
</table>

css样式如下

<pre name="code" class="css">table{
	color: #1a4373;
}
table a{
	display: inline-block;
	width: 51px;
	padding: 3px;
	color: #1a4373;
	border: 1px solid #ffaa00;
	border-radius: 5px;
	text-align: center;
}
table td{
	position: relative;
	width: 75px;
	height: 30px;
}
td.padding{
	padding-left: 10px;
}
.border-right{
	border-right:1px solid #ffaa00;
}
td:before{
	display: inline-block;
	position: absolute;
	top: 15px;
	right: 1px;
	width: 15px;
	height: 1px;
	border-top:1px solid #ffaa00;
	content: " ";
}
td.no-border:before{
	border-top: 0px solid #ffaa00;
}
td.first:before{
	width: 22px;
	top: 90px;
	right: -5px;
}
td a.max{
	width: 120px;
}

*实现的关键是before的用法