花了乙個月左右的時間，學完了html5和css的基礎知識，主要通過w3school、菜鳥教程和網易雲課堂的網課。學習過程中csdn的很多部落格給了我幫助和啟發，效果要比生硬的教程好得多。因此，開始實戰練習的過程中，把每個案例的實現及其思路記錄在這裡，作為總結。
主要用於**首頁導航欄的常用下拉列表
1、div盒子模型作為容器，下拉列表整體為乙個div，下拉列表內容作為乙個巢狀div。
2、構建兩個類，乙個為dropdown下拉列表（導航一級選單），乙個為dropdown-content下拉內容（下拉子選單）。
3、下拉內容部分display進行隱藏。
4、運用錨偽類hover，滑鼠懸停一級選單時改變背景顏色和塊狀元素顯示，來實現選單下拉。滑鼠懸停下拉列表內容鏈結時，改變背景顏色，實現切換選單的效果。
**實現：
"dropdown">
簡介"dropdown-content">
"">140
"">160
"">180
1.塊狀元素內文字垂直居中：設定line-height等於height
2.下拉列表每個鏈結的block大小與一級選單保持一致：設定min-width與一級選單一致，設定height等於一級選單height*下拉子選單鏈結個數。
CSS下拉列表
谷歌效果圖 ie效果圖 凱明科技 div div class dropdown content a href 凱明科技資訊 1凱明科技資訊 1 a a href 凱明科技資訊 2 a a href 凱明科技資訊 3 a div div div class dropdown div class dro...
CSS下拉列表
例子 下拉列表 選單內容 1 選單內容 2 選單內容 3 html 部分 製作下拉列表可以使用任何的 html元素來開啟下拉列表，如 或 元素。使用容器元素 如 來建立下拉列表的內容，並放在任何你想放的位置上。使用 元素來包裹這些元素，並使用 css 來設定下拉內容的樣式。css 部分 dropdo...
CSS 下拉列表
使用 css 建立乙個滑鼠移動上去後顯示下拉列表的效果。當滑鼠移動到指定元素上時，會出現下拉列表。dropdown dropdown content.dropdown hover.dropdown content style mycode3 mycode3type html 滑鼠移動到我這！span...