纯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排行
- 标签列表
- 网站分类
- 最近发表