FreeOZ论坛

标题: 这小段HTML代码什么意思啊 [打印本页]

作者: 四香油饼 时间: 28-7-2011 16:49
标题: 这小段HTML代码什么意思啊
我想给一个表格的cell设置一个链接，就是当鼠标移到cell上的时候就能链接，而不需要必须移动到里面的文字上，也不希望用javascript的方法，网上查到了这么个答案，但我看不懂，不知道该加到哪里，哪位老师给我解答一下吧，谢谢了。

Using anchors:

<tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>

I made the second work using:

table tr td a {
display:block;
height:100%;
width:100%;
}

后面那一小段什么意思，该放在哪里呢？

作者: tristone 时间: 28-7-2011 16:51

原帖由 四香油饼 于 28-7-2011 15:49 发表

 登录/注册后可看大图

我想给一个表格的cell设置一个链接，就是当鼠标移到cell上的时候就能链接，而不需要必须移动到里面的文字上，也不希望用javascript的方法，网上查到了这么个答案，但我看不懂，不知道该加到哪里，哪位老师给我解答一 ...

这不是CSS吗？

作者: 骷髅 时间: 28-7-2011 16:53
It's ccs. Add it into <style> </style> in <header></header>, But I doubt it does what u want. Correct me I'm wrong.

作者: 四香油饼 时间: 28-7-2011 17:14

原帖由骷髅于 28-7-2011 15:53 发表

 登录/注册后可看大图

It's ccs. Add it into in , But I doubt it does what u want. Correct me I'm wrong.

那怎么才能实现呢？

作者: tristone 时间: 28-7-2011 17:33

原帖由 四香油饼 于 28-7-2011 16:14 发表

 登录/注册后可看大图

那怎么才能实现呢？

<html>
<head>
<style type="text/css">
table tr td a {
display:block;
height:100%;
width:100%;
}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p>
</body>

作者: 周星星1832 时间: 28-7-2011 18:01
<link rel="stylesheet" type="text/css" href="example.css" />
把那段放到example.css里。

这个style是满足你的需求的

作者: RobinQ 时间: 28-7-2011 21:05
标题: 完整的示例，这样看着清楚点 :)
<html>
<head>
<style>
      table tr td a {
         display:block;
         height:100%;
         width:100%;
      };
</style>
</head>
<body>
<table style="border:1px solid black; width:500px">
      <tr>
         <td style="background-color:red">
            <a href="">text</a>
         </td>
         <td style="background-color:green">
            <a href="">text</a>
         </td>
      </tr>
</table>
</body>
</html>

作者: RobinQ 时间: 28-7-2011 21:09
那段CSS的意思是把链接的显示方式改为block，（默认为inline），同时占满表格的cell。这样整个cell的范围都是<a> 的范围了。

作者: 四香油饼 时间: 28-7-2011 21:18
谢谢楼上各位的指教，freeoz能人就是多阿

作者: 骷髅 时间: 28-7-2011 22:43
难道不要a:hover的style吗？这个style没有设定具体的变化啊。

作者: mason00 时间: 1-8-2011 20:19
标题: 回复 #10 骷髅的帖子
难点就在这里，油饼要求移到td上就改变link的特性，a:hover显然只对link有效果吧。。。

作者: 四香油饼 时间: 2-8-2011 01:30
俺在w3school学了2天css，现在已经明白啦，已经做成功了，再次谢谢大家

欢迎光临 FreeOZ论坛 (https://www.freeoz.org/ibbs/)