用CSS写一个简单的网页导航栏

稍微学了点css的知识，动动手写一个简单的网页导航栏。

京东网站的导航栏

按照结构和样式分离的方法，我先用无序列表把结构先做出来

目前的代码
是这个样子的

然后需要给它添加一些css样式

1.去掉列前面的点

2.列表横向排列

3.去掉下划线

添加部分样式 现在的样子

添加了一些样式，用通用选择器去掉了默认样式，li的float属性使列表横向显示了。

但是还是没有达到效果

接下来，我再添加一些属性来完成一些效果

1.每一个列设置外边距和内边距，让它分隔开

2.设置行高和字体大小

3.设置背景颜色和字体颜色

简单地添加一些代码 现在的效果

为了显示得明显一些，我把背景颜色和字体都做成和京东不一样的颜色

好像还是缺点什么

加个下划线<hr>怎么样

下划线的样式 感觉差不多了

添加一下鼠标划过时的交互吧

发现这样会造成一些问题

如果鼠标只放在li上，而没有放在字上的话，字就不会变白，还是红色

这里把li的margin和padding还有background-color属性放在a上

然后修改一下a被鼠标滑过时的背景颜色

全部样式 最后的效果

这样鼠标只要划过黄色的区域，背景和字体颜色的效果就会生效