彩虹导航栏与hover的用法"/>
CSS利用background设计彩虹导航栏与hover的用法
五彩导航栏制作：
项目需要的文件：十张背景图片
要求：
- 设计五个五彩导航；
- 利用到background的知识
- 利用hover伪元素达到切换背景的效果；
创建根目录:
准备十张图片：在这里就不放入那么多了；
HTML结构：
// 利用五个a超链接
<body><a href="#" class="one">五彩导航</a><a href="#" class="two">五彩导航</a><a href="#" class="three">五彩导航</a><a href="#" class="four">五彩导航</a><a href="#" class="five">五彩导航</a>
</body>
CSS样式：
a {display: inline-block; // 将元素转化为行内块width: 120px;height: 58px;color: antiquewhite;background-color: rebeccapurple; // 将背景颜色设置一下因为文字是透明色 ，如果不设置就看不到文字了，后期背景图图片插入以后可以再把这个元素注释掉就行，当然也可以不注释，原因是：背景图片的层级比背景颜色层级高。会盖住背景颜色；text-decoration: none; // 去除超链接的下划线line-height: 54px;text-align: center;
}.one {background: antiquewhite url(../images/bg1.png) no-repeat; // 插入第一个超链接一个背景图片，并且背景不重复。
}.one:hover {background-image: url(../images/bg11.png); // 鼠标移入超链接a，会显示另外一张图片；
}.two {background: antiquewhite url(../images/bg2.png) no-repeat;
}.two:hover {background-image: url(../images/bg22.png);
}.three {background: antiquewhite url(../images/bg3.jpg) no-repeat;
}.three:hover {background-image: url(../images/bg3.png);
}.four {background: antiquewhite url(../images/bg4.png) no-repeat;
}.four:hover {background-image: url(../images/bg2.png);
}.five {background: antiquewhite url(../images/bg5.png) no-repeat;
}.five:hover {background-image: url(../images/bg11.png);
}
总结：以上就是五彩导航栏的制作。利用到了行内块的性质，background的相关属性，以及hover的相关用法；
积小流，汇江河，脚踏实地加油干。一只自学前端的兔子。
更多推荐
CSS利用background设计彩虹导航栏与hover的用法
发布评论