web开发---给<td>添加超链接

最新推荐文章于 2021-08-05 15:49:52 发布

AZ-直到世界的尽头

最新推荐文章于 2021-08-05 15:49:52 发布

阅读量1.2w

点赞数

CC 4.0 BY-SA版权

分类专栏： web java

本文链接：https://blog.youkuaiyun.com/zzq900503/article/details/42219115

java 同时被 2 个专栏收录

267 篇文章

订阅专栏

web

142 篇文章

订阅专栏

本文介绍了一种使用HTML的TD元素实现导航链接的方法。通过将A标签设置为块级元素，并调整其尺寸与TD元素一致，可以使得整个TD区域都成为可点击的链接。此外，还提供了具体的样式代码来确保链接的美观与可用性。

我们经常用td来做nav导航那给<td> 添加超链接就是比较常用的需求

直接 <a><td></td></a>不符合标准

只能 <td><a></a></td> 但此时超链接只有鼠标直到a标签时才生效并不是进入td就生效

这个时候我们只要把 a标签变成块级元素即可

<td width="92" class="nav" ><a href="#">HOME</a></td>

然后

<style>
.nav a {
        display:block; /* 把行内元素 变成 块级元素 */
        width:92px; /* 盒子 宽度 与td宽度一致*/
        height:37px; /* 盒子 高度与td高度一致 */
        text-decoration: none;
        vertical-align: middle;/* 使a的文本垂直居中 */
        
    }

.nav{
 background:#0E0D0D;
width:92px;   
 text-align: center;     /* 使a的文本水平居中 */
 white-space:nowrap;
color:#ffffff;
cursor:pointer;
line-height:37px; /* 使a的文本垂直居中 要与a标签的高度一致 */
}
</style>