|
1.徹底弄懂CSS盒子模式一(DIV布局快速入門) 【論壇討論】
3.徹底弄懂CSS盒子模式三(浮動(dòng)的表演和清除的自述) 【論壇討論】
4.徹底弄懂CSS盒子模式四(絕對(duì)定位和相對(duì)定位) 【論壇討論】
5.徹底弄懂CSS盒子模式五(定位強(qiáng)化練習(xí)) 【論壇討論】
作者：唐國(guó)輝
實(shí)現(xiàn)原理動(dòng)畫演示：http://www.95time.cn/articleimg/2007/03/4563/cssNav.swf
自本人教程《徹底弄懂CSS盒子模式(DIV布局快速入門)》發(fā)表以來(lái)，一直獲得各位網(wǎng)友的好評(píng)與支持，今天應(yīng)各位網(wǎng)友的要求，也為了答謝各位網(wǎng)友的支持，本人將推出續(xù)篇教程，以加深各位網(wǎng)友對(duì)CSS盒子模式的理解。此教程面向讀者還是DIV排版入門者，如果你是高手，那就不要浪費(fèi)自己時(shí)間了。
本人這次將講解一個(gè)縱向CSS導(dǎo)航欄實(shí)例的制作，在講解過(guò)程中將會(huì)延用之前發(fā)表教程所講到的“盒子”概念，如果你沒(méi)有看過(guò)本人之前的那篇教程，又或者你還不理解什么是“盒子”這一概念，請(qǐng)先通過(guò)下面的兩個(gè)鏈接閱讀本人之前發(fā)表的教程，看完之后再回來(lái)看此教程，如有不便敬請(qǐng)?jiān)彙?br>
1．徹底弄懂CSS盒子模式(DIV布局快速入門)
2．徹底弄懂CSS盒子模式(DIV布局快速入門)
用CSS做導(dǎo)航欄也是輕而易舉的事情，在本人之前發(fā)表的教程中其實(shí)也有一個(gè)簡(jiǎn)單的橫向?qū)Ш綑谥谱�，那時(shí)只給出了樣式代碼并沒(méi)有作太多的解釋，這次要做一個(gè)相對(duì)復(fù)雜點(diǎn)的導(dǎo)航欄，為了加深大家對(duì)CSS盒子模式的理解，特別選做一個(gè)有多個(gè)盒子嵌套實(shí)現(xiàn)的導(dǎo)航欄。
先看實(shí)現(xiàn)原理動(dòng)畫演示：
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
現(xiàn)在再看結(jié)果圖：
這個(gè)導(dǎo)航欄中的鏈接用到了背景圖片的切換效果，鼠標(biāo)移到鏈接上導(dǎo)航欄背景圖片和文字顏色都會(huì)跟著改變，整個(gè)導(dǎo)航用到下列4幅圖片素材：
即鏈接不同狀態(tài)的兩張背景圖片，每條導(dǎo)航左邊的“勾月”圖形，最外邊大盒子1像素高的背景圖片。
看了動(dòng)畫演示和結(jié)果圖，也了解了用到那些素材，現(xiàn)在就請(qǐng)你帶著一股好奇和我一起來(lái)完成這個(gè)導(dǎo)航欄吧，當(dāng)做完這個(gè)導(dǎo)航欄之后你會(huì)發(fā)現(xiàn)原來(lái)DIV排版那么簡(jiǎn)單。愿你更有信心學(xué)好DIV排版！
經(jīng)典論壇討論
http://bbs.blueidea.com/thread-2731165-1-1.html
出處：藍(lán)色理想
責(zé)任編輯：feng4ever
上一頁(yè) 下一頁(yè) 導(dǎo)航欄實(shí)例詳解 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁(yè) 導(dǎo)航欄實(shí)例詳解 [1]
第 2 頁(yè) 
