纯css实现的简单导航栏。
前端开发基础中的基础。。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏练习-01</title>
<style type="text/css">
/* ul与div样式 */
#nav ul{
list-style-type: none;
display: inline-block;
margin: auto 25%;
line-height: 50px;
}
#nav ul li{
float: left;
margin: 0px 20px;
}
#nav{
height: 10%;
width: 60%;
background-color: rgb(106,106,106);
font-family: "微软雅黑";
margin: 0 auto;
border-radius: 10px;
}
/* 链接样式 */
a:link{
color: whitesmoke;
text-decoration:none;
}
a:visited{
color: whitesmoke;
text-decoration:none;
}
a:hover{
color: rgb(186,182,182);
text-decoration:none;
}
a:active{
color: whitesmoke;
text-decoration:none;
}
</style>
</head>
<body>
<div id="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>
</ul>
</div>
</body>
</html>
时间： 2024-12-09 01:49:26