html - 导航栏端盖

标签 html

我对这个真的很陌生,所以请多多包涵。我正在编辑现有的 3dCart 网站,但导航栏出现问题。

条形图背景图像跨度为 100%,因此我的端盖无法正确显示透明度。我在作弊,在端盖上应该是透明的,与页面背景颜色相同,但它不正确,你可以看到。

我想知道的是如何将端盖放在两端而不是“顶部”,可以这么说。

<td><table width="100%" border="0" cellpadding="0" cellspacing="0" style="background: url(assets/templates/[template]/images/menu-bg.gif) repeat-x; color: #000; text-align: right">
            <tr>
              <td width="13"><img src="assets/templates/[template]/images/menu-l.png" width="13" height="48"></td>

端盖 (menu-l) 是一个透明的 png 文件,但它不起作用。我使用的是将透明部分设置为主页背景色的 jpg,但它是渐变色,看起来不对。

如果有人能告诉我如何将这些盖子放在末端,我将不胜感激。

谢谢

最佳答案

您可能应该使用 div 而不是使用表格。对于 div 元素,您可以使用 position 属性将图像直接放在您想要的位置。

#navcap1{position:absolute;left:XXpx;top:TTpx;}
#navcap2{position:absolute;right:ZZpx;top:TTpx;}

或者,更好的方法可能是为导航创建一个 div,然后在 div 中将端盖向左和向右浮动。

<div id=nav style="background:imagex; prop2:x; prop3:x;">
   <div id=capleft style="display:block; float:left;"></div>
   <div id=capright style="display:block; float:right;"></div>
</div>

或者,您可以只控制 div 的宽度,这样您甚至不需要端盖。

无论哪种方式,我都不会使用表格,而且可能会打破这种风格。

关于html - 导航栏端盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12820762/

相关文章:

jquery - 与数据表功能交互后表清空

javascript - Div 的 Jquery 事件 onChange

android - 如何使用 css 和 html android

html - 将 Bootstrap 从 3.3.4 升级到 4.0

javascript - 控制进入循环但不在html div中附加和显示数据

javascript - 如何对齐和摆脱重叠的视频?

html - 如何让字母在自动换行中对齐?

html - 控制*ngFor最后一项的具体样式

html - 为什么 text-align 属性在按钮元素中不起作用?

html - 当我在 Expo (iOS) 中使用 Print API 打印 html 时,html 中的分页符无法按预期工作