html5 css怎么写导航栏

发布网友发布时间：2022-05-01 11:24

共2个回答

懂视网时间：2022-05-13 11:42

　　首页
 1
 2
 3
 4
 5
  　　欢迎来到！  免费注册 | 请登录  |   购物车(0)

热心网友时间：2022-05-13 08:50

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}

.nav {
width: 960px;
height: 60px;
border: 1px solid red;
margin: 100px auto;
}

.nav ul {
list-style: none;
}

.nav ul li {
float: left;
background-color: #e7ffb0;
}

.nav ul li a {
display: block;
width: 120px;
text-align: center;
line-height: 60px;
text-decoration: none;
color: #5a3467;
}

.nav ul li a:hover {
cursor: pointer;
background-color: #645e55;
color: #cdff83;
}

</style>
</head>
<body>

<div class="nav">
<ul>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
</ul>
</div>

</body>
</html>