今天講一下關于下拉菜單的制作,這些作業都是老師在平時課堂上交待我們完成的練習或是晚自習作業。
效果圖如下: 紅色框里面的內容是鼠標經過菜單顯示在下方
這個作業我也看了其他同學的做法,大概就是2種:
第一種是先做上面的3個菜單項,再制作下面的二級列表(大多數)
第二種是直接做一列出來(菜單+列表) 其余的兩列就復制過去
我是按第一種完成的
上方的3個菜單 在設置好背景 寬度 高度等相關的樣式之后 只需要一個left就完成了
紅色方框的設置:
下方ul里面的設置:
這樣一個下拉菜單列表就完成了。
還有一點就是 老師要求我們在打代碼之前 一開始都要把默認的樣式打好
就是這些:
<style> | |
*{ | |
padding: 0; | |
margin: 0; | |
list-style: none; | |
text-decoration:none; | |
} |
這就需要我們靈活 學會思考!
新聞熱點
疑難解答