综合案例，五彩导航
综合案例，五彩导航
, p127的案例。
练习价值：
对 inline element ⾏内元素 的模式转换
利⽤ line-height: content-height; 实现⽂字的垂直居中
背景图⽚相关定义
伪类选择器的使⽤
关于背景图⽚：
了⼀圈没到直接下载的，所以⽤的背景是⾃⼰⽤ CSS 写的，然后再截图的。CSS 代码如下：
.bg{
/
* ⾼度和宽度是根据习题配的 */
width: 120px;
height: 58px;
/* 单位可以⽤ px 代替，反正到⼀个看的舒服的点就⾏了 */
/* 这⾏ CSS 会产⽣圆边的效果 */
border-radius: 0.6rem;
/* 颜⾊这⾥可以任意替换 */
background: black;
}
下⾯的⼩尖尖没做，尖尖主要影响的是 light-height 的设置，所以就……偷了⼀下懒。
也可以⾃取，反正做了也是做了（趴）：
HTML 代码
<div class="nav">
<!-- 下⾯的代码重复多遍就⾏了，要把 class 改掉 -->
<a href="#" class="bg1">五彩导航栏</a>
</div>
CSS 代码
.nav a{
/* 进⾏类型转换，使得⾼度宽度的设置能对 a标签的影响⽣效 */ display: inline-block;
width: 120px;
height: 58px;
text-align: center;
/* 当⾏⾼与盒⼦占位空间⼀致时，可以实现⽂字的垂直居中 */ line-height: 58px;
color: #fff;
text-decoration: none;css设置文字垂直居中
}
/
* 利⽤图⽚做背景，以及伪类更换背景 */
.nav .bg1{
background:url("./img/bg1.png");
}
.nav .bg1:hover{
background:url("./img/bg2.png");
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。