我正在尝试用 css 和 html 制作一个菜单。我不知道我最终要使用哪种尺寸,所以我做了一个菜单,它可以是我想要的任何水平和垂直尺寸,但我有一个问题。由于某种原因,菜单的右侧被隐藏了。
HTML:
<table>
<tr>
<td id="menu_top_left"></td><td id="menu_top_center"></td><td id="menu_top_right"></td>
</tr>
<tr id="menu_center">
<td colspan="2"><a href="#">Link 1</a></td>
</tr>
<tr id="menu_center">
<td colspan="2"><a href="#">Link 2</a></td>
</tr>
<tr id="menu_center">
<td colspan="2"><a href="#">Link 3</a></td>
</tr>
<tr id="menu_center">
<td colspan="2"><a href="#">Link 4</a></td>
</tr>
<tr id="menu_center">
<td colspan="2"><a href="#">Link 5</a></td>
</tr>
<tr id="menu_center">
<td colspan="2"><a href="#">Link 6</a></td>
</tr>
<tr>
<td id="menu_bot_left"></td><td id="menu_bot_center"></td><td id="menu_bot_right"></td>
</tr>
</table>
CSS:
table{
width:200px;
border-spacing:0;
}
table tr #menu_top_left{
width:20px;
height:20px;
background:url(top_left.png);
}
table tr #menu_top_center{
width:160px;
height:20px;
background:url(top_center.png) repeat-x;
}
table tr #menu_top_right{
width:20px;
height:20px;
background:url(top_right.png) repeat-x;
}
table #menu_center{
background:url(center_center.png) repeat;
text-align:center;
}
table tr #menu_bot_left{
width:20px;
height:20px;
background:url(bot_left.png);
}
table tr #menu_bot_center{
width:160px;
height:20px;
background:url(bot_center.png) repeat-x;
}
table tr #menu_bot_right{
width:20px;
height:20px;
background:url(bot_right.png) repeat-x;
}
隐藏的右侧部分应该与未隐藏的左侧部分一样。我找不到修复它的方法。
希望有人能帮我修好,谢谢。
抱歉我的英语不好..
最佳答案
首先,您不应该使用表格进行格式化;它们用于显示表格数据。您的导航链接实际上只是列表中的元素,因此请改用
- 和
- 标签。您可以在标签内包含这些元素。
其次,当您确实不需要时,您会使用图像。你想实现:
- 红色单像素边框
- 圆 Angular
- 容器周围发出红色“光”。
您可以使用以下 CSS 属性获得所有这三种效果:
- > border
- > border-radius
- > box-shadow
编辑:这是一个实际的例子。你会发现这样做是多么容易:)
http://jsfiddle.net/ntwiles/9Qv3h/
d
关于html - html 和 css 中的菜单效果不佳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21445514/