3

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

Photoshop文件

这就是我到目前为止所得到的（使用 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;
     }
4

5 回答 5

2

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

于 2011-07-28T04:28:19.500 回答
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>
于 2011-07-28T05:01:16.407 回答
1

你可以使用类似的东西：

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

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

然后在 first 和 last 上使用border-left: none;and作为一些额外的border-right: none;标记#navl ul li

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

于 2011-07-28T04:45:25.890 回答
0

你的菜单应该是这样的：

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;
}
于 2011-07-28T04:32:09.643 回答
0

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

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

于 2011-07-28T06:33:14.187 回答