search

博客列表 >利用媒体查询实现自适应导航

利用媒体查询实现自适应导航

饮雪煮茶
饮雪煮茶原创
2020年04月06日 14:34:30844浏览

利用 @media screen对设备屏幕宽度的查询，设置不同的css样式表，实现在pc和移动设备的自适应显示

在案例中对前段css选择器，postion、gride、flex布局，媒体查询等进行了应用练习。

自适应导航效果网址

pc端效果图

移动端效果图

移动端菜单展示图

源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.     }
  13.     a {
  14.       text-decoration: none;
  15.     }
  16.     body {
  17.       background-color: #f4f4f4;
  18.     }
  19.     nav {
  20.       max-width: 1200px;
  21.       margin: 0 auto;
  22.       display: grid;
  23.       grid-template-columns: 120px auto;
  24.     }
  25.     nav a {
  26.       color: #fff;
  27.       font-size: 16px;
  28.     }
  29.     nav .logo > a {
  30.       font-size: 25px;
  31.       line-height: 50px;
  32.     }
  33.     nav .nav-items {
  34.       display: flex;
  35.       flex-wrap: nowrap;
  36.       justify-content: start;
  37.       align-items: center;
  38.     }
  39.     nav .nav-items > a {
  40.       height: 24px;
  41.       padding: 12px 20px;
  42.     }
  43.     nav .nav-items > a:hover {
  44.       background-color: #000;
  45.     }
  46.     nav .active {
  47.       background-color: #000;
  48.     }
  49.     header {
  50.       height: 50px;
  51.       background-color: #333;
  52.     }
  53.     nav .toggle {
  54.       display: none;
  55.     }
  56.     nav .check-box {
  57.       display: none;
  58.     }
  59.     @media screen and (max-width: 700px) {
  60.       nav {
  61.         position: relative;
  62.       }
  63.       nav .logo {
  64.         margin-left: 20px;
  65.       }
  66.       nav .nav-items {
  67.         display: none;
  68.       }
  69.       nav .toggle {
  70.         display: block;
  71.         font-weight: 500;
  72.         color: #fff;
  73.         position: absolute;
  74.         top: 12px;
  75.         right: 10px;
  76.         padding: 3px 5px;
  77.       }
  78.       nav .toggle:hover {
  79.         background-color: #000;
  80.         cursor: pointer;
  81.         border-radius: 5px;
  82.       }
  83.       nav .check-box:checked ~ div {
  84.         margin-top: 50px;
  85.         display: grid;
  86.         grid-template-columns: 100%;
  87.         background-color: #333;
  88.       }
  89.       nav .nav-items a {
  90.         border-bottom: 1px solid #999;
  91.         padding-left: 50px;
  92.       }
  93.     }
  94.   </style>
  95.   <body>
  96.     <header>
  97.       <nav>
  98.         <div class="logo">
  99.           <a href="">LOGO</a>
  100.         </div>
  101.         <label for="check-box" class="toggle">MENU</label>
  102.         <input type="checkbox" class="check-box" id="check-box" />
  103.         <div class="nav-items">
  104.           <a href="" class="active">首页</a>
  105.           <a href="">资讯</a>
  106.           <a href="">下载</a>
  107.           <a href="">图片</a>
  108.         </div>
  109.       </nav>
  110.     </header>
  111.   </body>
  112. </html>

总结：

1.本实例用前段HTML和css完成。
2.运用chekbox的checked属性选择器选择了兄弟元素实现了手机端导航的显示。
3.通过栅格布局实现了html代码的大量精简，当然对样式需求比较大的还有点不足。

上一条：Web 前端 - HTML - 表单元素下一条：HTML:CSS相关知识点（重点 display属性，css在html应用，媒体查询） （0405）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多