我真的很难让这个导航菜单有一个分割导航的图像。响应是一个很大的优势。我不相信当前的代码是正确的,所以请对如何解决这个问题保持开放的态度。
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%;
}
更新 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/