稍微學(xué)了點css的知識缓熟，動動手寫一個簡單的網(wǎng)頁導(dǎo)航欄。
京東網(wǎng)站的導(dǎo)航欄
按照結(jié)構(gòu)和樣式分離的方法透乾，我先用無序列表把結(jié)構(gòu)先做出來
目前的代碼
是這個樣子的
然后需要給它添加一些css樣式
1.去掉列前面的點
2.列表橫向排列
3.去掉下劃線
添加部分樣式
現(xiàn)在的樣子
添加了一些樣式效五，用通用選擇器去掉了默認(rèn)樣式，li的float屬性使列表橫向顯示了囊颅。
但是還是沒有達(dá)到效果
接下來当悔，我再添加一些屬性來完成一些效果
1.每一個列設(shè)置外邊距和內(nèi)邊距，讓它分隔開
2.設(shè)置行高和字體大小
3.設(shè)置背景顏色和字體顏色
簡單地添加一些代碼
現(xiàn)在的效果
為了顯示得明顯一些踢代，我把背景顏色和字體都做成和京東不一樣的顏色
好像還是缺點什么
加個下劃線<hr>怎么樣
下劃線的樣式
感覺差不多了
添加一下鼠標(biāo)劃過時的交互吧
發(fā)現(xiàn)這樣會造成一些問題
如果鼠標(biāo)只放在li上盲憎，而沒有放在字上的話，字就不會變白胳挎，還是紅色
這里把li的margin和padding還有background-color屬性放在a上
然后修改一下a被鼠標(biāo)滑過時的背景顏色
全部樣式
最后的效果
這樣鼠標(biāo)只要劃過黃色的區(qū)域饼疙，背景和字體顏色的效果就會生效
