search

博客列表 >grid布局

grid布局

牙森江
牙森江原创
2022年10月28日 15:36:27741浏览

1.grid 布局

  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>Document</title>
  8.     <style>
  9.                * {
  10.                 margin: 0;
  11.                 padding: 0;
  12.                }
  14.                .container {
  15.                 display: grid;
  16.                 width: 960px;
  17.                 height:600px;
  18.                 grid-template-columns: repeat(4,1fr);
  19.                 grid-template-rows: repeat(2,1fr);
  20.                 background-color: rgb(189, 237, 221);
  21.                 margin: 20px auto;
  22.                 place-items: center; 
  23.                }
  25.                .container .box {
  26.                 margin: 20px 20px;
  27.                 text-align: center;
  29.                }
  31.                .container .box img {
  32.                 position: relative;
  33.                 max-width: 200px;
  34.                 height: 220px;
  35.                 border-radius: 12px;
  36.                }
  38.     </style>
  39. </head>
  40. <body>
  41.     <div class="container">
  42.     <div class="box">
  43.          <img src="images/背景1.jpg" alt="">
  44.          <p>文章标题</p>
  45.         </div>
  46.     <div class="box">
  47.          <img src="images/背景2.jpg" alt="">
  48.          <p>文章标题</p>
  49.         </div>
  50.     <div class="box">
  51.          <img src="images/背景3.jpg" alt="">
  52.          <p>文章标题</p>
  53.         </div>
  54.     <div class="box">
  55.          <img src="images/背景4.jpg" alt="">
  56.          <p>文章标题</p>
  57.         </div>
  58.     <div class="box">
  59.          <img src="images/背景5.jpg" alt="">
  60.          <p>文章标题</p>
  61.         </div>
  62.     <div class="box">
  63.          <img src="images/背景6.jpg" alt="">
  64.          <p>文章标题</p>
  65.         </div>
  66.     <div class="box">
  67.          <img src="images/背景7.jpg" alt="">
  68.          <p>文章标题</p>
  69.         </div>
  70.     <div class="box">
  71.          <img src="images/背景8.jpg" alt="">
  72.          <p>文章标题</p>
  73.         </div>
  74.     </div>
  76. </body>
  77. </html>

上一条：隐式网格实例-对其方式以及间隙下一条：1027作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多