纯html+css响应式导航实例
作者：xuhongji发布时间：2020-08-24分类：Html浏览：210评论：0
导读：纯html+css响应式导航<!DOCTYPE html><html><head> <ti...
纯html+css响应式导航
<!DOCTYPE html>
<html>
<head>
<title>纯html+css响应式导航</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<style>
.nav{position:relative;margin:20px 0;}
.nav ul{margin:0;padding:0;}
.nav li{margin:0 5px 10px 0;padding:0;list-style:none;display:inline-block;}
.nav a{padding:3px 12px;text-decoration:none;color:#999;line-height:100%;}
.nav a:hover{color:#d0d0d0;}
.nav .current a{background:#999;color:#fff;border-radius:5px;}
.nav.right ul{text-align:right;}
.nav.center ul{text-align:center;}
@media screen and (max-width:960px){
.nav{position:relative;min-height:40px;}
.nav ul{width:180px;padding:5px 0;position:absolute;top:0;left:0;border:solid 1px #aaa;background:#fff ;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,.3);}
.nav li{display:none;margin:0;}
.nav .current{display:block;}
.nav a{display:block;padding:5px 5px 5px 32px;text-align:left;}
.nav .current a{background:none;color:#666;}
.nav ul:hover{background-image:none;}
.nav ul:hover li{display:block;margin:0 0 5px;}
.nav.right ul{left:auto;right:0;}
.nav.center ul{left:50%;margin-left:-90px;}}
</style>
</head>
<body>
<nav class="nav">
<ul>
<li class="current"><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>
</nav>
</body>
</html>标签：响应式导航
相关推荐
欢迎 你 发表评论:
- Html排行
- 标签列表
- 网站分类
- 最近发表