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

142 篇文章 2 订阅


我们经常用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>



<!DOCTYPE html> <html> <head> <title>Web应用开发基础知识实验项目</title> <meta charset="UTF-8"> <style> table { width: 80%; margin: 0 auto; border-collapse: collapse; } td, th { border: 1px solid black; padding: 10px; text-align: center; } th { background-color: #ccc; } .comment { margin-top: 30px; border: 1px solid black; padding: 10px; width: 50%; margin: 0 auto; } .comment h3 { font-size: 24px; text-align: center; } .comment p { font-size: 18px; line-height: 1.5; text-indent: 2em; } form { width: 80%; margin: 0 auto; margin-top: 30px; } label { display: block; margin-top: 10px; font-size: 18px; } input[type="text"], select { margin-top: 5px; padding: 5px; font-size: 18px; border: 1px solid black; border-radius: 5px; } input[type="submit"] { margin-top: 20px; padding: 10px; font-size: 18px; background-color: #ccc; border: none; border-radius: 5px; cursor: pointer; } img { display: block; margin: 0 auto; width: 50%; height: auto; } </style> </head> <body> <h1>Web应用开发基础知识实验项目</h1> <h2>项目1:商城首页</h2> <table> <tr> <th>商品名称</th> <th>价格</th> <th>库存</th> <th>购买</th> </tr> <tr> <td>商品1</td> <td>100元</td> <td>1000件</td> <td><button>购买</button></td> </tr> <tr> <td>商品2</td> <td>200元</td> <td>500件</td> <td><button>购买</button></td> </tr> <tr> <td>商品3</td> <td>300元</td> <td>200件</td> <td><button>购买</button></td> </tr> </table> <h2>项目2:买家评论</h2> <div class="comment"> <h3>买家评论</h3> <p>这个商品真的很不错,质量超好,价格也很实惠,值得购买!</p> </div> <h2>项目3:酒店筛选页面</h2> <form> <label for="location">地点:</label> <input type="text" id="location" name="location"> <label for="price">价格:</label> <select id="price" name="price"> <option value="">请选择</option> <option value="1">100元以下</option> <option value="2">100-200元</option> <option value="3">200-300元</option> <option value="4">300元以上</option> </select> <label for="room-type">房型:</label> <input type="radio" id="single" name="room-type" value="single"> <label for="single">单人房</label> <input type="radio" id="double" name="room-type" value="double"> <label for="double">双人房</label> <label for="wifi">WiFi:</label> <input type="checkbox" id="wifi" name="wifi" value="1"> <label for="wifi">有</label> <input type="checkbox" id="no-wifi" name="wifi" value="0"> <label for="no-wifi">无</label> <input type="submit" value="筛选"> </form> <h2>项目4:网页中的图片</h2> <a href="https://www.example.com"><img src="example.jpg" alt="示例图片"></a> </body> </html>
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张小凡vip

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值