0
我想用单词的每个单元格制作5x5网格。但是每个单元在每个角落都有一个按钮。我做它的形象:按钮在表格单元的角落;文本在中心
我真的不知道如何做到这一点。我怎样才能使这些“角落按钮”与中心的文字?
<table>
<tr>
<td>
??
</td>
[..]
</tr>
[..]
</table>
我想用单词的每个单元格制作5x5网格。但是每个单元在每个角落都有一个按钮。我做它的形象:按钮在表格单元的角落;文本在中心
我真的不知道如何做到这一点。我怎样才能使这些“角落按钮”与中心的文字?
<table>
<tr>
<td>
??
</td>
[..]
</tr>
[..]
</table>
我建议这是用CSS实现的无限容易。
这里是一个非常快速的&简单的我如何与一个盒子做例子..
<div class='box'>
Tree
<span class='tl_tri tri' onclick='whatever you want the button to do'></span>
<span class='tr_tri tri' onclick='whatever you want the button to do'></span>
<span class='bl_tri tri' onclick='whatever you want the button to do'></span>
<span class='br_tri tri' onclick='whatever you want the button to do'></span>
</div>
CSS:
.box {
background: white;
border: 2px solid #000;
height:100px;
width: 100px;
position: relative;
text-align: center;
line-height:100px;
font-family: Arial;
font-size: 12pt;
}
.tri {
width: 0px;
height: 0px;
position: absolute;
}
.tl_tri {
border-right: 20px solid transparent;
border-top: 20px solid green;
top: 0px;
left: 0px;
}
.tr_tri {
border-left: 20px solid transparent;
border-top: 20px solid red;
top: 0px;
right: 0px;
}
.bl_tri {
border-right: 20px solid transparent;
border-bottom: 20px solid grey;
bottom: 0px;
left: 0px;
}
.br_tri {
border-left: 20px solid transparent;
border-bottom: 20px solid yellow;
bottom: 0px;
right: 0px;
}
这表现在这里工作: