仿新浪网导官网航栏

小波

1年前更新

601

文章目录[隐藏]

完整源码：

↑↑↑如图，新浪官网导航栏↑↑↑

首先先写个div包裹着4个a标签

<div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">新浪网</a>
        <a href="#">移动客户端</a>
        <a href="https://blog.zmkj.website">造梦空间论坛</a>
        <a href="#">新浪导航</a>
    </div>

然后把div的高度设置为40px然后把行高也设置为40px达到文字居中显示
```
.nav{
            height: 40px;
            line-height: 40px;
        }
```

接着吧上下的两条线安排上，上面线颜色为#ff8500，下面线颜色为#edeef0

.nav{
            height: 40px;
            line-height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }

这样初步效果就出来了。

接着设置字体颜色，和去除下划线

.nav a{
            color: #4c4c4c;
            text-decoration: none;
        }

由于a标签是行内元素，无法设置宽高，那么我们把它转为行内块元素后在设置高度为40px撑满盒子，然后为了好看再把内边距设置为20px
```
.nav a{
            color: #4c4c4c;
            text-decoration: none;
            display: inline-block;
            height: 40px;
            padding: 0 20px;
        }
```

接着就是写鼠标放在a标签的效果，背景和文字颜色的变化

.nav a:hover {
            background-color: rgb(237,238,240);
            color: #ff8500;
        }

完整源码：

此处内容已隐藏，请评论后刷新页面查看.

评分

欢迎为Ta评分

赞赏