效果如下：
实现方法：利用一下两张图片：
前台代码：
<div id="nagivation">
<ul >
<li ><a href="mainbooks.aspx"><b>首页</b></a></li>
<li ><a href ="bookstoretop.aspx?topid=1"><b>文学</b></a></li>
<li ><a href ="bookstoretop.aspx?topid=2"><b>小说</b></a></li>
<li ><a href ="bookstoretop.aspx?topid=3"><b>艺术</b></a></li>
<li ><a href ="bookstoretop.aspx?topid=4"><b>管理</b></a></li>
<li ><a href ="bookstoretop.aspx?topid=5"><b>考试</b></a></li>
<li ><a href ="bookstoretop.aspx?topid=6"><b>工具书</b></a></li>
<li ><a href ="bookstoretop.aspx?topid=7"><b>科技</b></a></li>
</ul>
&
1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200*200=40, 000 次，占用资源。
2、无边框。推荐的写法是 border:none;，哈哈，我一直 ......
1.所有的标记都必须要有一个相应的结束标记
以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如:
<br />&l ......
