稍微学了点css的知识，动动手写一个简单的网页导航栏。
京东网站的导航栏
按照结构和样式分离的方法，我先用无序列表把结构先做出来
目前的代码
是这个样子的
然后需要给它添加一些css样式
1.去掉列前面的点
2.列表横向排列
3.去掉下划线
添加部分样式
现在的样子
添加了一些样式，用通用选择器去掉了默认样式，li的float属性使列表横向显示了。
但是还是没有达到效果
接下来，我再添加一些属性来完成一些效果
1.每一个列设置外边距和内边距，让它分隔开
2.设置行高和字体大小
3.设置背景颜色和字体颜色
简单地添加一些代码
现在的效果
为了显示得明显一些，我把背景颜色和字体都做成和京东不一样的颜色
好像还是缺点什么
加个下划线<hr>怎么样
下划线的样式
感觉差不多了
添加一下鼠标划过时的交互吧
发现这样会造成一些问题
如果鼠标只放在li上，而没有放在字上的话，字就不会变白，还是红色
这里把li的margin和padding还有background-color属性放在a上
然后修改一下a被鼠标滑过时的背景颜色
全部样式
最后的效果
这样鼠标只要划过黄色的区域，背景和字体颜色的效果就会生效
网友评论