css a标签和ul标签组成导航栏代码
2019-07-29 本文已影响0人
nickNic
76EE980C-C8D5-4613-9BFF-C0745A05F5A1.png
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
ul{
width: 960px;
height: 40px;
margin: 100px auto;
background: red;
}
li{
width: 120px;
height: 40px;
list-style: none;
display:block;
float: left;
text-align: center;
line-height: 40px;
}
a{
text-decoration: none;
background-color: yellow;
display:block;
width: 120px;
height: 40px;
}
a:hover
{
background-color: #FF00FF
} /* 鼠标移动到链接上 */
a:active
{
background-color: black
} /* 选定的链接 */
</style>
</head>
<body>
<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>
</body>
</html>
