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>

使用HTML与Photoshop创建导航栏

1 个答案: