一个合理的网站导航栏不仅要美观，还是要方便用户的使用，接下来，济南网站建设就来为大家分享一个通过css浮动设置导航栏的小案例，有兴趣的朋友可以过来关注一下。
关键代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>浮动实现导航栏</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
/* 导航外层容器 */
.nav {
width: 100%;
height: 50px;
background-color: #222;
}
/* 浮动让li横向排列 */
.nav li {
float: left;
}
/* 导航链接样式 */
.nav li a {
display: block;
height: 50px;
line-height: 50px;
padding: 0 25px;
color: #fff;
font-size: 15px;
}
/* 鼠标悬浮变色 */
.nav li a:hover {
background-color: #0099ff;
}
/* 清除浮动，防止父级高度塌陷 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<!-- 导航栏结构 -->
<div class="nav clearfix">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">SEO优化</a></li>
<li><a href="#">案例展示</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系客服</a></li>
</ul>
</div>
</body>
</html>
评论