效果图
知识点
- 行内元素转为块元素
- a标签如何去掉下划线
- 文字如何对齐
- 鼠标滑过 hover
代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
a {
display: block;
line-height: 40px;
width: 120px;
height: line-height;
color: white;
background-color: #55585a;
text-decoration: none;
text-align: center;
}
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">video</a>
<a href="#">music</a>
<a href="#">picture</a>
<a href="#">doc</a>
</body>
</html>