web前端入門到實戰 CSS多級選單

2021-09-26 04:05:49 字數 1705 閱讀 8166

這是乙個相當炫的功能，讓網頁看起來像桌面程式，如window的開始選單。實現原理基本和純css相簿差不多，但要注意的事項比較多，讓我們一步步來吧。

先來乙個非常簡單的一級選單與懸停效果。

結構很熟悉吧，就是把原來放的地方換成文字而已。我還特意標出來了。接著下來的表現層**非常簡單。

* 


.menu 


.menu li 


.menu a 


.menu a:hover 


.menu li span 


.menu a:hover span
這裡有兩個值得注意的地方。我們先說第乙個。子選單(span元素)的top應該能使其頂部停留在a元素的範圍內，如果包含塊是li元素，同理。當span的top值大於32px，如40px，我們就無法把滑鼠移到span元素上。因為離開了a:hover的作用範圍，span元素又重新隱藏。

對web前端這門技術感興趣的小夥伴可以加入到我們的學習圈來，正因為我不是211，985，只是個普通的本科生，英語不是特別好，數學不是特別好。所以我選擇了前端。工作第六個年頭了，我慶幸自己選擇了這條路。767-273-102 秋裙。在鵝廠做過，跟著創業頭子混過。想把自己的技術分享給大家，如果你還在迷茫，也希望能進我一些綿薄之力，幫助到你。都是一群有夢想的人，我們可能在不同的城市，但我們會一起結伴同行前端前端前端

.menu li span
第二個問題是ie6特有的，就是子選單在對應的包含塊mouseout後仍不消失的問題。hover偽類相當於moverover與moverout。我們在可以在mouseover給它的子孫元素認定一種樣式，mouseout時認定另一種。換言之，display現在在ie6無法切換（img元素除外）。解決方法用visibility 代替display。

好了，現在我們真正做二級選單，把有關span的css全刪掉，並在結構層原span的位置改為如下**：

我們在各遊覽器看一下，感覺非常乏力。ie6與opera10的二級選單項是垂直的，但我們並沒有清除浮動啊？firefox3.5與chrome與safari4的二級選單項是水平分布了，但上面好像多出乙個選單項……ie8同學這次反而是表現得最好的。我沒有裝ie7，所以一向忽略它。

我們重新設定一下樣式，如把包含塊改設在li元素上，讓二級選單項呈垂直顯示。

* 


.menu 


.menu li 


.menu a 


.menu a:hover 


/*新增的二級選單部分*/


.menu ul ul 


.menu ul a:hover ul


.menu ul ul li
發現二級選單在firefox與safari與chrome中沒有反應，彈不出來（這三個瀏覽器的css部分互相抄襲嚴重啊）。opera10表現得最好，ie8其次。不過，標準瀏覽器的所有元素都支援hover偽類，不像ie6，非帶href的a元素不可。我們改寫部分css**：

.menu ul li:hover ul,/*非ie6*/


.menu ul a:hover ul


選單二//***************略************


//***************略************

web前端入門到實戰 CSS盒子模型

頁面元素皆為框 盒子 定義了元素框處理元素內容，內邊距，外邊距以及邊框的計算方式。圍繞在元素邊框外的空白距離 元素與元素之間的距離 語法 margin，定義4個方向的外邊距 1 取值 以px為單位，佔父級元素寬度的 比 正數 margin left 元素向右移動，margin top元素向下移動 負...

web前端入門到實戰 css實現的骨架屏方案

通過偽元素實現骨架樣式，通過操作樣式實現骨架和頁面的動態切換 通過after偽元素生成骨架樣式，並通過absolute覆蓋到實際元素上 skt loading 下面這部分都是自定義的，看需求修改 not not round after not not before before badge keyf...

web前端入門到實戰 CSS三欄布局的5種方法詳解

題目 假設高度已知，請寫出三欄布局，其中左欄 右欄寬度各為300px，中間自適應.這是一道經典的面試題，下面記錄了css布局的5種方法。1.這是三欄布局的浮動解決方案 2.這是三欄布局的浮動解決方案 3.這是三欄布局的浮動解決方案 4.這是三欄布局的浮動解決方案 5.這是三欄布局的浮動解決方案 6....