1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>圣杯布局(grid版)</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         body * {
  15.             background-color: chartreuse;
  16.         }
  17.         body {
  18.             display: grid;
  19.             grid-template-columns: 200px minmax(400px, 1fr) 200px;
  20.             grid-template-rows: 10em minmax(calc(100vh - 20em - 0.6em), 1fr) 10em;
  21.             gap: 0.3em;
  22.         }
  23.         header,
  24.         footer {
  25.             grid-column: span 3;
  26.         }
  27.     </style>
  28.     </head>
  29.     <body>
  30.         <header>页眉</header>
  31.         <aside>左侧</aside>
  32.         <main>主题</main>
  33.         <aside>右侧</aside>
  34.         <footer>页脚</footer>
  35.     </body>
  36. </html>

更多相关文章

  1. android 欢迎界面的淡入效果
  2. android 主题元素映射方式
  3. flex应用：仿写某网站H5页面
  4. 自己看的，随便写，贴。关于Android里面的Style(样式）和主题（Theme）资源
  5. android进行主题切换不重启整个应用(style方式)
  6. 修改Android(安卓)actionbar 溢出菜单按钮（OverflowButton）默认图
  7. Android的intent之间复杂参数的传递
  8. Android一键锁屏源码
  9. SQL Server简单模式下误删除堆表记录恢复方法(绕过页眉校验)

随机推荐

  1. linux系统被入侵后处理
  2. 可以睡眠的poll
  3. Inotify: 高效、实时的Linux文件系统事件
  4. Linux 2.6.x 内核模块加载错误 “Invalid
  5. 在centos中安装了mysql5.7之后解决不知道
  6. Linux实验报告一
  7. Linux开发基础（1）：开发板的挂载
  8. 使用Python+selenium实现第一个自动化测
  9. Linux学习笔记 --- xxx is not in the su
  10. 边学边干Linux内核指导(8)——进程调度