用css制作简单的导航栏效果——悬停改变

此刻网页的做的越来越当作熟，各类结果让人目炫狼籍但一些根本的结果仍是不变的，所以小编分享一下本身若何做悬停结果的；（代码都放在图片上了，小编偷个懒只简单申明一下）

东西/原料

• 电脑
• Sublime Text

方式/步调

1. 1

   架构很简单就是 ul 里面有 li ；而每个 li 里面包含着 a 标签存放文字，一个 span；

   
2. 2

   起首是 ul 的节制，

   position，便利节制位置，和下体面元素的位置；

   border-bottom，节制下面的红色分界线；

   padding-left，padding-right节制摆布的内边距；

   
3. 3

   li的节制，

   float，节制悬浮变为一排；

   
4. 4

   a标签；

   text-decoration，节制a标签的默认下划线消逝；

   float，便利节制位置；

   padding，节制a标签的间距；

   
5. 5

   span的节制（就是 每个选项之间的距离线）

   borde-left，节制左侧的边框；

   height，节制高度；

   margin-top，节制位置；

   float，连结和其他元素的位置；

   
6. 6

   a：hover属性，就是悬停在 a标签上时触发的（具体的可以百度），

   color，节制触发时的颜色；

   background，添加图片，打消平铺，图片居中，节制位置；

   

注重事项

• 仅作分享；
• 细节很主要；