使用CSS设计了一个导航栏（仿康盛创想）

 

在学了亚当几个实例教程后，所以想做一个导航栏，无意间打开了康盛创想网站，觉得这个导航栏不错，决定就做这个了，我的做法又以下几点：

1、先是看了看他的导航栏；

2、我喜欢在Fireworks中设计图片，PS不太懂，所以选择在这个软件中先把这个效果图设计出来

（在Fireworks设计出来的效果图一）

3、现在就是建立XHTML页面的时候了，我选择Dreamweaver cs3,创建一个过渡性的XHTML页面

4、HTML代码如下：

 

<div id="nav">
  <ul>
    <li><a id="home" class="here" href="#"><span>首页</span></a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">下载</a></li>
    <li><a href="#">帮助</a></li>
    <li><a href="#">公司</a></li>
    <li><a href="#">购买</a></li>
    <li><a id="idc" href="#">虚拟主机</a></li>
  </ul>
</div>

 

5、下面是CSS代码：

<style type="text/css">
* {
    margin:0;
    padding:0;
}
body {
    font-family:Verdana, Arial, Helvetica, sans-serif,"宋体";
    font-size:12px;
    margin:100px;
}
li { list-style:none;}
#nav {
    margin:0 auto;
    list-style:none;
    height:33px;
    position:relative;
    white-space:nowrap;
    width:800px;
    z-index:1;
    background: url(navbg.png) repeat-x;
}
#nav li {
    float:left;
    background:url(navbgbtnhot.png) right no-repeat;
}
#nav li a {
    font-weight:bold;
    padding:9px 28px;
    color:#fff;
    text-decoration:none;
    display:block;
}
#nav li a.here{
    margin-top:1px;
    background: url(navbgleft2.png) no-repeat left;
}
#nav li a:hover{
    background: url(navbgbtn.png) no-repeat left;
    color:#000000;
}
#nav li a#home, #nav li a#home.here{
    color:#fff;
    background: url(navbgleft2.png) no-repeat left top;
    margin:0;
}
#nav li a#home:hover, #nav li a#home.here:hover {
    color:#000;
    background: url(navbgleft.png) no-repeat left top;
    margin-top:1px;
}
#nav li a#idc {
padding:9px 15px;
}
</style>

 

其中用到得图片都是在Fireworks中切图出来的