-

,

等等,行内元素包括:,,,等等.
如果以纯XML的角度来看我们的食品清单,或许我们会使用这样的方式进行标注:

Apples
Spaghetti
Green Beans
Milk

整个清单有一个容器元素,所有的食品项目都包含在里面,以这种方式归类项目,可以基于XML的应用轻松的从清单里面抽取出所有的项目.
举例来说,一个开发者需要编写一份XSLT样式表,将这个清单转成xhtml,纯文字,甚至是pdf文件,因为列表项目的结构表现的非常清晰,所以程序可以轻松的获取信息并作出一些有用的处理.
虽然在这本书里我并不直接处理XML,但是这些原则也适用于XHTML世界,如果文档使用非常语义化的标签结构,将可以提升文档今后的灵活度,不管是为结构清晰的文档加上css样式表还是修改容易理解的文档 — 只要提供正确的结构,就能节省许多今后在维护时可能浪费掉的时间.
接着,我们仔细的看看方法D,看看这些怎么样结合在一起 — 一个能被大多数浏览器和屏幕阅读器识别并显示的文档,同时又允许我们使用各种不同的方法为文档加上样式. 

---

方法 D: 愉快的包装者

• Apples


• Spaghetti


• Green Beans


• Milk

是什么让方法D变得如此特别?首先,它的语法完全正确,正确的无序清单具备了

