Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1029作业 深刻理解grid实现12列栅格布局的原理与实现,并用它写一个页面
Blogger Information
Blog 7
fans 0
comment 1
visits 4251
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
1029作业 深刻理解grid实现12列栅格布局的原理与实现,并用它写一个页面
Vic
Original
640 people have browsed it

代码如下

  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.     <link rel="stylesheet" href="style.css" />
  8. <style>
  9.     * {
  10. text-decoration: none;
  12.     }
  13. .row:nth-of-type(2){
  14.     min-height: 60vh;
  15. }
  17. .header > a {
  18.     margin-left: 5em;
  19. }
  20. .header > a:first-of-type{
  21.     margin-right: 8em;
  22. }
  24. .left{
  25.     display: grid;
  26.    place-content: center;
  27.    width: ;
  28. }
  31. .mainbox{
  32.     display: grid;
  33.    grid-template-rows: 3em;
  34.    grid-auto-rows: 3em;
  35.    gap: 1em
  37. }
  39. .mainbox > .box{
  40.     /* place-self: center; */
  41.     background-color: yellow;
  43.     border: 1px solid;
  44.    mar
  45. }
  46. </style>
  48. </head>
  50. <body>
  51.     <div class="container">
  52.     <!-- 头部 -->
  53.     <div class="row">
  54. <div class="item col-12">
  55.     <div class="header">
  56. <a href="">首页</a>
  57. <a href="">视频教程</a>
  58. <a href="">入门教程</a>
  59. <a href="">社区问答</a>
  60. <a href="">技术文章</a>
  61. <a href="">资源下载</a>
  62. </div>
  64. </div>
  66.    </div>
  68. <!-- 主体 -->
  69. <div class="row">
  70. <div class="item col-3">
  71.     <div class="left">
  72.     <img src="https://www.php.cn/static/images/index_learn_first.jpg" alt="">
  73. </div>
  74. </div>
  76. <div class="item col-9">
  77.     <div class="mainbox">
  78.         <div class="box">文字1</div>
  79.          <div class="box">文字2</div>
  80.           <div class="box">文字3</div>
  81.           <div class="box">文字4</div>
  82.          <div class="box">文字5</div>
  83.           <div class="box">文字6</div>
  85.           </div>
  87. </div>
  89. </div>
  91. <!-- 底部 -->
  92.  <div class="row">
  93. <div class="item col-12">
  94.   <p>Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1</p>
  95. </div>
  96. </div>
  99.     </div>
  101.     </div>
  103. </body>
  104. </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