设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › 自适应布局(附源码)
返回列表 发新帖
查看: 103|回复: 0

自适应布局(附源码)

[复制链接]
yycvip

152

主题

48

回帖

1137

积分

管理员

积分
1137
发表于 2024-12-22 20:25:55 | 显示全部楼层 |阅读模式
640.gif

  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         /* 重置一下 */
  10.         * {
  11.             padding: 0;
  12.             border: 0;
  13.             margin: 0;
  14.             outline: 0;
  15.             box-sizing: border-box;
  16.         }

  18.         /* 搬砖 */
  19.         .MLGB {
  20.             /* height: 500px; */
  21.             background-color: antiquewhite;
  22.         }

  24.         .header {
  25.             display: flex;
  26.             align-items: center;
  27.             height: 50px;
  28.             font-size: 18px;
  29.             padding: 0 10px;
  30.             color: #fff;
  31.             text-align: center;
  32.             background-color: #f97c7c;
  33.         }

  35.         .main {
  36.             display: flex;
  37.         }

  39.         /* 切换菜单的按钮 */
  40.         .toggle-menu {
  41.             height: 30px;
  42.             line-height: 30px;
  43.             text-align: center;
  44.             width: 30px;
  45.             font-size: 14px;
  46.             background-color: #607d8b;
  47.             margin-right: 10px;
  48.         }

  50.         /* 菜单 */
  51.         .menu {
  52.             flex: 0 0 140px;
  53.             background-color: #5ed5e4;
  54.         }

  56.         .menu .li {
  57.             height: 30px;
  58.             line-height: 30px;
  59.             padding: 0 10px;
  60.             border-bottom: 1px solid #91dfe8;
  61.         }

  63.         .nav {
  64.             /* height: 100px; */
  65.             display: flex;
  66.             flex-wrap: wrap;
  67.             flex: 1 1 100%;
  68.         }

  70.         .nav::after {
  71.             content: "";
  72.             display: block;
  73.             height: 0;
  74.             clear: both;
  75.             overflow: hidden;
  76.         }

  78.         .box {
  79.             display: flex;
  80.             justify-content: center;
  81.             flex: 1 1 auto;
  82.             min-width: 160px;
  83.             height: 100px;
  84.             line-height: 100px;
  85.             text-decoration: none;
  86.             font-size: 18px;
  87.             border: 1px solid #ddd;
  88.         }


  91.         /* 媒体查询 */
  92.         @media screen and (min-width: 500px) {
  93.             .header .toggle-menu {
  94.                 display: none;
  95.             }
  96.         }

  98.         @media screen and (max-width: 500px) {
  99.             .header .toggle-menu {
  100.                 display: block;
  101.             }

  103.             .menu {
  104.                 display: none;
  105.             }
  106.         }
  107.     </style>
  108. </head>

  110. <body>
  111.     <div class="MLGB">
  112.         <!-- 头部 -->
  113.         <div class="header">
  114.             <div id="toggle" class="toggle-menu">菜</div>
  115.             <div id="facility">设备</div>
  116.             <div class="title">欢迎大家来到，双十一天猫主会场！</div>
  117.         </div>
  118.         <!-- 主要内容区域 -->
  119.         <div class="main">
  120.             <!-- 左侧菜单 -->
  121.             <div id="menu" class="menu">
  122.                 <div class="li">购物车</div>
  123.                 <div class="li">我的收藏</div>
  124.                 <div class="li">浏览记录</div>
  125.                 <div class="li">已经购买</div>
  126.                 <div class="li">设置</div>
  127.                 <div class="li">退出</div>
  128.             </div>
  129.             <!-- 分会场入口 -->
  130.             <div class="nav">
  131.                 <a class="box" href="##">鞋子</a>
  132.                 <a class="box" href="##">箱包</a>
  133.                 <a class="box" href="##">数码</a>
  134.                 <a class="box" href="##">服装</a>
  135.                 <a class="box" href="##">乐器</a>
  136.                 <a class="box" href="##">户外</a>
  137.                 <a class="box" href="##">家具</a>
  138.                 <a class="box" href="##">家具</a>
  139.                 <a class="box" href="##">影视</a>
  140.                 <a class="box" href="##">美食</a>
  141.             </div>
  142.         </div>
  143.     </div>

  145. </body>
  146. <script>
  147.     let toggle = document.querySelector('#toggle');
  148.     let menu = document.querySelector('#menu');
  149.     let facility =document.querySelector('#facility');
  150.     toggle.onclick = function () {
  151.         if (menu.style.display == 'block') {
  152.             menu.style.display = 'none';
  153.         }else{
  154.             menu.style.display = 'block';
  155.         }
  156.     }
  157.     facility.addEventListener('click',()=>{
  158.         console.log(1);
  159.         console.log(navigator.userAgent);
  160.     })
  161. </script>

  163. </html>
复制代码
  1. 头部（Header）
  2. 包含一个切换菜单的按钮（toggle-menu），用于在小屏幕设备上显示或隐藏菜单。
  3. 一个标题（title），显示“欢迎大家来到，双十一天猫主会场！”。
  4. 主要内容区域（Main）
  5. 左侧菜单（menu），包含购物车、我的收藏、浏览记录、已经购买、设置和退出等选项。
  6. 分会场入口（nav），包含多个链接（box），指向不同的商品分类，如鞋子、箱包、数码等。
  7. 重置样式
  8. 所有元素的padding、border、margin、outline和box-sizing属性被重置。
  9. 头部样式（Header）
  10. 显示为一行，高度为50px，字体大小18px，背景颜色为#f97c7c。
  11. 文本居中显示，颜色为白色。
  12. 切换菜单按钮样式（Toggle Menu）
  13. 高度和行高均为30px，背景颜色为#607d8b，用于在小屏幕设备上切换菜单显示。
  14. 菜单样式（Menu）
  15. 宽度固定为140px，背景颜色为#5ed5e4。
  16. 每个菜单项（li）高度为30px，有1px的底部边框。
  17. 分会场入口样式（Nav）
  18. 显示为一行，可以包裹多行。
  19. 每个入口（box）居中显示，高度和行高均为100px，字体大小18px，边框1px。
  20. 媒体查询（Media Queries）
  21. 当屏幕宽度大于500px时，隐藏切换菜单按钮，显示菜单。
  22. 当屏幕宽度小于或等于500px时，显示切换菜单按钮，隐藏菜单。
  23. 切换菜单功能
  24. toggle.onclick：当点击切换按钮时，检查菜单的显示状态，如果显示则隐藏，如果隐藏则显示。
复制代码


回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表