search

博客列表 >使用grid实现一个12列栅格布局的组件,并grid布局仿写一个页面

使用grid实现一个12列栅格布局的组件,并grid布局仿写一个页面

Ghcᝰ
Ghcᝰ原创
2021年03月31日 11:09:05707浏览

12列栅格化布局组件

效果图

html代码部分

  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>12列栅格化作业练习</title>
  8.     <link rel="stylesheet" href="sgh.css">
  9. </head>
  10. <body>
  11.     <!-- 首先给一个大盒子 -->
  12.     <div class="container">
  13.         <!-- 再给一个行盒子 -->
  14.         <div class="rows">
  15.             <!-- 再设置行盒子内的项目占用单元格列数 -->
  16.             <div class="item col-12">我占用了12列</div>
  17.         </div>
  18.         <div class="rows">
  19.             <!-- 再设置行盒子内的项目占用单元格列数 -->
  20.             <div class="item col-3">我占用了3列</div>
  21.             <div class="item col-3">我占用了3列</div>
  22.             <div class="item col-3">我占用了3列</div>
  23.             <div class="item col-3">我占用了3列</div>
  24.         </div>
  25.     </div>
  26. </body>
  27. </html>

CSS样式表 

  1. :root {
  2.   font-size: 10px;
  3. }
  5. :root * {
  6.   margin: 0;
  7.   padding: 0;
  8.   box-sizing: border-box;
  9. }
  10. body {
  11.   font-size: 1.6rem;
  12. }
  14. li {
  15.   list-style: none;
  16. }
  17. a {
  18.   color: #666;
  19.   /* 去掉A标签下划线 */
  20.   text-decoration: none;
  21. }
  23. /* 先给最大的盒子设置边框，然后给大盒子设置宽高，并转换为grid布局 */
  24. .container {
  25.   border: 1px solid springgreen;
  26.   /* 盒子占视口宽度的80% */
  27.   width: 80vw;
  28.   /* 盒子占视口高度的80% */
  29.   height: 80vh;
  30.   /* 把盒子转为grid布局 */
  31.   display: grid;
  32.   /* 设置项目在盒子容器中的对齐方式为居中对齐 */
  33.   place-content: center;
  35.   gap: 0.5rem;
  36. }
  38. /* 把行盒子转为grid布局并划分为相同的12等分 */
  39. .container > .rows {
  40.   /* 把行盒子转为grid布局 */
  41.   display: grid;
  42.   /* 给行盒子设置个边框 */
  43.   border: steelblue 1px solid;
  44.   /* 给行盒子设置设置宽高 */
  45.   width: 80rem;
  46.   height: 4rem;
  47.   grid-template-columns: repeat(12, 1fr);
  48.   gap: 0.5rem;
  49.   /* 设置项目在网格单元中居中对齐 */
  50.   place-items: center;
  51. }
  53. .container > .rows > .item {
  54.   /* 同一个给所有项目加个边框 */
  55.   border: violet 1px solid;
  56. }
  58. .col-12 {
  59.   grid-area: auto / span 12;
  60. }
  61. .col-11 {
  62.   grid-area: auto / span 11;
  63. }
  64. .col-10 {
  65.   grid-area: auto / span 10;
  66. }
  67. .col-9 {
  68.   grid-area: auto / span 9;
  69. }
  70. .col-8 {
  71.   grid-area: auto / span 8;
  72. }
  73. .col-7 {
  74.   grid-area: auto / span 7;
  75. }
  76. .col-6 {
  77.   grid-area: auto / span 6;
  78. }
  79. .col-5 {
  80.   grid-area: auto / span 5;
  81. }
  82. .col-4 {
  83.   grid-area: auto / span 4;
  84. }
  85. .col-3 {
  86.   grid-area: auto / span 3;
  87. }
  88. .col-2 {
  89.   grid-area: auto / span 2;
  90. }
  91. .col-1 {
  92.   grid-area: auto / span 1;
  93. }

使用grid仿写某首页布局

效果图

