我应该如何将此 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;
     }

Answer 1

您可以尝试添加一个空的 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>

Answer 2

也许在每个之间放置一个 1px 宽的 div 并给它某种类型的边缘边框，如凹槽、脊、插图、开头？或者你可以使用一张图片……但对于这么少的东西来说这似乎很愚蠢。

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; 作为一些额外的标记

你在行的顶部和底部获得的空间可能会变得棘手..但你知道..你可以做到。

Answer 4

你的菜单应该是这样的：

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;
}

Answer 5

最简单的选择是在每个导航项之后有一个空列表元素，然后相应地对其进行样式设置，但这不是很语义化。

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