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

2012-09-13 11:28:16编辑: zhaozhishi
| 

将找知识原来的头部导航代码用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中的代码:

<ul class="nav">
 <li><a href="/" >首页</a>|</li>
 <li><a href="/edu/" >教育科学</a>|</li>
 <li><a href="/pc/" >电脑网络</a>|</li>
 <li><a href="/life/" >生活指南</a>|</li>
 <li><a href="/business/" >商业经济</a>|</li>
 <li><a href="/art/" >文娱体艺</a>|</li>
 <li><a href="/zhengzhi/" >政治军事</a>|</li>
 <li><a href="/zonghe/" >其它及综合</a>|</li>
 <li><a href="/xinxi/" >分类信息</a>|</li></ul>
 



热点:保健

除非特别注明,所有文章由找知识百科和信息网 www.zhaozhishi.com 原创,可转载,必须注明去处,否则可能追究侵权责任。
本文关键字: DIV+CSS,头部导航