DIV+CSS实例：简化和重写头部导航代码

将找知识原来的头部导航代码用DIV+CSS样式重写，下面是原来的代码：

<TABLE style="BORDER-RIGHT: #4c93bc 1px solid; BORDER-TOP: #4c93bc 1px solid; BORDER-LEFT: #4c93bc 1px solid; BORDER-BOTTOM: #4c93bc 1px solid" cellSpacing=0 cellPadding=0 width=831 align=center bgColor=1F80CB>
  <TBODY>
    <TR>
      <TD width="767" height=24 align=left style="PADDING-LEFT: 20px"><FONT
      color="#ffffff"><a href="[!--news.url--]"><FONT color="#ffffff">首页</font></a>&nbsp;|&nbsp;<A style="FONT-SIZE: 14px; COLOR: #ffffff" href="[!--news.url--]edu/">教育科学</A>&nbsp;|&nbsp;<A style="FONT-SIZE: 14px; COLOR: #ffffff" href="[!--news.url--]pc/">电脑网络</A>&nbsp;|&nbsp;<A style="FONT-SIZE: 14px; COLOR: #ffffff" href="[!--news.url--]life/">生活指南</A>&nbsp;|&nbsp;<A style="FONT-SIZE: 14px; COLOR: #ffffff" href="[!--news.url--]business/">商业经济</A>&nbsp;|&nbsp;<A style="FONT-SIZE: 14px; COLOR: #ffffff" href="[!--news.url--]art/">文娱体艺</A>&nbsp;|&nbsp;<A style="FONT-SIZE: 14px; COLOR: #ffffff" href="[!--news.url--]zhengzhi/">政治军事</A>&nbsp;|&nbsp;<A style="FONT-SIZE: 14px; COLOR: #ffffff" href="[!--news.url--]zonghe/">其它及综合</A>&nbsp;|&nbsp;<A style="FONT-SIZE: 14px; COLOR: #ffffff" href="[!--news.url--]xinxi/">分类信息</A>&nbsp;|&nbsp;<A style="FONT-SIZE: 14px; COLOR: #ffffff" href="http://chexian.zhaozhishi.com/"  target=_blank>车险</A></TD>
      <TD width="38" align=right></TD>
    </TR>
  </TBODY>
</TABLE>

css代码如下：
<style type="text/css">
  *{ margin:0; padding:0;}
  li{ list-style:none;}
  .nav{ width:787px; margin:0 auto; padding:0 20px; border:1px solid #4c93bc; background-color:#1F80CB; overflow:hidden; }
  .nav li{ float:left; height:24px; line-height:24px; font-size:15px; color:#fff;}
  .nav li a{ color:#fff; margin:0 15px 0 14px;} /*这里可以修改为.nav li a{ color:#fff; margin:0 10px;} ，改10这个数字调整导航文字的间距 */
  </style>

HTML中的代码：