search

博客列表 >2019年12月28日 作业 grid布局了解+布局实现

2019年12月28日 作业 grid布局了解+布局实现

L
L原创
2019年12月30日 14:52:57585浏览

网格布局了解 grid

术语

网格线 grid lines：编号，命名

轨道 grid tracks：两条网格线间的区域，fr，%，px，auto-fill

单元格 grid cell：四条网格线包起来的区域

网格区域 grid area：多个单元格形成的区域

网格间距 grid gap：行或列之间的间隙

容器属性

grid-template-columns：定义网格列大小,

如：grid-template-columns: 1fr 1fr;

grid-template-rows 定义网格行大小

如：grid-template-rows: 300px 300px;

grid-template-areas 网格命名

如 grid-template-areas: “link list” “car test” “music .”;

“.”占位作用

grid-gap 网格间隙

grid-column-gap 列间隙

grid-row-gap 行间隙

grid-gap 行列间隙合并写，顺序先行后列

元素属性

grid-row-start/end grid-cloumn-start/end 将元素放入网格起止线之间的单元格

简写 grid-row: 起/止; grid-column: 起/止; 再简写 grid-area: 行起/列起/行止/列止；

grid布局实现

二手商品交易

效果图

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8.     <link rel="stylesheet" href="grid_test.css" />
  9.     <title>二手商品交易</title>
  10. </head>
  12. <body>
  13.     <div class="public_headline">
  14.         <span>二手交易</span>
  15.     </div>
  16.     <!-- 二手交易区 -->
  17.     <div class="public_second_hand">
  18.         <!-- 标题1 -->
  19.         <div class="title1">
  20.             <a href="">抢好货</a>
  21.             <span>0低价, 便捷,安全,快速</span>
  22.         </div>
  23.         <!-- 标题2 -->
  24.         <div class="title2">
  25.             <span>热门分类</span>
  26.             <a href="">分类1</a>
  27.             <a href="">分类2</a>
  28.             <a href="">分类3</a>
  29.             <a href="">分类4</a>
  30.             <a href="">分类5</a>
  31.         </div>
  32.         <!-- 商品展示区 -->
  33.         <div class="goods">
  34.             <!-- 左侧商品列表 -->
  35.             <div class="goods-list">
  36.                 <!-- 商品简介 -->
  37.                 <div class="intro">
  38.                     <a href="">
  39.                         <img src="static/images/shop/shop3.jpg" alt="" width="176" height="120" />
  40.                     </a>
  41.                     <a href="">美女性感写真海报墙艺术装饰画贴画图</a>
  42.                     <div>
  43.                         <span>&yen; 888</span>
  44.                         <span>美女</span>
  45.                     </div>
  46.                 </div>
  47.                 <div class="intro">
  48.                     <a href=""><img src="static/images/shop/shop2.jpg" alt="" width="176" height="120" /></a>
  49.                     <a href="">美女性感写真海报墙艺术装饰画贴画图</a>
  50.                     <div>
  51.                         <span>&yen; 888</span>
  52.                         <span>美女</span>
  53.                     </div>
  54.                 </div>
  55.                 <div class="intro">
  56.                     <a href=""><img src="static/images/shop/shop3.jpg" alt="" width="176" height="120" /></a>
  57.                     <a href="">美女性感写真海报墙艺术装饰画贴画图</a>
  58.                     <div>
  59.                         <span>&yen; 888</span>
  60.                         <span>美女</span>
  61.                     </div>
  62.                 </div>
  63.                 <div class="intro">
  64.                     <a href=""><img src="static/images/shop/shop6.jpg" alt="" width="176" height="120" /></a>
  65.                     <a href="">美女性感写真海报墙艺术装饰画贴画图</a>
  66.                     <div>
  67.                         <span>&yen; 888</span>
  68.                         <span>美女</span>
  69.                     </div>
  70.                 </div>
  71.                 <div class="intro">
  72.                     <a href=""><img src="static/images/shop/shop3.jpg" alt="" width="176" height="120" /></a>
  73.                     <a href="">美女性感写真海报墙艺术装饰画贴画图</a>
  74.                     <div>
  75.                         <span>&yen; 888</span>
  76.                         <span>美女</span>
  77.                     </div>
  78.                 </div>
  79.                 <div class="intro">
  80.                     <a href=""><img src="static/images/shop/shop8.jpg" alt="" width="176" height="120" /></a>
  81.                     <a href="">美女性感写真海报墙艺术装饰画贴画图</a>
  82.                     <div>
  83.                         <span>&yen; 888</span>
  84.                         <span>美女</span>
  85.                     </div>
  86.                 </div>
  87.                 <div class="intro">
  88.                     <a href=""><img src="static/images/shop/shop6.jpg" alt="" width="176" height="120" /></a>
  89.                     <a href="">美女性感写真海报墙艺术装饰画贴画图</a>
  90.                     <div>
  91.                         <span>&yen; 888</span>
  92.                         <span>美女</span>
  93.                     </div>
  94.                 </div>
  95.                 <div class="intro">
  96.                     <a href=""><img src="static/images/shop/shop7.jpg" alt="" width="176" height="120" /></a>
  97.                     <a href="">美女性感写真海报墙艺术装饰画贴画图</a>
  98.                     <div>
  99.                         <span>&yen; 888</span>
  100.                         <span>美女</span>
  101.                     </div>
  102.                 </div>
  103.             </div>
  104.             <!-- 右侧快速入口 -->
  105.             <div class="quick-entry">
  106.                 <div class="quick-1">
  107.                     <a href=""><img src="static/images/ad/1.png" alt="" /></a>
  108.                     <a href=""><img src="static/images/ad/2.png" alt="" /></a>
  109.                     <a href=""><img src="static/images/ad/3.png" alt="" /></a>
  110.                     <a href=""><img src="static/images/ad/4.png" alt="" /></a>
  111.                 </div>
  112.                 <div class="quick-2">
  113.                     <a href=""><img src="static/images/ad/image.png" alt="" /></a>
  114.                     <a href=""><img src="static/images/ad/ad2.jpg" alt="" /></a>
  115.                 </div>
  116.             </div>
  117.         </div>
  118.     </div>
  119. </body>
  121. </html>

