使用HTML创建导航栏与Photoshop

Question

在我的网站上我想要一个导航栏。我正在考虑在Photoshop中创建背景，然后将其作为无序列表的背景（使用HTML显示实际文本）来显示条中的项目。这是最好的做法或在Photoshop中的项目上的文字？如果我以第二种方式做到这一点，我该如何做到这一点，因此图片的每个不同部分都是可点击的？

Answer 1

它是伟大的你问正确的问题，你是正确的问他们。 通过一切手段将图片用作背景，但不要将文字作为可以避免的图片，尤其是在菜单中。 原因是两个折叠一个搜索引擎不会阅读内容和第二个辅助功能屏幕阅读器不能阅读它，用户不能通过浏览器放大文本。

您的标记可能看起来像这样

.nav{ 
    background-image:url("bg.jpg"); 
    background-repeat:no-repeat; 
    width:yourwidth; 
    height:yourheight; 
    display:block; 
} 
.nav li{ 
    list-style:none; 
    float:left; 
    margin-left:20px; 
    margin-right:20px;} 

标记

<ul class="nav"> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
</ul>