search

博客列表 >使用grid布局实现类似bootstrap栅格布局和响应式企业产品展示页面

使用grid布局实现类似bootstrap栅格布局和响应式企业产品展示页面

润物
润物原创
2020年08月10日 22:41:54593浏览

1. 使用grid布局实现类似bootstrap 12列栅格布局

  • 主要css代码，封装成文件style.css
  1. .container {
  2.   display: grid;
  3.   gap: 5px;
  4.   /* 将容器宽度设为100%，以便实现自适应 */
  5.   width: 100%;
  6. }
  7. .container > .row {
  8.   display: grid;
  9.   /* 将行宽度设为100%，以便实现自适应 */
  10.   width: 100%;
  11.   /* 将每一行12等分，即每一行有12列 */
  12.   grid-template-columns: repeat(12, 1fr);
  13.   gap: 2px;
  14. }
  15. /* 使用span扩展，实现12种布局形式 */
  16. .container > .row > .col-1 {
  17.   grid-column: span 1;
  18. }
  19. .container > .row > .col-2 {
  20.   grid-column: span 2;
  21. }
  22. .container > .row > .col-3 {
  23.   grid-column: span 3;
  24. }
  25. .container > .row > .col-4 {
  26.   grid-column: span 4;
  27. }
  28. .container > .row > .col-5 {
  29.   grid-column: span 5;
  30. }
  31. .container > .row > .col-6 {
  32.   grid-column: span 6;
  33. }
  34. .container > .row > .col-7 {
  35.   grid-column: span 7;
  36. }
  37. .container > .row > .col-8 {
  38.   grid-column: span 8;
  39. }
  40. .container > .row > .col-9 {
  41.   grid-column: span 9;
  42. }
  43. .container > .row > .col-10 {
  44.   grid-column: span 10;
  45. }
  46. .container > .row > .col-11 {
  47.   grid-column: span 11;
  48. }
  49. .container > .row > .col-12 {
  50.   grid-column: span 12;
  51. }
  • 创建一个HTML进行测试，代码如下
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <title>12列栅格布局</title>
  5.     <!-- 引入封装好的css样式表 -->
  6.     <link rel="stylesheet" href="css/style.css" />
  7.     <style>
  8.       .row {
  9.         height: 50px;
  10.       }
  11.       .item {
  12.         background-color: lightblue;
  13.       }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <div class="container">
  18.       <div class="row">
  19.         <div class="item col-1">1</div>
  20.       </div>
  21.       <div class="row">
  22.         <div class="item col-2">2</div>
  23.         <div class="item col-2">2</div>
  24.         <div class="item col-2">2</div>
  25.       </div>
  26.       <div class="row">
  27.         <div class="item col-3">3</div>
  28.         <div class="item col-4">4</div>
  29.       </div>
  30.       <div class="row">
  31.         <div class="item col-4">4</div>
  32.         <div class="item col-4">4</div>
  33.         <div class="item col-4">4</div>
  34.       </div>
  35.       <div class="row">
  36.         <div class="item col-5">5</div>
  37.       </div>
  38.       <div class="row">
  39.         <div class="item col-6">6</div>
  40.       </div>
  41.     </div>
  42.   </body>
  43. </html>
  • 运行效果，如下，根据浏览器窗口大小，改变布局的大小。

2. 实现响应式企业产品展示页

