基于CSS的五彩导航案例

最新推荐文章于 2024-01-18 01:01:46 发布

Mir ㅤ

最新推荐文章于 2024-01-18 01:01:46 发布

阅读量158

点赞数

文章标签： css html5 html vscode

本文链接：https://blog.csdn.net/weixin_45995139/article/details/120516332

版权

题目：鼠标经过五彩导航栏变换颜色。

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

<!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: lightgreen;
            text-align: center;
            line-height: 50px;
            color: #fff;
            text-decoration: none;
        }

        #bg1 {
            background: url(images/1.png) no-repeat;
        }

        #bg2 {
            background: url(images/2.png) no-repeat;
        }

        #bg3 {
            background: url(images/3.png) no-repeat;
        }

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



        #bg1:hover {
            background-image: url(images/-1.png);
        }

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

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

        #bg4:hover {
            background-image: url(images/-4.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" id="bg1">五彩导航</a>
        <a href="#" id="bg2">五彩导航</a>
        <a href="#" id="bg3">五彩导航</a>
        <a href="#" id="bg4">五彩导航</a>
    </div>
</body>

</html>

鼠标放在第二个导航栏：

Mir ㅤ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
基于CSS的五彩导航案例

题目：鼠标经过五彩导航栏变换颜色。练习价值： 1. 连接属于行内元素，但是此时需要宽度和高度，因此需要模式转换； 2. 里面文字需要水平居中和垂直居中，因此需要单行文字垂直居中代码； 3. 链接里面需要设置背景图片，因此需要用到背景的相关属性设置； 4. 鼠标经过变化背景图片，因此需要用到链接伪类选择器。<!DOCTYPE html><html lang="en"><head> <meta charset="U...
复制链接

扫一扫