https://www.bilibili.com/video/BV14J4114768?p=499

响应式开发

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <title>响应式导航</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  12.         ul {
  13.             list-style: none;
  14.         }
  16.         .container {
  17.             width: 750px;
  18.             margin: 0 auto;
  19.         }
  21.         .container ul li {
  22.             float: left;
  23.             width: 93.75px;
  24.             height: 30px;
  25.             background-color: green;
  26.         }
  28.         @media screen and (max-width: 767px) {
  29.             .container {
  30.                 width: 100%;
  31.             }
  32.             .container ul li {
  33.                 width: 33.33%;
  34.             }
  35.         }
  36.     </style>
  37. </head>
  39. <body>
  40.     <div class="container">
  41.         <ul>
  42.             <li>导航栏</li>
  43.             <li>导航栏</li>
  44.             <li>导航栏</li>
  45.             <li>导航栏</li>
  46.             <li>导航栏</li>
  47.             <li>导航栏</li>
  48.             <li>导航栏</li>
  49.             <li>导航栏</li>
  50.         </ul>
  51.     </div>
  52. </body>
  54. </html>

Bootstrap框架

中文官网：https://www.bootcss.com/
官网：https://getbootstrap.com/

Bootstrap栅格系统

布局容器

image.png

栅格系统

image.png
image.png