Question

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

The photoshop file

这就是我到目前为止所使用的（使用CSS3）。

The actual menu

但我不知道如何在菜单项之间放置一个分隔符。有什么想法吗？

编辑：似乎没有显示示例图像。所以他们在这里。

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

也许在每个之间放一个1px宽的div并给它一些类型的边缘，如凹槽，脊，插入，开始？或者你可以使用一个图像...但这对于一些如此少的东西来说似乎很愚蠢。

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>

Answer 3

您可以使用以下内容：

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

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

然后只使用border-left: none;和border-right: none;作为第一个和最后一个#navl ul li的额外标记

你可能会在线条的顶部和底部找到那些空间。但是你知道..你可以做到这一点。

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）

我应该如何将此PSD转换为HTML＆amp; CSS菜单

5 个答案: