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:&nbsp;
    background: url('../images/left.png') center left no-repeat;
    float: left;
    width:19px;
}

div.navRight {
    content:&nbsp;
    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>

但是在浏览器中，这只显示了navCenter背景图像，没有左右图像背景可见。我添加了'内容：'，因为我认为DIV可能需要一些内容，但没有任何改进。

也许这是错误的方法，我应该为菜单使用“ul”和“il”标签但是我不知道应该在哪里放置每个背景图像的css。例如，我可以将背景图像留在css中用于“ul”吗？但是右边角的图像是什么用的？或者我必须使用“ul：after”吗？

Answer 1

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

如果您认为需要添加&nbsp，则应该在HTML

中

同样navRight应该在HTML中navCenter之前，以便浮动工作正常。如果容器div是138px = 100+19+19，那么中心div应该只填充浮点数之间的空格，如果你将它变成一个新的块格式化上下文， - overflow: hidden将会这样做..

<强> 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>

Example fiddle

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菜单，我认为它们会有所帮助：

MenuBasic Menus

带CSS的导航菜单

3 个答案:

Example fiddle