如何用DIV+CSS做漂亮的横排导航栏
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<title>Nav Demo</title>
<style type="text/css">
*{
padding:0;
margin:0;
box-sizing:border-box;
}
.nav{
font-size: 0;
text-align: center;
background-color: #666;
}
.nav li{
padding: 14px 20px;
display: inline-block;
font-size: 14px;
color: #fff;
}
.nav li:hover{
background-color: #999;
cursor: pointer;
}
.nav li.on{
background-color: #fff;
color: #333;
}
</style>
</head>
<body>
<ul class="nav">
<li>nav1</li>
<li>nav2</li>
<li class="on">nav3</li>
<li>nav4</li>
<li>nav5</li>
<li>nav6</li>
</ul>
</body>
</html>
博思aippt
2024-07-20 广告
