温故而知新——导航栏的创建

最新推荐文章于 2024-08-12 22:06:26 发布

我是坏人我霸道

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量129

点赞数

分类专栏：静态网页项目

本文链接：https://blog.csdn.net/qq_44369304/article/details/120229322

版权

CSS padding 行内块元素导航栏设计鼠标悬停效果

关键词由CSDN通过智能技术生成

静态网页项目专栏收录该内容

3 篇文章 0 订阅

订阅专栏

padding 属性用于创建导航栏

今天复习css盒子的时候，看到网课老师写的案例，然后发现以前自己创建的导航栏就是乱写一通，没有什么规章制度，然后按着老师的思路自己捋了一遍，导航栏的创建。代码如下：

<style>
        nav{
            /* 设置盒子大小 */
            height: 50px;
            /* 设置背景颜色 */
            background-color: rgba(255, 247, 201,.4);
            /* 将文字居中 */
            line-height: 50px;
        }
        nav a{
            /* 1. 修改链接样式 */
            /* 去掉下划线 */
            text-decoration: none;
            /* 改变字体颜色 */
            color: grey;
            /* 2. 修改a为行内块元素 （为了设置a的宽高）*/
            display: inline-block;
            height: 50px;
            /* 3. 设置padding，撑开a盒子宽度，用padding设置宽度是为了让不同字数的按钮也能相隔相同的距离 */
            padding: 0 20px;
        }

        /* 设置鼠标悬停效果 */
        nav a:hover{
            background-color:whitesmoke;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#">第一个按钮</a>
        <a href="#">第二个按钮呀</a>
        <a href="#">第三个</a>
        <a href="#">第四</a>
    </nav>
</body>

实现效果：

我是坏人我霸道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
温故而知新——导航栏的创建

padding 属性用于创建导航栏今天复习css盒子的时候，看到网课老师写的案例，然后发现以前自己创建的导航栏就是乱写一通，没有什么规章制度，然后按着老师的思路自己捋了一遍，导航栏的创建。代码如下：<style> nav{ /* 设置盒子大小 */ height: 50px; /* 设置背景颜色 */ background-color: rgba(255, 247, 201,.4)
复制链接

扫一扫

专栏目录