css通用小笔记01——导航背景

很多刚接触前端的可能遇到一些css能解决的小问题,我现在总结了一些,将会逐渐和大家分享,先是导航的背景问题,在网页中常常看到,当鼠标放到一个导航按钮上面是,就会出现一些特效,比如背景,这是最常用的,我们就来解决一下,这是所有导航都能用到的方法,能够去一反三的方法。

html代码如下:

 1 <html>
.........
2 <body>
3 <div id="nav">
4 <ul>
5 <li><a href=""><strong><span>首页</span></strong></a></li>
6 <li><a href=""><strong><span>关于我们</span></strong></a></li>
7 <li><a href=""><strong><span>联系我们</span></strong></a></li>
8 <li><a href=""><strong><span>会员专区</span></strong></a></li>
9 </ul>
10 </div>
11 </body>
12 </html>

css代码如下:

1 #nav {width:300px;height:80px;padding_top:20px;margin:0 auto;}
2 #nav li{float:left;heigth60px;margin-left:10px;}
3 #nav a{float:left;heigth60px;line-height:60px;font......}//设置li的文本的高度,效果是居中;
4 #nav strong{float:left;height:60px;}
5 #nav span{float:left;height:60px;padding:0 14px;}//设置每个li的左右的宽度;
6 //把鼠标放到导航上的背景效果
7 #nav a:hover {background:url(.......) repeat-x;}//中间背景重复;
8 #nav a:hover strong{background:url(.......) no-repeat left;}//左边背景,不重复,放在左边;
9 #nav a:hover span{background:url(.......) no-repeat right;}//右边背景,不重复,放在右边;

上面需要修改的地方:

1.html文件中需要添加css文件导入;  2.css文件中路径需要改正,选中需要用到的图片。

这是我之前自己写的运行效果如图(上面的示例代码,不完全,不能运行):

当鼠标放在第二个导航按钮上时,就会出现圆角的一张背景图片,因为第一个”HOME“是设置了激活,所以一直处于有背景的状态:

css通用小笔记01——导航背景

上一篇:Docker 构建 redis 集群


下一篇:Java-----判断是否为基本类型