使用CSS設計了一個導覽列（仿康盛創想）

 

在學了亞當幾個執行個體教程後，所以想做一個導覽列，無意間開啟了康盛創想網站，覺得這個導覽列不錯，決定就做這個了，我的做法又以下幾點：

1、先是看了看他的導覽列；

2、我喜歡在Fireworks中設計圖片，PS不太懂，所以選擇在這個軟體中先把這個設計出來

（在Fireworks設計出來的一）

3、現在就是建立XHTML頁面的時候了，我選擇Dreamweaver cs3,建立一個過渡性的XHTML頁面

4、HTML代碼如下：

 

Code
<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代碼：

Code
<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中切圖出來的