使用 CSS 的导航菜单

Question

我尝试用 html 和 css2 制作一个简单的水平导航菜单。

有一点特别的是，我想要一个漂亮的背景（图像），并且菜单的左侧和右侧都用背景图像（圆角）进行样式设置：（

1 | 链接 2 | 链接 3 ）

链接 如果分隔线也是图像，那就太好了，但目前它们对我来说是第二要务，因为我已经在角落里挣扎了。

我尝试使用 3 或 4 个 div，其中一个是整个栏的容器，其余的是左、中和右 div。在最后 3 个 div 中设置背景图像：

div.nav
{
    height:39px;
    line-height:39px;
    padding:0;
    margin:0;
    text-align:center;
    vertical-align:middle;
}

div.navLeft {
    content: 
    background: url('../images/left.png') center left no-repeat;
    float: left;
    width:19px;
}

div.navRight {
    content: 
    background: url('../images/right.png') center right no-repeat;
    float: right;
    width:19px;
}

div.navCenter {
    background-image:url('../images/background.png');
    background-color:transparent;
    background-repeat:repeat-x;
    background-position:center;
    width:100px;
}

和 HTML：

        <div class="nav">
            <div class="navLeft"></div>
            <div class="navCenter">test</div>
            <div class="navRight"></div>
        </div>

但在浏览器中，这只显示导航中心背景图像，看不到左右图像背景。我添加了“内容：”我认为 DIV 可能需要一些内容，但没有任何改进。

也许这是错误的方法，我应该在菜单中使用“ul”和“il”标签，但是我不知道应该将每个背景图像的CSS放在哪里。例如，我可以将“ul”的 css 中左侧的背景图像放置在其中吗？但是由于 ul 已经在使用，右角的图像怎么办？或者我必须为此使用“ul:after”吗？

Answer 1

content:  不是有效的 CSS，无论如何你都不应该需要它，单独的左/右 div 的宽度应该足以给它你需要的宽度，然后添加一个高度以匹配中心部分的行高。

如果您觉得需要添加   ，它应该位于 HTML 中

，并且 navRight 也应该位于 HTML 中浮动的 navCenter 之前才能正常工作。如果容器 div 是 138px = 100+19+19 那么中心 div 应该只填充浮动之间的空间，如果您将其放入新的块格式上下文中，则会溢出， - 溢出: 隐藏 会做到这一点..

CSS:

div.nav
{
    height:39px;
    width: 138px;
    line-height:39px;
    text-align:center;
}

div.navLeft {
    background: #0f0;
    float: left;
    width:19px;
    height: 39px
}

div.navRight {
    background: #0f0;
    float: right;
    width:19px;
    height: 39px;
}

div.navCenter {
    background: #f00;
    width:100px;
    overflow: hidden; /* to make new black formatting context if width is used */
}

HTML:

<div class="nav">
  <div class="navLeft"></div>
  <div class="navRight"></div>
  <div class="navCenter">test</div>
</div>

小提琴示例

Answer 2

将 navLeft 和 navRight 的高度指定为图像的高度。然后将显示图像。尝试一下。

Answer 3

使用 div 作为菜单选项卡并没有错，尽管在编辑 CSS 时使用 ul 和 li 提供了方便和更多选项。

您是否考虑过使用 HTML5 来实现圆角？您可以在菜单容器上使用 border-radius 属性： border-radius: 10px;

您还应该添加一个带有 style="clear:both;" 的 div在导航之后清除 float:left 和 float:right 的影响。

以下是一些您可以在网站上使用的 javascript 菜单，我认为它们会有所帮助：

菜单基本菜单