纯html+css响应式导航实例
作者：xuhongji发布时间：2020-08-24分类：Html浏览：279评论：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排行
-
- 1首页轮播图是什么[京东轮播图是怎么实现的？京东轮播图代码]
- 2html中加横线[如何在HTML中插入一行？html横线标签hr全新讲解]
- 3html,xml,xhtml的区别联系[如何区分HTML和XHTML？HTML和XHTML的区别在哪？]
- 4html超链接字体颜色怎么改？超链接字体颜色的更改方法总结[设置超链接的字体颜色怎么改]
- 5html超链接的下划线怎么去掉？a标签去下划线的方法都在这里[html超链接下划线怎么取消]
- 6html中滚动条的代码是什么？如何设置html滚动条？[html怎么设置滚动条可以滚动]
- 7html下划线怎么设置？html下划线样式实例分析[html设置下划线代码]
- 8html头部标签有哪些[浅谈关于HTML5头部<meta>标签的小知识]
- 9canvas判断坐标在图形[canvas 学习 3---画坐标系]
- 标签列表
- 网站分类
- 最近发表