简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 利用媒体查询实现自适应导航
Blogger Information
Blog 11
fans 0
comment 0
visits 27423
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
利用媒体查询实现自适应导航
饮雪煮茶
Original
840 people have browsed it

利用 @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代码的大量精简，当然对样式需求比较大的还有点不足。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看来你是有一定基础, 后面的学习应该很轻松
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！