彩虹导航栏与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的用法
发布评论