CSS制作一个小导航

最新推荐文章于 2024-04-26 19:19:48 发布

Adellle

最新推荐文章于 2024-04-26 19:19:48 发布

阅读量536

点赞数 1

分类专栏： CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/m0_71385141/article/details/130158272

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

制作如图所示一个导航。

观察发现是a标签构成，文字居中，初始背景颜色为红色，鼠标悬停背景颜色变为橙色。

并且a标签是行内元素，不可以设置宽高，所以需要改成行内块元素。

见代码：

<!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>
        a{
            width: 100px;
            height: 50px;
            color:#fff;
            /* 背景颜色 */
            background-color: red;
            /* 去除装饰线 */
            text-decoration: none;
            /* 显示模式转换 */
            display: inline-block;
            /* 文字水平居中 */
            text-align: center;
            line-height: 50px;
        }
        /* 伪类选择器：鼠标悬停更改背景颜色 */
        a:hover{
            background-color: orange;
        }

    </style>
</head>
<body>
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>
</body>
</html>