稍微學了點css的知識，動動手寫一個簡單的網頁導航欄。

京東網站的導航欄

按照結構和樣式分離的方法，我先用無序列表把結構先做出來

目前的代碼

是這個樣子的

然后需要給它添加一些css樣式

1.去掉列前面的點

2.列表橫向排列

3.去掉下劃線

添加部分樣式

現在的樣子

添加了一些樣式，用通用選擇器去掉了默認樣式，li的float屬性使列表橫向顯示了。

但是還是沒有達到效果

接下來，我再添加一些屬性來完成一些效果

1.每一個列設置外邊距和內邊距，讓它分隔開

2.設置行高和字體大小

3.設置背景顏色和字體顏色

簡單地添加一些代碼

現在的效果

為了顯示得明顯一些，我把背景顏色和字體都做成和京東不一樣的顏色

好像還是缺點什么

加個下劃線<hr>怎么樣

下劃線的樣式

感覺差不多了

添加一下鼠標劃過時的交互吧

發現這樣會造成一些問題

如果鼠標只放在li上，而沒有放在字上的話，字就不會變白，還是紅色

這里把li的margin和padding還有background-color屬性放在a上

然后修改一下a被鼠標滑過時的背景顏色

全部樣式

最后的效果

這樣鼠標只要劃過黃色的區域，背景和字體顏色的效果就會生效