简单导航条

最新推荐文章于 2021-06-08 11:52:37 发布

qq_37978328

最新推荐文章于 2021-06-08 11:52:37 发布

阅读量244

点赞数

本文链接：https://blog.csdn.net/qq_37978328/article/details/73481099

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@media screen and (min-width:601px){
.nav{max-width:640px; margin:0 auto; min-width:320px; width:100%; overflow:hidden;background:#000;}
.nav .menu{ float:left; width:100%; max-width:550px; min-width:220px; }
.nav .menu ul{ margin:0; padding:0; list-style:none;}
.nav .menu ul li{ float:left; text-align:center; line-height:30px; width:15%; overflow:hidden; font-size:14px}
.nav .menu ul li a{ color:#FFF; font-weight:bold; font-size:14px;text-decoration: none;}
.nav .menu ul li:hover{background: red;}
}
@media screen and (max-width:600px){
.nav{max-width:640px; margin:0 auto; min-width:320px; width:100%; overflow:hidden;background:#000;}
.nav .menu{ float:left; min-width:230px; }
.nav .menu ul{ margin:0; padding:0; list-style:none;}
.nav .menu ul li{ float:left; text-align:center; line-height:30px; width:15%; overflow:hidden; font-size:14px}
.nav .menu ul li a{ color:#FFF; font-weight:bold; font-size:12px;text-decoration: none;}
.nav .menu ul li:hover{background: red;}
}
</style>
</head>

<body>
<div class="nav">
<div class="menu">
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>简介</span></a></li>
<li><a href="#"><span>动态</span></a></li>
<li><a href="#"><span>案例</span></a></li>
<li><a href="#"><span>联系</span></a></li>
<li><a href="#"><span>留言</span></a></li>
</ul>
</div>
</div>

</body>
</html>