练习目的:
使用 垂直居中 水平对齐方法
使用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>