html代码部分 

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>使用grid布局仿写PHP中文网首页布局</title>
  9.     <!-- 引入样式表 -->
  10.     <link rel="stylesheet" href="index.css">
  11.     <link rel="stylesheet" href="main.css">
  12. </head>
  14. <body>
  15.     <!-- 首先给个头部导航盒子 -->
  16.     <div class="header">
  17.         <div class="logo">logo</div>
  18.         <div class="sy">首页</div>
  19.         <div class="spjc">视频教程</div>
  20.         <div class="rmjc">入门教程</div>
  21.         <div class="sqwd">社区问答</div>
  22.         <div class="jswz">技术文章</div>
  23.         <div class="zyxx">资源下载</div>
  24.         <div class="bccd">编程词典</div>
  25.         <div class="gjxz">工具下载</div>
  26.         <div class="phppx">PHP培训</div>
  27.         <div class="dlzc">
  28.             <div>登录</div>
  29.             <div>注册</div>
  30.         </div>
  32.     </div>
  33.     <!-- 然后给主体内容一个大盒子，再再大盒子中拆分无数个盒子布局 -->
  34.     <div class="main">
  35.         <div class="main-1">
  36.             <div class="zcdh">
  37.                 <ul class="dhlb">
  38.                     <li class="item">左导航1</li>
  39.                     <li class="item">左导航2</li>
  40.                     <li class="item">左导航3</li>
  41.                     <li class="item">左导航4</li>
  42.                     <li class="item">左导航5</li>
  43.                     <li class="item">左导航6</li>
  44.                     <li class="item">左导航7</li>
  45.                     <li class="item">左导航8</li>
  46.                 </ul>
  47.             </div>
  48.             <div class="dbdh">
  49.                 <div class="item">顶部导航1</div>
  50.                 <div class="item">顶部导航2</div>
  51.                 <div class="item">顶部导航3</div>
  52.                 <div class="item">顶部导航4</div>
  53.                 <div class="item">顶部导航5</div>
  54.                 <div class="item">顶部导航6</div>
  55.                 <div class="item">顶部导航7</div>
  56.                 <input type="" name="" value="搜索内容" class="ssk">
  57.             </div>
  58.             <div class="lbt">这里是轮播图</div>
  59.             <div class="dbst">
  60.                 <div class="tupian">图1</div>
  61.                 <div class="tupian">图2</div>
  62.                 <div class="tupian">图3</div>
  63.                 <div class="tupian">图4</div>
  64.             </div>
  65.         </div>
  67.         <div class="main-2">这里是15期先上班广告</div>
  72.     </div>
  73.     <!-- 最后给个页脚 -->
  74.     <div class="footer">
  75.         页脚
  76.     </div>
  77. </body>
  79. </html>

CSS部分1 

  1. /* 先设置以下默认设置属性 */
  2. :root {
  3.   /* 根元素设置字体为10像素方便计算 */
  4.   font-size: 10px;
  5. }
  6. :root * {
  7.   /* 去除外边距 */
  8.   margin: 0;
  9.   /* 去除内边距 */
  10.   padding: 0;
  11.   /* 转换为IE盒子 */
  12.   box-sizing: border-box;
  13. }
  14. body {
  15.   /* 恢复body16像素字号 */
  16.   font-size: 1.6rem;
  17. }
  18. li {
  19.   /* 去掉列表前面的小圆点 */
  20.   list-style: none;
  21. }
  22. a {
  23.   /* 给A标签字体颜色换一下 */
  24.   color: rgb(81, 80, 80);
  25.   /* 去掉A标签的下划线 */
  26.   text-decoration: none;
  27. }
  29. /* 处理头部和页脚 */
  30. .header {
  31.   /* 先给头部的宽高设置以下，加个边框和颜色 */
  32.   width: 100vw;
  33.   height: 6rem;
  34.   border: orchid 1px solid;
  35.   /* 把头部转为grid布局 */
  36.   display: grid;
  37.   /* 利用学到的知识把盒子列宽分为12等分 */
  38.   grid-template-columns: repeat(12, 1fr);
  39.   /* 给所有项目设置一下在单元格居中对齐 */
  40.   place-items: center;
  41.   /* 设置一下头部和主题之间的间隔，使用margin挤点空间出来 */
  42.   margin-bottom: 1rem;
  43.   background-color: slategrey;
  44. }
  45. .header > .logo {
  46.   /* 改动自身项目在单元格中的对齐方式垂直居中，水平局左 */
  47.   place-self: center start;
  48.   /* 给自己左内边距加一点空间 */
  49.   padding-left: 0.5rem;
  50. }
  51. .header > .dlzc {
  52.   /* 让他横跨2列后，垂直居中，水平局右对齐 */
  53.   grid-area: auto / span 2;
  54.   place-self: center end;
  55.   /* 用内边距挤压一下，让自身不要太贴近边框 */
  56.   padding-right: 2rem;
  57.   /* 把他转换为flex布局让里面的2个项目水平排列 */
  58.   display: flex;
  59. }
  60. .header > .dlzc > div:last-of-type {
  61.   /* 给最后一个DIV用外边距拉开一下两个盒子的距离 */
  62.   margin-left: 3rem;
  63. }
  64. .main {
  65.   /* 给主体设置宽高 */
  66.   /* 宽度给80%，给个最小高度 */
  67.   width: 80vw;
  68.   min-height: 500px;
  69.   margin: 0 auto 1rem auto;
  70.   /* 给个边框 */
  71.   border: yellowgreen 1px solid;
  72. }
  73. .footer {
  74.   /* 设置一下页脚宽高 */
  75.   width: 100vw;
  76.   height: 10rem;
  77.   /* 弄个颜色和边框 */
  78.   background-color: slategrey;
  79.   border: tomato 1px solid;
  80.   text-align: center;
  81. }

