标记语言——再谈清单_HTML/Xhtml_网页制作
| 先前在第一章,我们讨论过几种标记清单的做法,研究以<ul>和<li>将它们标记成无序清单的好处.这个方法能标识清单的结构,确保所有浏览器与设备都能正确显示它的内容,同时也让我们能以CSS为它加上各种样式. 而在各种环境下,处理个别问题时标记清单的所有做法写出来的话塞满整本书都不难,我不打算塞满整本书,但是我的确打算以独立一章讨论除了无序清单之外的其他几种清单类别.研究几种适合使用清单的状况. 清单是个组织页面结构的强大工具,为每个独立的项目加上意义,让你能在稍后以css加上独立的样式. 让我们先来看看编了号的项目清单,以及两种标记这类清单的做法.或许你一眼就能看出哪种方法比较有益,但是我仍会再度详细说明这个例子,以便强调结构化标记,使用正确工具解决问题的重要性. 编号项目清单的标记法,哪种最好? 假设你打算标记一个步骤清单,每个项目之前都有编号,我们将会研究两种能够达成这个目标的不同方法,同时说明为何某个方法比较适用. 方法A:乱中有序 <ul><li>1. Chop the onions.</li><li>2. Saute the onions for 3 minutes.</li><li>3. Add 3 cloves of garlic.</li><li>4. Cook for another 3 minutes.</li><li>5. Eat.</li></ul> 前面这份清单可能是烹饪历史上最糟糕的食谱之一.但是拿来当简单的例子还蛮合适的,加点盐和鸡蛋可能好些,或是...不管,回到正题.
图8-1,浏览器关闭CSS阅读方法A的结果 <ol><li>Chop the onions.</li><li>Saute the onions for 3 minutes.</li><li>Add 3 cloves of garlic.</li><li>Cook for another 3 minutes.</li><li>Eat.</li></ol> 我确信这是大多数人选用的做法,但是这并不代表我们都没有在某些情况下,因为某种原因使用方法A.<ol>代表"有序清单"(ordered list),因此语义上我们使用了正确的元素解决手上的问题.方法B还有什么特别之处? 自动编号 图8-2 浏览器显示方法B的效果 愉快的包装者,第二部 图8-3 比较方法A和方法B换行效果 清单种类 ol li {list-style-type: upper-roman;}图8-4就是方法B配上这份CSS在浏览器内的显示效果,我们的步骤列表现在不再是预设的阿拉伯数字,而是改用罗马数字编号了.当然,标记的部分仍然完全相同.改变主意了吗?只要做点小小的修改,换上先前列出的其他样式,就能马上把清单的编号方式改成你喜欢的样子. 图8-4 换用罗马数字的有序清单 一群名词与解释的标记法,哪种更好? <ul><li>CSS<br />A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.</li><li>XHTML<br />A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML.</li><li>XML<br />A simple, very flexible text format derived from SGML.</li></ul> 这个方法看起来有点道理,使用无序清单,并且以<br />标签隔开名词与定义内容. 图8-5 以一般浏览器显示方法A的效果 <dl><dt>CSS</dt><dd>A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.</dd><dt>XHTML</dt><dd>A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML.</dd><dt>XML</dt><dd>A simple, very flexible text format derived from SGML.</dd></dl> 定义清单(<dl>)内容由两种额外标签组成:<dt>(定义名词)以及<dd>(定义描述).对我们的例子来说,定义清单完美符合内容代表的意义 -- 因为我们就是在定义一系列名词,解释. 图8-6 一般浏览器显示方法B的效果 由结构引导样式 dt {font-weight: bold;}只要这样就够了,不必为清单内容加上<strong>,<b>甚至是<span>标签,现在所有的<dt>都会变成粗体,与图8-7一样. 图8-7 方法B为<dt>加上font-weight:bold的效果 加上图片 dt {font-weight: bold;}dd {margin-left: 15px;padding-left: 15px;color: #999;background: url(dd_arrow.gif) no-repeat 0 2px;}我们所做的修改,首先是以margin-left:15px稍微拿掉一些<dd>标签预设的外补丁,接着,我们把定义描述的颜色换成灰色,使其与<dt>的区别更大.同时在描述文字的左边,理顶端2像素的地方放上一个小巧的橘色箭头图标,并且在描述文字的左边留下15像素的内部定,让图标不会与文字重叠,图8-8就是完成的效果. 图8-8 加上图标,凸显文字关联性的定义清单 概要 <ol><li>Chop the onions.</li><li>Saute the onions for 3 minutes.</li><li>Add 3 cloves of garlic.</li><li> Cook for another 3 minutes.</li><li>Eat.</li></ol> 没有加上任何CSS的话,浏览器的显示效果与图8-2差不多,就与本书其他的结构化标记语法示例一样,在导入CSS的时候,有序清单是一组容易指定样式的标签组. <ol id="recipe"><li id="one">Chop the onions.</li><li id="two">Saute the onions for 3 minutes.</li><li id="three">Add 3 cloves of garlic.</li><li id="four"> Cook for another 3 minutes.</li><li id="five">Eat.</li></ol> 现在我们能识别每个项目了,因此我们对清单内每个元素的样式都进行完整控制.值得一提的是,在此为每个项目加上独特的id之后,我们就无法依赖有序清单的"自动编号"功能了.如果稍侯在中间插入新步骤的话,我们就得自己变更往后步骤的id值,在此事先提醒一下. 自定数字 #recipe {list-style-type: none;}图8-9 是用上面这条规则去掉数字之后的清单显示效果.
图8-9 用CSS关闭数字编号之后的有序清单
#recipe {list-style-type: none;}#recipe li {padding: 10px 50px;margin-bottom: 6px;border-bottom: 1px solid #ccc;}把这些设定值套用到清单内的每一个<li>之后,接着我们就能为每个id指定对应的数字图片. #recipe {list-style-type: none;}#recipe li {padding: 10px 50px;margin-bottom: 6px;border-bottom: 1px solid #ccc;}#one {background: url(ol_1.gif) no-repeat 6px 50%;}#two {background: url(ol_2.gif) no-repeat 2px 50%;}#three {background: url(ol_3.gif) no-repeat 3px 50%;}#four {background: url(ol_4.gif) no-repeat 0px 50%;}#five {background: url(ol_5.gif) no-repeat 6px 50%;}加上6px 50%会让图片摆放在离左边6像素,上下50%的位置上,让它对齐水平中线. 结果 图8-11 使用一般浏览器查看的最终效果 |
