CSS综合案例——五彩导航条
案例效果如下：鼠标经过会变色
这个案例的练习价值:
- 链接属于行内元素, 但是此时需要宽度高度,因此需要模式转换。
- 里面文字需要水平居中和垂直居中. 因此需要单行文字垂直居中的代码。
- 链接里面需要设置背景图片.因此需要用到背景的相关属性设置。
- 鼠标经过变化背景图片,因此需要用到链接伪类选择器。
（若需要素材图片，请私聊我，我会马上发给你~）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav a {display: inline-block;width: 120px;height: 58px;background-color: pink;text-align: center;line-height: 48px;color: #fff;text-decoration: none;}.nav .bg1 {background: url(../images/bg1.png) no-repeat;}.nav .bg1:hover {background-image: url(../images/bg11.png);}.nav .bg2 {background: url(../images/bg2.png) no-repeat;}.nav .bg2:hover {background-image: url(../images/bg22.png);}.nav .bg3 {background: url(../images/bg3.png) no-repeat;}.nav .bg3:hover {background-image: url(../images/bg33.png);}.nav .bg4 {background: url(../images/bg4.png) no-repeat;}.nav .bg4:hover {background-image: url(../images/bg22.png);}.nav .bg5 {background: url(../images/bg5.png) no-repeat;}.nav .bg5:hover {background-image: url(../images/bg11.png);}</style>
</head><body><div class="nav"><a href="#" class="bg1">五彩导航条</a><a href="#" class="bg2">五彩导航条</a><a href="#" class="bg3">五彩导航条</a><a href="#" class="bg4">五彩导航条</a><a href="#" class="bg5">五彩导航条</a></div>
</body></html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！