css背景综合案例：（五彩导航） |
您所在的位置：网站首页 › 五彩导航栏HTML › css背景综合案例：（五彩导航） |
css背景综合案例：（五彩导航）
|
练习价值: 1.链接属于行内元素但是此时需要宽度高度,因此需要模式转换 2.里面文字需要水平居中和垂直居中.因此需要单行文字垂直居中的代码. 3.链接里面需要设置背景图片.因此需要用到背景的相关属性设置. 4.鼠标经过变化背景图片,因此需要用到链接伪类选择器. 五彩导航 .nav a { display: inline-block; width: 132px; height: 85px; background-color: PINK; text-align: center; line-height: 80px; color: #fff; text-decoration: none; } .nav .bg1 { background: url(../css第一天/images/bg1.png) no-repeat; } .nav .bg2 { background: url(../css第一天/images/bg2.png) no-repeat; } .nav .bg3 { background: url(../css第一天/images/bg3.png) no-repeat; } .nav .bg4 { background: url(../css第一天/images/bg4.png) no-repeat; } .nav .bg5 { background: url(../css第一天/images/bg5.png) no-repeat; } .nav .bg1:hover { background: url(../css第一天/images/bg2.png) rgba(0, 0, 0, 0.3); } .nav .bg2:hover { background: url(../css第一天/images/bg3.png) rgba(0, 0, 0, 0.3); } .nav .bg3:hover { background: url(../css第一天/images/bg4.png) rgba(0, 0, 0, 0.3); } .nav .bg4:hover { background: url(../css第一天/images/bg5.png) rgba(0, 0, 0, 0.3); } .nav .bg5:hover { background: url(../css第一天/images/bg6.png) rgba(0, 0, 0, 0.3); } 五彩导航 五彩导航 五彩导航 五彩导航 五彩导航
|
【本文地址】