css样式

  1. /* 导入公共初始化样式 */
  2. @import "public_reset.css";
  4. .public_headline {
  5.     padding: 20px;
  6.     text-align: center;
  7. }
  8. .public_headline span {
  9.     font-size: 24px;
  10.     font-weight: bold;
  11.     margin-bottom: 10px;
  12.     border-bottom: 4px solid red;
  13. }
  15. /* 商品 */
  16. .public_second_hand {
  17.     width: 1200px;
  18.     padding: 10px;
  19.     box-sizing: border-box;
  20.     margin: auto;
  21.     border: 1px solid #cccccc;
  22.     border-radius: 5px;
  23. }
  24. .public_second_hand:hover {
  25.     box-shadow: 0 0 10px #cccccc;
  26. }
  27. .public_second_hand > .title1 {
  28.     height: 50px;
  29.     border-bottom: 1px solid #cccccc;
  30. }
  31. /* 标题1 */
  32. .public_second_hand > .title1 > a {
  33.     font-size: 24px;
  34.     margin-right: 15px;
  35. }
  36. .public_second_hand > .title1 > span {
  37.     color: red;
  38. }
  39. /* 标题2 */
  40. .public_second_hand > .title2 {
  41.     height: 50px;
  42. }
  43. .public_second_hand > .title2 > span {
  44.     font-size: 24px;
  45.     color: red;
  46. }
  47. .public_second_hand > .title2 > a {
  48.     padding-left: 15px;
  49. }
  51. /* 商品列表 */
  52. .public_second_hand > .goods {
  53.     display: grid;
  54.     grid-template-columns: 2fr 1fr;
  55.     grid-template-rows: auto;
  56.     grid-gap: 10px;
  57. }
  58. .public_second_hand > .goods > .goods-list {
  59.     display: grid;
  60.     grid-template-columns: repeat(4, 1fr);
  61.     grid-template-rows: repeat(2, 1fr);
  62.     grid-gap: 10px;
  63. }
  64. .public_second_hand > .goods > .quick-entry {
  65.     display: grid;
  66.     grid-template-columns: 1fr;
  67.     grid-template-rows: 2fr 1fr;
  68.     grid-gap: 10px;
  69. }
  70. .public_second_hand > .goods > .quick-entry > .quick-1 {
  71.     display: grid;
  72.     grid-template-columns: repeat(2, 1fr);
  73.     grid-template-rows: repeat(2, 1fr);
  74.     grid-gap: 10px;
  75. }
  76. .public_second_hand > .goods > .goods-list > .intro {
  77.     display: flex;
  78.     flex-flow: column nowrap;
  79.     justify-content: space-between;
  80. }
  81. .public_second_hand > .goods > .goods-list > .intro img {
  82.     border: 1px solid #cccccc;
  83.     border-radius: 5px;
  84. }
  85. .public_second_hand > .goods > .goods-list > .intro > div {
  86.     display: flex;
  87. }
  88. .public_second_hand > .goods > .goods-list > .intro > div > span:first-child {
  89.     color: red;
  90. }
  91. .public_second_hand > .goods > .goods-list > .intro > div > span:last-child {
  92.     color: #ffffff;
  93.     background-color: #55ce9f;
  94.     padding: 0 5px;
  95.     margin-left: auto;
  96. }
  97. .public_second_hand > .goods > .quick-entry > .quick-2 {
  98.     display: flex;
  99.     flex-flow: column nowrap;
  100.     justify-content: space-between;
  101. }
上一条：1227作业+Flex实现移动端的布局+10期线上班下一条：干货 | PHP就该这么学！
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多