使用grid布局的grid-template-columns: repeat(auto-fill, 220px) 和 grid-template-rows: repeat(auto-fill, 200px);进行响应式自动填充布局。

  • 代码如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <title>响应式企业商品目录布局</title>
  5.     <style>
  6.       a {
  7.         text-align: center;
  8.         text-decoration: none;
  9.         color: #555;
  10.         font-size: 1.2rem;
  11.         margin: 10px;
  12.       }
  13.       h1 {
  14.         color: blue;
  15.         text-align: center;
  16.         font-size: 2.5rem;
  17.         font-weight: normal;
  18.         text-shadow: 2px 2px 2px #555;
  19.         margin: 20px;
  20.       }
  21.       .item {
  22.         display: grid;
  23.         /* 使用自动填充 */
  24.         grid-template-columns: repeat(auto-fill, 220px);
  25.         grid-template-rows: repeat(auto-fill, 200px);
  26.         gap: 20px;
  27.         place-content: space-evenly;
  28.       }
  29.       .product {
  30.         background-color: lightcyan;
  31.         text-align: center;
  32.         padding: 10px;
  33.       }
  34.       .product:hover {
  35.         box-shadow: 0 0 10px #666;
  36.         width: calc(100% * 1.02);
  37.         background-color: lightpink;
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <h1>企业商品目录</h1>
  43.     <div class="item">
  44.       <div class="product">
  45.         <img src="pro.jpg" alt="" style="width: 200px; height: 150px;" />
  46.         <div><a href="#">查看详情</a>|<a href="#">询价</a></div>
  47.       </div>
  48.       <div class="product">
  49.         <img src="pro.jpg" alt="" style="width: 200px; height: 150px;" />
  50.         <div><a href="#">查看详情</a>|<a href="#">询价</a></div>
  51.       </div>
  52.       <div class="product">
  53.         <img src="pro.jpg" alt="" style="width: 200px; height: 150px;" />
  54.         <div><a href="#">查看详情</a>|<a href="#">询价</a></div>
  55.       </div>
  56.       <div class="product">
  57.         <img src="pro.jpg" alt="" style="width: 200px; height: 150px;" />
  58.         <div><a href="#">查看详情</a>|<a href="#">询价</a></div>
  59.       </div>
  60.       <div class="product">
  61.         <img src="pro.jpg" alt="" style="width: 200px; height: 150px;" />
  62.         <div><a href="#">查看详情</a>|<a href="#">询价</a></div>
  63.       </div>
  64.       <div class="product">
  65.         <img src="pro.jpg" alt="" style="width: 200px; height: 150px;" />
  66.         <div><a href="#">查看详情</a>|<a href="#">询价</a></div>
  67.       </div>
  68.       <div class="product">
  69.         <img src="pro.jpg" alt="" style="width: 200px; height: 150px;" />
  70.         <div><a href="#">查看详情</a>|<a href="#">询价</a></div>
  71.       </div>
  72.       <div class="product">
  73.         <img src="pro.jpg" alt="" style="width: 200px; height: 150px;" />
  74.         <div><a href="#">查看详情</a>|<a href="#">询价</a></div>
  75.       </div>
  76.       <div class="product">
  77.         <img src="pro.jpg" alt="" style="width: 200px; height: 150px;" />
  78.         <div><a href="#">查看详情</a>|<a href="#">询价</a></div>
  79.       </div>
  80.       <div class="product">
  81.         <img src="pro.jpg" alt="" style="width: 200px; height: 150px;" />
  82.         <div><a href="#">查看详情</a>|<a href="#">询价</a></div>
  83.       </div>
  84.       <div class="product">
  85.         <img src="pro.jpg" alt="" style="width: 200px; height: 150px;" />
  86.         <div><a href="#">查看详情</a>|<a href="#">询价</a></div>
  87.       </div>
  88.       <div class="product">
  89.         <img src="pro.jpg" alt="" style="width: 200px; height: 150px;" />
  90.         <div><a href="#">查看详情</a>|<a href="#">询价</a></div>
  91.       </div>
  92.       <div class="product">
  93.         <img src="pro.jpg" alt="" style="width: 200px; height: 150px;" />
  94.         <div><a href="#">查看详情</a>|<a href="#">询价</a></div>
  95.       </div>
  96.       <div class="product">
  97.         <img src="pro.jpg" alt="" style="width: 200px; height: 150px;" />
  98.         <div><a href="#">查看详情</a>|<a href="#">询价</a></div>
  99.       </div>
  100.       <div class="product">
  101.         <img src="pro.jpg" alt="" style="width: 200px; height: 150px;" />
  102.         <div><a href="#">查看详情</a>|<a href="#">询价</a></div>
  103.       </div>
  104.       <div class="product">
  105.         <img src="pro.jpg" alt="" style="width: 200px; height: 150px;" />
  106.         <div><a href="#">查看详情</a>|<a href="#">询价</a></div>
  107.       </div>
  108.     </div>
  109.   </body>
  110. </html>
  • 运行效果
上一条：表格、表单下一条：PHP分页功能扩展及数据的修改删除
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议