<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 80px;
background-color: #333333;
color: white;
text-align: center;
/*行高 line-height 文字垂直居中：文字行高等于盒子高度*/
line-height: 80px;
}
span{
padding: 0 20px; /*这样能够根据文字大小自动扩大或缩小盒子*/
height: 80px;
width: 120px;
/*转换成行内块*/
display: inline-block;
}
a{
text-decoration: none;
color: #fff;
}
span:hover{
color: red;
background-color: gold;
}
</style>
</head>
<body>
<div>
<a href="#"><span>发现音乐</span></a>
<span><a href="#">我的音乐</a></span>
<span><a href="#">朋友</a></span>
<span><a href="#">商城</a></span>
<span><a href="#">下载客户端</a></span>
</div>
</body>
</html>
相关文章：