html - 带潜水图像的导航栏

标签 html css

我真的很难让这个导航菜单有一个分割导航的图像。响应是一个很大的优势。我不相信当前的代码是正确的,所以请对如何解决这个问题保持开放的态度。

HTML

<div id="nav">
    <ul class="nav-left">
        <li>1</li>
        <li>2</li>
    </ul>
    <div class="nav-logo"></div>
    <ul class="nav-right">
        <li>3</li>
        <li>4</li>
    </ul>
</div>

CSS

#nav {
    width: 400px;
    background: #f5f5f5;
    border: 1px solid grey;
    text-align: center;
}
.nav-left, .nav-right, .nav-logo {
    display: inline-block;
    height: 30px;
    vertical-align:bottom;
}
.nav-left {
    background: red;
}
.nav-right {
    background: red;
}
.nav-right, .nav-left {
    width: 100px;
    line-height: 30px;
    padding: 0;
}
.nav-logo {
    background: yellow;
    width: 30px;
    height: 100px;
    margin-left: 10px;
    margin-right: 10px;
}
ul {
    margin: 0;
    text-align: justify;
    list-style: none;
}
li {
    display: inline;
    width: 100%;
}

Mockup

更新 05.05.14 根据要求用我当前的代码更新它。

最佳答案

我已经为您制作了一个稍微敏感的标题:JSfiddle (注意:从谷歌图像搜索中借用的随机咖啡店标志......伙计,我应该去喝杯咖啡)

想法是使用 html5 nav包含您的链接的元素,每个链接都有一个 width:20%所以它会随着屏幕的宽度调整大小。 图片定位为background:url('...') no=repeat center;以避免尺码问题。它在一个单独的 div 中,允许您对 <nav> 进行 strip 化。元素。这可以通过 pure css 实现.

由于您希望垂直放置链接,因此它们嵌套在 div 中,并且使用具有相同 width:20%; 的空 div 为图像留出空间。属性作为链接容器。

一旦您接近较小的移动设备宽度(因为链接覆盖图像),设计就会中断。为此,您可以使用 @media queries .

我希望这能给你一个起点,但设计是非常主观的,有很多不同的方法可以做到。 使用 Bootstrap 来设置页面样式可能是值得的并检查他们的 CSS 以查看发生了什么。

关于html - 带潜水图像的导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23461857/

相关文章:

java - 为什么我的表单参数没有进入 JSP

html - CSS 优先级规则

javascript - 无法将 <p> 的 innerHTML 更改为 LocaleDateString()

css - 输入和文本字段中的背景颜色

html - Bootstrap 绝对定位的 div 在导航栏上方未正确显示

javascript - Data-Target 无法使用 addEventListener

html - 将文本居中到页面而不是单元格

html - 使用 HTML 和 CSS 将图像上的居中文本重叠在网格上

javascript - 在 Android WebView 中隐藏 HTML 元素?

html - 如何在网页中设置不在 Google 字体或 Font Squirrel 上的字体?