如果能夠做到每天理解并掌握一個(gè)概念,那么每一個(gè)新的一天,你都是更好的自己。
開(kāi)門見(jiàn)山,先來(lái)看一下今天要實(shí)現(xiàn)的效果:
當(dāng)鼠標(biāo)移到services標(biāo)簽上時(shí),會(huì)出現(xiàn)下拉框。
在動(dòng)手寫(xiě)代碼前,最好先分析下具體的需求。
根據(jù) 圖1 不難發(fā)現(xiàn),整個(gè)導(dǎo)航欄分為兩部分,如下圖
part 1 是導(dǎo)航的主體部分,part 2 是下拉菜單部分。之所以把整個(gè)導(dǎo)航欄分成2個(gè)part是因?yàn)槲覀€(gè)人習(xí)慣把大問(wèn)題打散分成多個(gè)小問(wèn)題,然后逐個(gè)擊破。我覺(jué)得這是一個(gè)很好的思考習(xí)慣,因?yàn)樾?wèn)題往往比較好解決,而大問(wèn)題往往比較宏觀,難以把控。
撇開(kāi)part 2,我們先來(lái)實(shí)現(xiàn)part 1。
根據(jù)經(jīng)驗(yàn),我們可以很容易的實(shí)現(xiàn)part 1,其實(shí)它就是一個(gè)簡(jiǎn)單的ul。
下面直接上代碼截圖:
在上面的實(shí)現(xiàn)中,關(guān)鍵知識(shí)點(diǎn)涉及到了浮動(dòng)和浮動(dòng)的原理。對(duì)這一塊不是很熟悉的童鞋可以參考張?chǎng)涡翊笊竦奈恼?a target="_blank" rel="nofollow">《CSS float浮動(dòng)的深入研究、詳解及拓展》。
part 1 實(shí)現(xiàn)以后,我們來(lái)想想怎么實(shí)現(xiàn)part 2。仔細(xì)觀察 圖1 可以發(fā)現(xiàn),services 標(biāo)簽下的下拉菜單應(yīng)該是和 services 同級(jí)的 ul 標(biāo)簽,我們先來(lái)試試把 ul 加上去以后的效果。代碼更新如下圖
運(yùn)行一下觀察變化
接著,為子菜單添加一點(diǎn)樣式
效果如下
從 圖7 可以看到,圖1 中的需求已經(jīng)初具雛形了。現(xiàn)在的問(wèn)題就很簡(jiǎn)單了,怎么讓子菜單在鼠標(biāo)未移入 services 標(biāo)簽時(shí)消失,并在鼠標(biāo)移入 services 標(biāo)簽時(shí)顯示呢?這里,我們將用到絕對(duì)定位和hover偽類。
具體請(qǐng)看下面代碼,非常好理解。
至此,一個(gè)簡(jiǎn)單的導(dǎo)航欄以及下拉菜單就實(shí)現(xiàn)了。
第一次寫(xiě)技術(shù)博客,感覺(jué)還有好多不足,這個(gè)簡(jiǎn)單的例子也是我自己嘗試盲寫(xiě)了好多次才真正實(shí)現(xiàn)的。在實(shí)現(xiàn)的過(guò)程中,逐步逐步的對(duì)其中涉及的一些概念慢慢的有了一點(diǎn)感覺(jué),但肯定還有許多不足。這僅是css之路的第一步,后面還有很長(zhǎng)的路要走,希望自己可以堅(jiān)持。相比于js,我更喜歡研究css,因?yàn)槲矣X(jué)得css更有趣。你碼的每一行代碼都有可能產(chǎn)生不同的效果,并且當(dāng)你看到一個(gè)十分酷炫的效果,慢慢的分析加實(shí)現(xiàn)的過(guò)程是非常能夠讓我產(chǎn)生滿足感的。雖然我現(xiàn)在還僅僅處在依葫蘆畫(huà)瓢的階段,但是我相信,只要能堅(jiān)持下去,肯定會(huì)成為所謂的“大神的”,加油。
參考書(shū)籍:
《精通CSS 第二版》