第二十二天:使用真正的清单(或以适当的方法伪造)
假设你有这三个链结的网志目录: Slashdot 、 The Register 和 dive into mark ;可是你不想要用丑陋的黑色项目符号来条列,而想要在每个链结前加上华丽无比的图片。这时候你能怎么办?最常见的解决方法是在每个链结前用上 <img>
卷标。这不但可行,而且还可以在每个图片加上适当的 alt
来增加亲和力。
然而你还可以更进一步地用真正的清单标记( <ul>
和 <li>
卷标),再用 CSS 来把丑陋的黑色项目符号换成图片。除了这是「正确的方法」之外,无论你在不在乎这种学术热诚,但是这个技术确实能够带来额外的亲和力。
我将在一分钟内展示这两种技术的范例。
谁因此获益?
Marcus 从中获益了。因为就跟我们昨天所看到的一样, Lynx 会在任何图片未包含有
alt
属性时,显示出这些图片的档名。Michael 从中获益了。因为 Links 从不显示图片;但是在预设的情况下,当任何图片未包含有
alt
属性时,它也不会显示任何信息。昨天当我们想要忽略卡位图片时可以接受这个结果,但今天我们还希望有些图片能够指出它是一份清单,所以我们得用上alt
文字。同样地,当 Michael 把浏览器的图形选项关闭后, Opera 会在原本出现「缺少图形」的区块显示
alt
文字。如果你用了进阶技术的话, Opera 还可以有更杰出的表现:它会恢复显示那些丑陋的黑色项目符号,而不是显示「缺少图形」的区块。Jackie 从中受益了。因为 就跟昨天我们所看到的一样, JAWS 会在任何图片未包含有
alt
属性时,念出这些图片的档名;最后链结就会失落于不规则档名汪洋之中。 Jackie 可能听到像这样的东西:fancy dot dot gif link slashdot, fancy dot dot gif link the register, fancy dot dot gif link dive into mark
在
alt
文字里加上星号能有莫大的帮助。 JAWS 会知道这个图片是用来当作清单前面的符号用的,于是就不念出来。然而, Home Page Reader 还是会明确地把星号念出来,所以使用者就会听到像这样的东西:asterisk link slashdot, asterisk link the register, asterisk link dive into mark
使用真正的清单标记才是最好的方法。因为所有的视觉呈现都会在 CSS 描述理,所以完全不会打断你的页面,同时 JAWS 和 Home Page Reader 也都会念出你的清单当作清单来念。现在听起来就会像这样:
link slashdot, link the register, link dive into mark
怎么做
如果你有个看起来像这样的网志目录:
<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.slashdot.org/">Slashdot</a> <br>
<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.theregister.co.uk/">The Register</a> <br>
<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://diveintomark.org/">dive into mark</a> <br>
你应当在清单项目图片里提供 alt
属性。在 alt
文字里用上星号,仿真成当你使用真的清单标记时所会看到的样子。(为了要避免在视觉性浏览器上跑出工具提示,你也应该提供空的 title
属性)。
<img alt="*" title="" src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.slashdot.org/">Slashdot</a> <br>
<img alt="*" title="" src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.theregister.co.uk/">The Register</a> <br>
<img alt="*" title="" src="/images/fancydot.gif" width="8" height="8"> <a href="http://diveintomark.org/">dive into mark</a> <br>
怎么做:进阶版
进阶(也比较好)的技术是使用 CSS 来定义你的清单项目图片。
<style type="text/css">
ul.blogroll {
list-style: url(/images/fancydot.gif) disc;
}
</style>
然后在你的模版里,你可以用真的清单标记来列出清单:
<ul class="blogroll">
<li><a href="http://www.slashdot.org/">Slashdot</a></li>
<li><a href="http://www.theregister.co.uk/">The Register</a></li>
<li><a href="http://diveintomark.org/">dive into mark</a></li>
</ul>
结果:
- Modern browsers will display the image as the list bullet.
- Browsers with images turned off with display the boring black bullet.
- Netscape 4 will always display the boring black bullet.
- Text-only browsers always ignore CSS, so they will display the list however they normally display lists (usually rendering the list bullet as an asterisk).
附注:不加项目符号的清单
要建立前面不带图片的链结清单,还有一个常用的方法,就祇是把链结堆积起来,可能再设定一个向右对齐,就像这样:
<div align="right">
<a href="http://www.slashdot.org/">Slashdot</a><br>
<a href="http://www.theregister.co.uk/">The Register</a><br>
<a href="http://diveintomark.org/">dive into mark</a><br>
</div>
这也可以用 CSS 和真的清单标记来办到:
<style type="text/css">
ul.blogroll {
list-style: none;
text-align: right;
}
</style>
或者如果你想要让链结靠左对齐,就可以改成这样:
<style type="text/css">
ul.blogroll {
list-style: none;
margin-left: 0;
padding-left: 0;
}
</style>
无论如何,清单标记都不会跟前一个例子里有所不同:
<ul class="blogroll">
<li><a href="http://www.slashdot.org/">Slashdot</a></li>
<li><a href="http://www.theregister.co.uk/">The Register</a></li>
<li><a href="http://diveintomark.org/">dive into mark</a></li>
</ul>
「 list-style: none
」这一列会让视觉性浏览器里不要出现黑色项目符号。这对所有的浏览器,甚至是 Netscape 4 都有效。在此感谢 Tobias Schmidt 提醒我可以用这个技巧。
延伸阅读
- Tobias Schmidt: Styling lists with CSS.
- W3Schools: CSS List Properties.
- Eric Meyer: Lists and Indentation.
- Eric B. Bednarz: Manipulating Margin and Padding of Lists With CSS.