html的表格

来源：互联网发布：办公网络编辑：程序博客网时间：2024/05/17 01:11

使用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的用法

0 0