sitemap
知识分享网:一个值得你收藏的网站!
当前位置:网站首页 > Html > 纯html+css响应式导航实例

纯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排行
«    2022年7月    »
123
45678910
11121314151617
18192021222324
25262728293031
标签列表
网站分类
文章归档
最近发表
推荐文章