CSS篇十四

一、CSS背景综合案例

1. 练习内容

案例：五彩导航

在这里插入图片描述
练习价值：
1.链接属于行内元素，但是此时需要宽度高度，故需要转换模式
2.里面的文字需要水平居中和垂直居中，需要单行文字垂直居中代码
3.链接里面需要设置背景图片，需要用到背景的相关属性设置
4.鼠标经过变化背景图片，需要用到链接伪类选择器

2.实现过程及结果

HTML代码：

<!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>五彩导航</title>
    <link rel="stylesheet" href="style.css">
</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>

CSS代码：

.nav a {
    display: inline-block;
    width: 120px;
    height: 58px;
    line-height: 48px;
    background-color: steelblue;
    text-align: center;
    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/bg1.png);
}

.nav .bg4 {
    background: url(images/bg4.png) no-repeat;
}

.nav .bg4:hover {
    background-image: url(images/bg2.png);
}

.nav .bg5 {
    background: url(images/bg5.png) no-repeat;
}

.nav .bg5:hover {
    background-image: url(images/bg3.png);
}

目录

一、CSS背景综合案例

1. 练习内容

2.实现过程及结果

猜你喜欢