html - 使用 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>