简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Grid复写二手交易模块（1228）
Blogger Information
Blog 7
fans 0
comment 0
visits 4280
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
Grid复写二手交易模块（1228）
建国
Original
559 people have browsed it

练习内容

使用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容器属性与部分项目属性


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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！