CSS部分2

  1. .main > .main-1 {
  2.   /* 主体大盒子内的中盒子 ，第一步先转为grid布局*/
  3.   display: grid;
  4.   /* 给个盒子宽高 ,宽度让他占满父元素*/
  5.   width: 100%;
  6.   height: 300px;
  7.   /* 给个边框,所有边框后期可统一去掉 ,设计时根据需求打开*/
  8.   border: solid 1px violet;
  9.   /* 把中盒子搞成2列3行 */
  10.   grid-template-columns: 1.5fr 8.5fr;
  11.   grid-template-rows: 1fr 6fr 3fr;
  12.   /* 让所有项目在网格单元中垂直水平居中 */
  13.   place-items: center;
  14.   gap: 0.5rem;
  15. }
  17. .main > .main-1 > .zcdh {
  18.   /* 让左侧导航横跨3行 */
  19.   grid-area: span 3 / auto;
  20.   /* display: grid; */
  21.   /* 给导航盒子设置一下宽高 */
  22.   width: 100%;
  23.   height: 100%;
  24. }
  25. .main > .main-1 > .zcdh > .dhlb {
  26.   display: grid;
  27.   /* 再把左侧导航转为grid布局并垂直分为8个等分行 */
  28.   grid-template-rows: repeat(8, calc(298px / 8));
  29.   /* 让所有项目在容器中垂直居中,水平局左 */
  30.   place-items: center start;
  31.   /* 给点内边距,让项目不要贴近边框 */
  32.   padding-left: 1rem;
  33. }
  34. .main > .main-1 > .dbdh {
  35.   /* 先把中盒子的顶部网格单元盒子转为grid布局容器 */
  36.   display: grid;
  37.   /* 把盒子分成9等分列 */
  38.   grid-template-columns: repeat(9, 1fr);
  39.   /* 给容器设置宽高占满父元素 */
  40.   width: 100%;
  41.   height: 100%;
  42.   /* 让项目在网格单元中垂直居中 */
  43.   place-items: center;
  44.   /* 给点间距,火车轨道 */
  45.   gap: 0.5rem;
  46. }
  47. .main > .main-1 > .dbdh > .ssk {
  48.   /* 给搜索框横跨2行 */
  49.   grid-area: auto / span 2;
  50. }
  52. .main > .main-1 > .lbt {
  53.   border: teal 1px solid;
  54.   width: 100%;
  55.   height: 100%;
  56.   text-align: center;
  57. }
  59. .main > .main-1 > .dbst {
  60.   /* 把项目转为网格容器 */
  61.   display: grid;
  62.   grid-template-columns: repeat(4, 1fr);
  63.   width: 100%;
  64.   height: 100%;
  65.   place-items: center;
  66.   /* margin: auto; */
  67.   border: lawngreen 1px solid;
  68.   gap: 0.5rem;
  69. }
  70. .main > .main-2 {
  71.   width: 100%;
  72.   height: 30px;
  73.   text-align: center;
  74.   border: 1px red solid;
  75.   margin: 1rem 0;
  76. }
上一条：CSS-03相对与绝对定位下一条：【归纳】赶紧收藏css实现水平垂直居中的八种快速方法总结
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多