<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局-居中导航</title>
<style type="text/css">
ul{
text-align: center; /* text-align 只对行级元素起效果*/
height: 30px;
line-height: 30px;
background-color: #f00;
}
li,a{
display: inline-block;
width: 80px;
height: 100%;
}
li{
margin: 0 5px;
list-style: none;
}
a,a:hover,li.cur a{
color: #fff;
text-decoration: none;
}
a:hover,li.cur a{
background-color: #c00;
}
</style>
</head>
<body>
<ul>
<li><a href="#">推荐</a></li>
<li><a href="#">歌单</a></li>
<li><a href="#">打牌DJ</a></li>
<li><a href="#">歌手</a></li>
<li><a href="#">新碟上架</a></li>
</ul>
</body>
</html>
时间： 2024-12-19 01:44:13