容器元素,同时每个项目都已
• 元素闭合起来.到这里你会想问,我们花费了那么多力气只来示范为了正确而正确?我们来看看这样做能带来的好处:
  由于我们正确的标记了我们的食品清单,每个项目都会独占一行(因为块级元素
• 的关系),而且大多数浏览器会给每个项目的左边增加一个小圆点符号,并且进行正确的行内缩进换行.(见图 1 - 3)
  

  图1 - 3
  PDA,移动电话,或者其他的小屏幕设备的用户也可以看到清楚的,关系明确的组织方式,由于我们告诉了这些设备这些资料的类型(在这个示例里是清单),因此这些设备能够根据自己的能力决定怎样显示才能达到最好的效果.
  如果因为放大字号或者缩小浏览器视窗宽度等原因造成换行,那么被换行的文字会行内缩进到与第一行文字对齐的位置,所以不管浏览器环境如何,都可以轻松的识别每个清单项目.  

  ---

  概要
  我们已经针对每种可能的方法进行讨论了,现在让我们快速的回顾一下刚才讨论过的东西: 方法A:
  无法为清单加上独特的样式
  在狭窄的列里或者小屏幕设备上,较长的内容可能会因为换行而造成误解
  缺乏语义性 方法B:
  增加小圆点符号来帮助识别每个项目,但是一些浏览器会在缺失父级标签

  时可能不显示小圆点符号
  没有放在
  中,缺少闭合标签意味着难于加上样式
  不标准 方法C:
  加上了闭合标签后就不需要
  标签了
  省略了
  元素使得我们难于为这个清单添加特定的样式
  不标准 方法D:
  符合标准!
  使文档语义化,结构性
  大多数浏览器都会在每个项目左边显示小圆点符号
  在大多数浏览器上都会在换行后行内缩进
  很容易就可以定义特定的css样式
  正如你所见,你可以从一个看起来很简单的问题上获得不少知识.就算是你已经在你所有的页面上都是用了方法D,还是可以你为什么这样做比较好,我们会在这本书里一直探索"为什么"的问题,让你在各种情况下选用最恰当的方法.  

  ---

  技巧延伸
  让我们利用我们构造出来的食品清单来试看看几种用定义css样式的方法,我们将抛开预设样式,加入自定义的圆点符号,接着把它转成横向,把它变作一个导航条.
  扔掉圆点
  "我真的不喜欢食品清单里的那些个小圆点,我想我还是用回
  吧."
  不需要回到老习惯 — 我们仍然可以使用我们结构化的无序清单,然后使用css关闭掉小圆点符号和行内缩进,关键在于我们保留了清单的结构,然后以css具体的呈现出来.
  首先,加上一段去掉圆点符号的css规则:
  ul{
  list-style:none;
  }
  显示的结果见图1 - 4
  

  图 1 - 4 去掉小圆点符号
  接着我们来去掉行内缩进,根据预设值,所有无序清单左边都会留有一些内补丁(padding),但是不用担心,我们可以随心所欲的裁掉:
  ul{
  list-style:none;
  padding-left:0;
  }
  显示结果可见图1 - 5
  

  图 1 - 5
  虽然图 1 - 5 看起来和使用了几个
  标签的效果几乎一样,但是它还是符合标准的,结构化的无序列表 — 不管什么浏览器,设备都能正常显示,如果必要的话只需要更新几条css规则就能换上不同的样式了. 

  ---

  使用自定义圆点符号来完成自己的想象
  或许你想要在清单里保留小圆点符号,但是不想用浏览器无趣的默认设置,更像用自己的小圆点图案.有两种方法可以达成你想要的 — 而我更推崇第二种方法,因为它可以在各种浏览器之间更好的兼容.
  第一种方法是用 list-style-image 属性来指定用来替代默认小圆点的图片名称.
  ul{
  list-style-image:url(i_hot.gif)
  }
  这是最简单的方法,但是它会在不同浏览器之间的图片垂直对齐位置上有所不同,有些浏览器会把图片和项目文字中线对齐,也有的会把图片放得稍微高一点,它们之间有一点不一致.
  为了避免 list-style-image 造成的几个流行浏览器之间的对齐问题,我比较喜欢用一种替代方法:把图片作为每个

  • 元素的背景.
    首先,我们要去掉默认的圆点,然后再加上我们自己的背景图片:
    ul{
    list-style:none;
    }
    li{
    background-image:url(i_hot.gif) no-repeat 0 50%;
    padding-left:25px;
    }
    no-repeat 会告诉浏览器不把背景图片进行平铺操作(默认会平铺),而0 50%会告诉浏览器把背景图片放置在距离左边 0 像素,距离上面 50% 的地方,让背景图片 i_hot.gif 根据中线对齐.我们也可以用精确的像素来指定位置,比如说 0 6px 会让图片放置在距离左边0像素,距离上面 6 像素的位置上.
    我们还要在清单项目的左边加上17像素的内补丁(padding),以便我们把宽20像素高11像素的图片能够完整显示出来,同时又留有一点空白,而不会和文字有重叠.这些数据应该根据你所使用的图片尺寸进行调整

    ---

    导航清单
    在我的个人网站里我分享了几种将无序清单转化为水平导航条的方法,用普通的,结构化的XHTML就像我们的食品清单示例那样创造一个类似分页标签(Tab)的效果.
    我们把那个食品清单转换成一个网上超市的导航条(这个超市只卖几种东西就是了...).
    我们想要这个导航条以水平的方式呈现,并且能够在鼠标划过,选中时有某种强调显示,以便我们模拟分页标签的效果.
    首先,我们为清单加上一个id,这样我们就可以为它单独定义css样式了,同时我们也将把每个食品项目转成链接.
    

    
    
    • Apples
    
    
    • Spaghetti
    
    
    • Green Beans
    
    
    • Milk
    
    
    
    现在,开始加上一些辅助的css:
    #minitabs{
    margin:0;
    padding:0 0 20px 10px;
    border-bottom:1px solid #696;
    }
    #minitabs li{
    margin:0;
    padding:0;
    display:inline;
    list-style:none;
    }
    在这里我们已经完成了去掉默认圆点符号和行内缩进的工作,我们也把 display设置成inline,往垂直清单转化成水平清单迈出了第一步,同时我们也加上了底部边框以便区分出整个链接组.
    把清单转化成水平导航条的第二步,是将我们的链接全部浮动到左边显示,我们同样为所有的超链接加上简单的样式:定义外边距和内补丁的大小:
    #minitabs {
    margin: 0;
    padding: 0 0 20px 10px;
    border-bottom: 1px solid #696;
    }
    #minitabs li {
    margin: 0;
    padding: 0;
    display: inline;
    list-style-type: none;
    }
    #minitabs a {
    float: left;
    line-height: 14px;
    font-weight: bold;
    margin: 0 10px 4px 10px;
    text-decoration: none;
    color: #9c9;
    }
    在这里我们将清单中所有的元素都定义float:left,是为了让他们能水平显示排列于一行之内,同时我们也加上了了一些色彩,把链接改成粗体,拿掉了链接底部的下划线.
    然后,为鼠标滑过或选中的链接创建一个模拟分页标签的边线:
    #minitabs {
    margin: 0;
    padding: 0 0 20px 10px;
    border-bottom: 1px solid #696;
    }
    #minitabs li {
    margin: 0;
    padding: 0;
    display: inline;
    list-style-type: none;
    }
    #minitabs a {
    float: left;
    line-height: 14px;
    font-weight: bold;
    margin: 0 10px 4px 10px;
    text-decoration: none;
    color: #9c9;
    }
    #minitabs a.active, #minitabs a:hover {
    border-bottom: 4px solid #696;
    padding-bottom: 2px;
    color: #363;
    }
    #minitabs a:hover {
    color: #696;
    }
    为了强调链接,我们在鼠标划过或选中时增加一个4像素高的底边,我们也可以使选中的标签保持强调效果,只要加上class="active":
    
  • spaghetti
  
  这个 active类别与 a:hover的共用相同的css样式.(图 1 - 7)
  

  图1 - 7
  我在自己的网站以及2003年7月重构里面都用到了这个技巧.如果你需要更多的示例代码,可以自由访问这两个网站并查看他们的源代码.
  只需要加上一些内补丁和边框,就可以达到各种类似分页标签的效果了,到目前为止,我们甚至连一张图,一句javascript都没有使用,而仅仅只用到了基本的xhtml结构就构成了我们的食品清单,这实在是太棒了!
  迷你分页标签的外观
  如果你想要和平常的,方方正正的css边框不太一样的效果的话,只需要作出一点点小修改,我们就可以使用图片来创建有趣的导航条了.
  我们使用和之前完全一样的无序清单,以及十分类似的css:
  #minitabs {
  margin: 0;
  padding: 0 0 20px 10px;
  border-bottom: 1px solid #9FB1BC;
  }
  #minitabs li {
  margin: 0;
  padding: 0;
  display: inline;
  list-style-type: none;
  }
  #minitabs a {
  float: left;
  line-height: 14px;
  font-weight: bold;
  padding: 0 12px 6px 12px;
  text-decoration: none;
  color: #708491;
  }
  #minitabs a.active, #minitabs a:hover {
  color: #000;
  background: url(tab_pyra.gif) no-repeat bottom center;
  }
  这段css大概看起来和上一个示例中的几乎一样,最主要的区别在我们用 background-image 定义了在鼠标划过或选中的时候显示在链接底部中间的图片来代替了原本的4个像素高的底部边框.(图 1 - 8)
  

  图 1 - 8: 使用背景图的迷你分页标签导航
  这里的技巧在于选择一个足够窄的图片,必须能够塞进最短的导航条项目下,这样一来我们只需要一张图片来强调导航链接而不必为各种不同宽度准备不同的图片,当然,在你自己的项目中,你可以选择各种图片使用(图 1 - 9):
  

  图 1 - 9: 使用其他图片的例子