我必须创建一个导航栏,如下图所示。我试了一整天。你可以在下面看到我能写的唯一代码。问题是我使用了这里的方法:Separators For Navigation , 但我不知道如何放置链接和边框以使其看起来像图片中的那样。导航栏下方的橙色线不属于它。 我有一个 PSD Photoshop 文件,我可以从中提取导航栏的元素。这就是 nav_border.png 的来源。
我的 HTML 代码:
<div id="navbar">
<ul>
<li><a href="index.html">First time at auction ?</a></li>
<li><a href="index.html">Next auctions</a></li>
<li><a href="index.html">Rules</a></li>
<li><a href="index.html">Terms of use</a></li>
<li><a href="index.html">FAQ</a></li>
<li><a href="index.html">Contacts</a></li>
<li></li>
</ul>
</div>
我的 CSS 代码(到目前为止):
#navbar {
float: left;
width: 776px;
height: 40px;
border-radius: 8px 8px 0 0;
background-color: #003366;
}
#navbar ul {
list-style-type: none;
}
#navbar li {
float: left;
}
#navbar a {
color: white;
text-decoration: none;
}
#navbar li + li{
background:url('nav_border.png') no-repeat top left;
padding-left: 10px;
margin-left: 30px;
}
最佳答案
这是一个可以让你朝着正确方向前进的 fiddle
https://jsfiddle.net/fx6gtj6o/
#navbar {
background: blue;
border-radius: 8px 8px 0 0;
ul {
list-item-type: none;
padding: 0;
li {
display: inline-block;
text-align: center;
padding: 10px 10px;
border-right: 1px solid black;
a {
color: #FFF;
}
}
}
}
没有理由使用实际模型中的任何图像,您可以使用 CSS 完成一切
关于html - 如何处理我的导航栏以使其看起来像图片中的那样?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34455246/