• 微信
您当前的位置：首页  > 文章 >  CSS导航条实例：悬浮背景色效果

CSS导航条实例：悬浮背景色效果

作者：admin 时间:2020-01-12 阅读数：176人

上一节站长地带详细介绍了如何制作导航条，本章我们继续多做几遍不同效果的导航条。

效果如下：

CSS导航条实例：悬浮背景色效果

可以看见鼠标放下去时，背景色变了。

HTML代码：

<div class="nav">
  <ul>
  <li><a href="http://www.zzarea.com">项目1</a></li>
  <li><a href="#">项目2</a></li>
  <li><a href="#">项目3</a></li>
  <li><a href="#">项目4</a></li>
  <li><a href="#">项目5</a></li>
  <li><a href="http://bbs.zzarea.com">项目6</a></li>
  <li><a href="#">项目7</a></li>
  </ul>
  </div>

CSS代码：

<style type="text/css">
  *{
  margin:0px;
  padding:0px;
  }
  body{
  font-size:14px;
  font-family:"微软雅黑";
  }
  .nav{
  width:1000px;
  margin:30px auto 0px auto;
  background-color:#0099FF;
  height:40px;
   
  }
  ul{
  list-style:none;
   
  }
  li{
  float:left;
  line-height:40px;
  width:100px;
  text-align:center;
   
  }
  li a{
  color:#FFFFFF;
  text-decoration:none;
  display:block; /*块状结构*/
  width:100px;
  height:40px;
   
   
  }
  li a:hover{
  background-color:#000000;
   
  }
   
  </style>

请注意红色地方，如果你直接在hover里写上背景颜色，只会把文字的背景变掉，而不会填充一定的宽高，所以直接用display:block 变成块状元素，再设置宽高，就搞定了。

 

声明

源码下载不顺利，比如源码在百度网盘的有时会被无故取消等，请联系QQ：46667551
本站大部分下载资源收集于网络，但除特别说明之外，基本全部亲自测试可用！
但由于某些源码的更新迭代,比如微信小程序官方接口的变动等原因,
如时间过长,可能会造成本可以使用的代码出现问题,下载前请斟酌!
本站资源仅供学习和交流使用，版权归原作者所有，请在下载后24小时之内自觉删除。
若作商业用途，请购买正版，由于未及时购买和付费发生的侵权行为，使用者自行承担，概与本站无关。

原文链接：https://www.love0312.com/999.html，转载请注明出处

上一篇:CSS博客实战4：博客左侧文章内容部分

下一篇:CSS清除浮动方式：clearfix

猜你喜欢