查看“导航条”的源代码


<ul class="nav">
    <li>首　　页</li>
    <li>关于我们</li>
    <li>产品展示</li>
    <li>售后服务</li>
    <li>联系我们</li>
</ul>
————————————————



    <ul>
      <li><a href="#" title="首页" target="_blank">首页</a></li>
      <li><a href="#" title="国内新闻" target="_blank">国内新闻</a></li>
      <li><a href="#" title="国外新闻" target="_blank">国外新闻</a></li>
      <li><a href="#" title="娱乐新闻" target="_blank">娱乐新闻</a></li>
      <li><a href="#" title="时事新闻" target="_blank">时事新闻</a></li>
      <li><a href="#" title="联系我们" target="_blank">联系我们</a></li>
    </ul>
 
————————————————

 

<div id="nav">

    <ul>

        <li>网站首页</li>

        <li>公司简介</li>

        <li>产品展示</li>

        <li>新闻动态</li>

        <li>企业文化</li>

        <li>招贤纳士</li>

        <li>联系我们</li>

        <li>来访路线</li>

        <li>收藏本站</li>   

</ul>   

</div>

<style type="text/css">

 

#nav ul {

Width:1000px;    

height:40px;      

margin:30px auto;

padding:0;

list-style:none; 

border-top:solid 5px #DAA520;    

border-bottom:solid 5px #DAA520; 

background:url(images/navig-bg.jpg)

}

 

#nav ul li {

width:100px;

float:left;

text-align:center;

font:16px/2.5 "microsoft yahei";

}

#nav ul li a {

color:#800080; text-decoration:none;

}

#nav ul li a:hover {

display:block; color:#FFFFFF; background:#DC143C;

}

 

</style>