中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

　　先來(lái)分析一下這個(gè)導(dǎo)航欄要用到多少個(gè)盒子，在分析之前我們還是要形成一種思想：盡量減少和優(yōu)化XHTML代碼，讓他們基本上都有語(yǔ)義。這個(gè)導(dǎo)航欄最少的盒子實(shí)現(xiàn)是：最外邊一個(gè)大盒子(ul)，這個(gè)盒子與1像素高的背景圖片等寬，里面又有五個(gè)小盒子(li)分別裝著每一個(gè)導(dǎo)航欄，這個(gè)盒子與“勾月”圖形等高，導(dǎo)航欄這個(gè)盒子里面又裝著一個(gè)稍小的盒子(a)，這個(gè)盒子又裝著一個(gè)黃色的修飾盒子(a的左邊框，這里勉強(qiáng)理解為盒子，因?yàn)樗�不像一般的邊框那么�?xì)，在網(wǎng)頁(yè)中看起來(lái)像個(gè)盒子)和一個(gè)有文字的鏈接盒子(a的內(nèi)容)。

網(wǎng)頁(yè)結(jié)構(gòu)代碼：

<ul id="nav">
    <li>
      <a href="#">徹底弄懂CSS盒子模式1</a>
    </li>
    
    <li>
      <a href="#">徹底弄懂CSS盒子模式2</a>
    </li>
    
    <li>
      <a href="#">徹底弄懂CSS盒子模式3</a>
    </li>
    
    <li>
      <a href="#">徹底弄懂CSS盒子模式4</a>
    </li>
    
    <li>
      <a href="#">徹底弄懂CSS盒子模式5</a>
    </li>
</ul>

1．現(xiàn)在正式開(kāi)始做，做之前初始化一下各簽標(biāo)的邊界和填充，這里用樣式：

* {
    margin: 0px;
    padding: 0px;
    }

2．組裝最外邊的大盒子ul，寬200px,高為自動(dòng)auto或者干脆不要，背景圖片為bj.jpg，背景縱向重復(fù)，用<ul id=”nav”>方式引用樣式，用到樣式：

#nav {
    background: url(bj.jpg) repeat-y;
    width: 200px;
    overflow: hidden;
}

3．組裝每條導(dǎo)航的盒子li，這個(gè)盒子與“勾月”圖形等高，并把“勾月”圖形以背景形式放在這個(gè)盒子的左邊，并用15px的填充把盒子內(nèi)容區(qū)塊推向正中合適位置（當(dāng)然你也可以考慮給子級(jí)a指定邊界屬性來(lái)實(shí)現(xiàn)），并讓這個(gè)盒子靠左邊對(duì)齊（因?yàn)檫@個(gè)盒子的寬度比外邊的大盒子小，如果相等則可以不用考慮對(duì)齊方式），這里用到樣式float的屬性，本人沒(méi)有寫入樣式中則取其默認(rèn)值，樣式代碼如下：

#nav li {
    background: url(lan.gif) no-repeat left center ;
    height: 35px;
    width: 190px;
    padding-top:15px;
}

#nav a {
    background: url(lanbj2.gif) no-repeat left center;
    text-decoration: none;
    height: 20px;
    width: 155px;
    display: block;
    float: right;
    padding: 0px 0px 0px 5px;
    font-weight: bold;
    font-size: 9pt;
    line-height: 20px;
    color: #630;
}

#nav a {
    border-left:10px solid #f90;
}

6．最后簡(jiǎn)單為鼠標(biāo)移到鏈接上時(shí)，鏈接風(fēng)格的改變指定一個(gè)樣式：

#nav a:hover {
    background-image: url(lanbj3.gif);
    color: #FFFFFF;
}

至此完成樣式代碼編寫，上面已給出內(nèi)容部分的結(jié)構(gòu)代碼，把它們結(jié)合到網(wǎng)頁(yè)中就算是完成本次導(dǎo)航欄的制作。再次感謝本專欄斑竹blankzheng指點(diǎn)優(yōu)化。

源文件打包下載  xhtml.rar

經(jīng)典論壇討論
http://bbs.blueidea.com/thread-2731165-1-1.html

本文鏈接：http://m.95time.cn/tech/web/2007/4563.asp　

出處：藍(lán)色理想
責(zé)任編輯：feng4ever

上一頁(yè) 導(dǎo)航欄實(shí)例詳解 [1] 下一頁(yè)

◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論