使用CSS模仿一個京東菜單效果
Sublime編纂器
HTML+CSS方式/步調
- 1
編寫菜單所需要的HTML布局，代碼及預覽結果如下圖所示：
- 2
為菜單設置CSS全局樣式，對菜單的整體進行節制，代碼及預覽結果如下圖所示：
- 3
設置菜單的局部樣式，別離對容器container、 LOGO、菜單地點的塊進行節制，代碼和預覽結果如下圖所示：
- 4
設置每一個菜單項，并對包含在
- 內的子菜單進行節制，默認子菜單不顯示，代碼和結果如下圖所示：
- 5
這是最關頭的一步，利用動態偽類中的“:hover”當鼠標懸停到導航鏈接上時，響應的元素發生轉變，代碼及結果如下圖所示：
- 6
至此，所有的工作就全數完當作了，打開瀏覽器，將鼠標懸停到左側的導航上，右則將顯示出對應的內容。結果不錯吧？脫手嘗嘗吧！！
- 發表于 2019-08-10 18:07
- 閱讀 ( 682 )
- 分類：其他類型
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章