如何将这个PSD转换为HTML和CSS菜单

Question

我正在尝试使用CSS将这个PSD转换为HTML。

这是我目前使用CSS3所得到的结果。但我不知道如何在菜单项之间放置分隔符。有什么想法吗？

编辑：看起来示例图片没有显示，所以在这里给出链接：

PSD文件：http://postimage.org/image/2qywn3nj8/ 目前的效果：http://postimage.org/image/1ylhjsv2c/

#nav
{
    padding:0;
    margin:0;
    height: 35px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-image: -moz-linear-gradient(top, #ffffff, #eaecec);
    -moz-box-shadow: 0 0 1px #888;
    }

 #nav ul
 {
     margin-top: 0px;
     margin-left: 0;
     Font-Family: Arial;
     font-size: 10pt;
     list-style: none;
     padding-top: 8px;
     color: #000000;
     }
 #nav ul li
 {
     display: inline;
     padding-left: 30px;
     }

- Ye Myat Aung

---

PSD文件中使用的字体是什么？ - Purag

Answer 1

也许在每个元素之间放置一个1像素宽的div，并给它一些边缘样式的边框，比如凹槽、脊线、内嵌或外凸？或者你可以使用图像...但对于这么小的东西来说，那似乎有点傻。

- Jason Kaczmarsky

---

+1 一个 border: 1px solid #FFF; background: #ebebe9; 看起来很好，用在 http://www.20thingsilearned.com/ 上。 - Eric Fortis

Answer 2

你可以尝试添加一个空的 li 并将其样式设置为分隔符。我认为这样的代码看起来很丑，但是像这样做可以实现：

CSS：

#nav
{
    padding:0;
    margin:0;
    height: 35px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-image: -moz-linear-gradient(top, #ffffff, #eaecec);
    -moz-box-shadow: 0 0 1px #888;
    }

 #nav ul
 {
     margin-top: 0px;
     margin-left: 0;
     Font-Family: Arial;
     font-size: 10pt;
     list-style: none;
     padding-top: 8px;
     color: #000000;
     }
 #nav ul li
 {
     display: inline;
     padding-left: 15px;
     }
 #nav ul li.sep{
    background-image: -moz-linear-gradient(top, #eaecec, #555555);
    padding-left:1px;
    margin-left: 15px;

 }

HTML:

<div id="nav">
    <ul>
        <li>test</li>
        <li class="sep"></li>
        <li>test2</li>
        <li class="sep"></li>
        <li>test3</li>
        <li class="sep"></li>
        <li>test</li>
        <li class="sep"></li>
        <li>test2</li>
        <li class="sep"></li>
        <li>test3</li>
</ul>
</div>

- SuperMykEl

Answer 3

你可以使用类似以下的方法：

#nav ul li {
     display: inline;
     padding-left: 30px;

     border-left: 1px solid #THE-WHITE-COLOR;
     border-right: 1px solid #THE-GREY-COLOR;
}

然后只需在第一个和最后一个#navl ul li上使用一些额外的标记，如border-left: none;和border-right: none;

在顶部和底部的空间可能会有些棘手... 但是你知道... 你可以做到。

- Joonas

Answer 4

最简单的选择是在每个导航项后面放置一个空列表元素，然后相应地进行样式设置，但这并不是非常语义化。

您还可以尝试使用CSS选择器，例如:after ( http://www.w3schools.com/cssref/sel_after.asp )

- smilly92

Answer 5

你的菜单应该像这样：

HTML：

<div id="nav">
 <ul>
  <li><a href="#">Rates &amp; Plans</a></li>
  <li><a href="#">Phones</a></li>
  <li><a href="#">Rates</a></li>
  <li><a href="#">Booking</a></li>
  <li><a href="#">Coverage</a></li>
  <li><a href="#">FAQ</a></li>
  <li><a href="#">Support</a></li>
 </ul>
</div>

CSS：

#nav{
 // Background
}
#nav ul
 padding:0;margin:0 0 0 30px;
}
#nav li{
 background:url(separator.png) no-repeat 100% 0%;
 padding: 10px 15px;
 margin: 0 2px;
}

- oknoorap