纯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---画坐标系]
- 标签列表
- 网站分类
- 最近发表