一个简单的导航栏

练习目的:
使用 垂直居中 水平对齐方法
使用a标签的行内块模式水平布局
实现效果:
在这里插入图片描述
实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navbar</title>
    <style>
        .navbar-item{
     
     
            display: inline-block;
            width: 100px;
            height: 30px;
            background-color: pink;
            text-align: center;
            line-height: 30px;
            color: white;
            text-decoration: none;
        }
        .navbar-item:hover{
     
     
            background-color: orange;
            color: yellow;
        }
    </style>
</head>
<body>
<div class="navbar">
    <a href="" class="navbar-item">新闻</a>
    <a href="" class="navbar-item">体育</a>
    <a href="" class="navbar-item">汽车</a>
</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/u014301409/article/details/112854475