search

博客列表 >Grid复写二手交易模块（1228）

Grid复写二手交易模块（1228）

建国
建国原创
2019年12月30日 15:18:15564浏览

练习内容

使用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.     <link rel="stylesheet" href="./style.css">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12. <div class="container">
  13.     <div class="title">
  14.         <a href="">抢好货</a>
  15.         <span>0低价, 便捷,安全,快速</span>
  16.     </div>
  17.     <div class="nav">
  18.         <span>热门分类</span>
  19.         <div>
  20.             <a href="">美女写真</a>
  21.             <a href="">日本美女</a>
  22.             <a href="">美国美女</a>
  23.             <a href="">国内美女</a>
  24.             <a href="">AV美女</a>
  25.         </div>
  26.     </div>
  27.     <div class="goods-list">
  28.         <div class="intro">
  29.             <a href=""><img src="./static/images/shop/shop1.jpg" alt=""></a>
  30.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  31.             <div>
  32.                 <span>&yen;333</span>
  33.                 <span>美女</span>
  34.             </div>
  35.         </div>
  36.         <div class="intro">
  37.             <a href=""><img src="./static/images/shop/shop1.jpg" alt=""></a>
  38.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  39.             <div>
  40.                 <span>&yen;333</span>
  41.                 <span>美女</span>
  42.             </div>
  43.         </div>
  44.         <div class="intro">
  45.             <a href=""><img src="./static/images/shop/shop1.jpg" alt=""></a>
  46.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  47.             <div>
  48.                 <span>&yen;333</span>
  49.                 <span>美女</span>
  50.             </div>
  51.         </div>
  52.         <div class="intro">
  53.             <a href=""><img src="./static/images/shop/shop1.jpg" alt=""></a>
  54.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  55.             <div>
  56.                 <span>&yen;333</span>
  57.                 <span>美女</span>
  58.             </div>
  59.         </div>
  60.         <div class="intro">
  61.             <a href=""><img src="./static/images/shop/shop1.jpg" alt=""></a>
  62.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  63.             <div>
  64.                 <span>&yen;333</span>
  65.                 <span>美女</span>
  66.             </div>
  67.         </div>
  68.         <div class="intro">
  69.             <a href=""><img src="./static/images/shop/shop1.jpg" alt=""></a>
  70.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  71.             <div>
  72.                 <span>&yen;333</span>
  73.                 <span>美女</span>
  74.             </div>
  75.         </div>
  76.         <div class="intro">
  77.             <a href=""><img src="./static/images/shop/shop1.jpg" alt=""></a>
  78.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  79.             <div>
  80.                 <span>&yen;333</span>
  81.                 <span>美女</span>
  82.             </div>
  83.         </div>
  84.         <div class="intro">
  85.             <a href=""><img src="./static/images/shop/shop1.jpg" alt=""></a>
  86.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  87.             <div>
  88.                 <span>&yen;333</span>
  89.                 <span>美女</span>
  90.             </div>
  91.         </div>
  92.     </div>
  93.     <div class="quick-entry">
  94.         <a><img src="./static/images/ad/1.png" alt=""></a>
  95.         <a><img src="./static/images/ad/2.png" alt=""></a>
  96.         <a><img src="./static/images/ad/3.png" alt=""></a>
  97.         <a><img src="./static/images/ad/4.png" alt=""></a>
  98.         <img src="./static/images/ad/image.png" alt="">
  99.         <img src="./static/images/ad/ad2.jpg" alt="">
  100.     </div>
  101. </div>
  102. </body>
  103. </html>

css部分

  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5. }
  7. body {
  8.     background-color: #efefef;
  9. }
  11. a {
  12.     text-decoration: none;
  13.     color: black;
  14. }
  16. .container {
  17.     width: 1200px;
  18.     margin: auto;
  19.     display: grid;
  20.     grid-template-columns: 2fr 1fr;
  21.     grid-template-rows: repeat(2, 60px) 460px;
  22.     background-color: #fff;
  23.     border-radius: 10px;
  24.     padding: 0 20px 20px 20px;
  25.     grid-column-gap: 20px;
  26.     box-sizing: border-box;
  27. }
  29. /* 顶部 */
  30. .container > .title {
  31.     grid-column-start: span 2;
  32.     display: flex;
  33.     align-items: center;
  34.     border-bottom: 1px solid gray;
  35. }
  37. .container > .title > a {
  38.     font-size: 24px;
  39.     font-weight: bold;
  40. }
  42. .container > .title > span {
  43.     padding: 10px 0 0 10px;
  44.     color: red;
  45. }
  47. /* 中部 */
  48. .container > .nav {
  49.     grid-column-start: span 2;
  50.     display: flex;
  51.     align-items: center;
  52. }
  54. .container > .nav > span {
  55.     font-size: 24px;
  56.     color: red;
  57.     font-weight: bold;
  58. }
  60. .container > .nav > div {
  61.     display: flex;
  62.     padding: 15px 0 0 20px;
  63. }
  65. .container > .nav > div > a {
  66.     margin-right: 20px;
  67.     font-size: 16px;
  68. }
  70. /* 列表区 */
  71. .container > .goods-list {
  72.     display: grid;
  73.     grid-template-columns: repeat(4, auto);
  74.     grid-template-rows: repeat(2, auto);
  75.     grid-gap: 20px;
  76. }
  77. /*单个商品*/
  78. .container > .goods-list > .intro {
  79.     display: flex;
  80.     flex-direction: column;
  81.     align-items: center;
  82.     justify-content: space-between;
  83.     flex-shrink: 1;
  84. }
  85. /*商品图片*/
  86. .container > .goods-list > .intro > :first-child > img {
  87.     width: 176px;
  88.     height: 120px;
  89.     border-radius: 5px;
  90. }
  92. .container > .goods-list > .intro > div {
  93.     display: flex;
  94.     width: 100%;
  95.     justify-content: space-between;
  96.     font-size: 14px;
  97. }
  99. .container > .goods-list > .intro > div > :first-child {
  100.     color: red;
  101. }
  103. .container > .goods-list > .intro > div > :last-child {
  104.     background-color: #55ce9f;
  105.     padding: 0 3px;
  106.     border-radius: 2px;
  107.     color: white;
  108. }
  110. /* 右侧快速入口 */
  111. .container > .quick-entry {
  112.     display: grid;
  113.     grid-template-columns: repeat(2, 1fr);
  114.     grid-template-rows: 130px 130px 60px 60px;
  115.     justify-content: space-between;
  116.     align-content: space-between;
  117.     grid-gap: 20px;
  118. }
  120. .container > .quick-entry > a > img {
  121.     width: 100%;
  122.     height: 130px;
  123. }
  125. .container > .quick-entry > img {
  126.     grid-column-start: span 2;
  127.     width: 100%;
  128. }

总结

还是有太多不明白的地方，对grid的容器属性和项目属性不了解，导致浪费了很多时间，做好后返回来一看，其实挺简单的，关键是思路清晰，知道哪里需要什么样的布局，另外搭配flex使用效果会更好

效果图

手写grid容器属性与部分项目属性


上一条：12-28作业：Grid布局版 商品交易区下一条：1227作业+Flex实现移动端的布局+10期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多