简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Grid布局实现二手商品交易组件-20191228作业
Blogger Information
Blog 7
fans 0
comment 0
visits 4729
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布局实现二手商品交易组件-20191228作业
涡流
Original
642 people have browsed it

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!--引入阿里字体图标库的css-->
  6.     <link rel="stylesheet" href="../iconfont/iconfont.css">
  7.     <link rel="stylesheet" href="second-hand.css">
  8.     <title>二手商品交易</title>
  9. </head>
  10. <body>
  12.     <!-- 页眉 -->
  13.     <header>
  14.         <a href="">抢好货</a>
  15.         <span>0低价，便捷，安全，快速</span>
  16.     </header>
  17.     <!-- 导航 -->
  18.     <nav>
  19.         <span>热门分类</span>
  20.         <a href="">家用电器</a>
  21.         <a href="">日常百货</a>
  22.         <a href="">运动器械</a>
  23.         <a href="">户外装备</a>
  24.     </nav>
  25.     <!-- 主要内容 -->
  26.     <main>
  27.         <!-- 左边区域，这里采用grid布局 -->
  28.         <div class="left">
  29.             <div class="detail">
  30.                 <img src="img/shop6.jpg" alt="">
  31.                 <span>grid-template-colums：基于列定义网络线的名与与轨道大小</span>
  32.                 <div class="summary">
  33.                     <span>$ 333</span>
  34.                     <span>电器</span>
  35.                 </div>
  36.             </div>
  37.             <div class="detail">
  38.                 <img src="img/shop6.jpg" alt="">
  39.                 <span>grid-template-rows：基于行定义网络线的名与与轨道大小</span>
  40.                 <div class="summary">
  41.                     <span>$ 333</span>
  42.                     <span>电器</span>
  43.                 </div>
  44.             </div>
  45.             <div class="detail">
  46.                 <img src="img/shop6.jpg" alt="">
  47.                 <span>grid-template-colums：基于列定义网络线的名与与轨道大小</span>
  48.                 <div class="summary">
  49.                     <span>$ 333</span>
  50.                     <span>电器</span>
  51.                 </div>
  52.             </div>
  53.             <div class="detail">
  54.                 <img src="img/shop6.jpg" alt="">
  55.                 <span>grid-template-rows：基于行定义网络线的名与与轨道大小</span>
  56.                 <div class="summary">
  57.                     <span>$ 333</span>
  58.                     <span>电器</span>
  59.                 </div>
  60.             </div>
  61.             <div class="detail">
  62.                 <img src="img/shop6.jpg" alt="">
  63.                 <span>grid-template-colums：基于列定义网络线的名与与轨道大小</span>
  64.                 <div class="summary">
  65.                     <span>$ 333</span>
  66.                     <span>电器</span>
  67.                 </div>
  68.             </div>
  69.             <div class="detail">
  70.                 <img src="img/shop6.jpg" alt="">
  71.                 <span>grid-template-rows：基于行定义网络线的名与与轨道大小</span>
  72.                 <div class="summary">
  73.                     <span>$ 333</span>
  74.                     <span>电器</span>
  75.                 </div>
  76.             </div>
  77.             <div class="detail">
  78.                 <img src="img/shop6.jpg" alt="">
  79.                 <span>grid-template-colums：基于列定义网络线的名与与轨道大小</span>
  80.                 <div class="summary">
  81.                     <span>$ 333</span>
  82.                     <span>电器</span>
  83.                 </div>
  84.             </div>
  85.             <div class="detail">
  86.                 <img src="img/shop6.jpg" alt="">
  87.                 <span>grid-template-rows：基于行定义网络线的名与与轨道大小</span>
  88.                 <div class="summary">
  89.                     <span>$ 333</span>
  90.                     <span>电器</span>
  91.                 </div>
  92.             </div>
  93.         </div>
  94.         <!-- 右边区域，6张图片，grid布局 -->
  95.         <div class="right">
  96.             <img src="img/1.png" alt="">
  97.             <img src="img/2.png" alt="">
  98.             <img src="img/3.png" alt="">
  99.             <img src="img/4.png" alt="">
  100.             <img src="img/image.png" alt="">
  101.             <img src="img/ad2.jpg" alt="">
  102.         </div>
  103.     </main>
  104. </body>
  105. </html>

css代码

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     /* outline: 1px solid green; */
  5.     font-size: 13px;
  6. }
  8. a {
  9.     text-decoration: none;
  10. }
  12. /* 图片宽度设定占用父容的宽度 */
  13. img {
  14.     width: 100%;
  15. }
  17. body {
  18.     width: 1200px;
  19.     margin: 0 auto;
  20. }
  22. header {
  23.     padding: 10px;
  24.     border-bottom: 1px solid grey;
  25. }
  27. header > a {
  28.     font-size: 23px;
  29. }
  31. header > span {
  32.     margin: 15px;
  33.     color: red;
  34. }
  36. nav {
  37.     padding: 10px;
  38.     margin-bottom: 10px;
  39. }
  41. nav > span {
  42.     font-size: 23px;
  43.     color: red;
  44. }
  46. nav > a {
  47.     margin-left: 10px;
  48. }
  50. /* 主体区域，网格，左宽2fr，右宽1fr */
  51. main {
  52.     display: grid;
  53.     grid-template-columns: 2fr 1fr;
  54.     grid-gap: 10px;
  55. }
  57. /* 左：4列2行等分 */
  58. main > .left {
  59.     /* width: 800px; */
  60.     display: grid;
  61.     grid-template-columns: repeat(4,1fr);
  62.     grid-template-rows: repeat(2, 1fr);
  63.     grid-gap: 10px;
  64. }
  66. /* 单元格采用grid布局，1列3行，行高自动 */
  67. main > .left > .detail {
  68.     display: grid;
  69.     /* grid-template-rows: repeat(3, auto); */
  70.     grid-gap: 10px;
  71. }
  73. /* 图片宽设定100%比像素更好 */
  74. main > .left > .detail > img {
  75.     /* width: 100%; */
  76.     border-radius: 5px;
  77. }
  79. /* 价格所在行设定为FLEX，便于设置样式：两端对齐 */
  80. main > .left > .detail > .summary {
  81.     display: flex;
  82.     justify-content: space-between;
  83. }
  85. main > .left > .detail > .summary > span:first-of-type {
  86.     color: red;
  87. }
  89. main > .left > .detail > .summary > span:last-of-type {
  90.     padding: 0 5px;
  91.     background-color: green;
  92.     border-radius: 3px;
  93. }
  95. main > .left > .detail > .summary > span:last-of-type:hover {
  96.     background-color: blue;
  97.     cursor: pointer;
  98.     color: white;
  99. }
  101. /* 右：2列4行，行高自动，第3、4行各独占一行 */
  102. main > .right {
  103.     display: grid;
  104.     grid-template-columns: repeat(2, 1fr);
  105.     grid-template-rows: repeat(4, auto);
  106.     /* grid-template-areas: "ad1 ad2" "ad3 ad4" "ad5 ad5" "ad6 ad6"; */
  107.     grid-gap: 10px;
  108. }
  110. main > .right > img:nth-child(5) {
  111.     grid-column: 1 / -1;
  112. }
  114. main > .right > img:nth-child(6) {
  115.     grid-column: 1 / -1;
  116. }

抄写：

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：其实下面的图文列表用grid就可以了, 不必整体用的
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！