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

我试图用CSS将此PSD转换为HTML。我应该如何将此PSD转换为HTML＆CSS菜单

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

来源

2011-07-28 Ye Myat Aung

你可以发布你的HTML代码？ –

在PSD中使用什么字体？ – Purag

您可以尝试添加一个空li并将其设置为分隔符。我认为这是丑陋的codewise，但像这样的工作：

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-28 05:01:16 SuperMykEl

也许把1px的宽格在每间并给它一些类型像槽，脊边边框，插图，一开始？或者你可以使用图像...但这似乎很愚蠢的东西如此之少。

来源

2011-07-28 04:28:19

+1 a'border：1px solid #FFF;背景：＃ebebe9;'看起来不错，用在http://www.20thingsilearned.com/ –

你的菜单应该是这样的：

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-28 04:32:09 oknoorap

您可以使用类似：

#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的

可能会非常棘手与您在顶部到达那里的空间和行的底部..但你知道..你可以做iit。

来源

2011-07-28 04:45:25 Joonas

最简单的方法是将有一个空列表元素，然后对其进行相应的设置，但这不是很有意义。

您也可以尝试使用一个CSS选择器，如：后（http://www.w3schools.com/cssref/sel_after.asp）

来源

2011-07-28 06:33:14 smilledge

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

回答

相关问题