search

博客列表 >CSS基础Grid布局公共二手交易区组件-PHP培训十期线上班 学号：510251 12月28日作业

CSS基础Grid布局公共二手交易区组件-PHP培训十期线上班 学号：510251 12月28日作业

赵大叔
赵大叔原创
2020年01月02日 11:03:57755浏览

Grid布局公共二手交易区组件

布局思路

1.1 整体划为一个四行二列网格：

大标题 大标题：第1行全部
标题1 标题1：第2行全部
标题2 标题2：第3行全部
商品展示 快速入口：商品展示，第4行，第1列。快速入口，第4行，第2列

1.2 商品展示：第4行，第1列，再次划分为两行四列网格

1.3 快速入口：第4行，第2列，再次划分为四行两列网格

HTML代码和CSS样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid布局公共二手交易区组件</title>
  6. <!--    初始化样式-->
  7.     <link rel="stylesheet" href="public_reset.css">
  8. <!--    大标题样式-->
  9.     <link rel="stylesheet" href="public_headerline.css">
  10.     <style>
  11.         /*网格布局*/
  12.         body * {
  13.             /*outline: 1px dashed red;*/
  14.         }
  16.         body {
  17.             width: 1200px;
  18.             display: grid;
  19.             /*padding: 10px;*/
  20.             margin: auto;
  21.             box-sizing: border-box;
  22.             /*打格子，四行二列*/
  23.             grid-template-columns: 760px 440px;
  24.             grid-template-rows: 92px 32px 60px 440px;
  25.             /*grid-gap: 5px;*/
  26.         }
  28.         body {
  29.             /*网格区域命名*/
  30.             grid-template-areas:
  31.         'headerline headerline'
  32.         'title1 title1'
  33.         'title2 title2'
  34.         'goods-list quick-entry';
  35.         }
  37.         .public-headerline {
  38.             /*大标题命名*/
  39.             grid-area: headerline;
  40.         }
  41.         .title1 {
  42.              grid-area: title1;
  43.             /*标题1下边线*/
  44.              border-bottom: 1px solid #ccc;
  45.          }
  46.         .title1 > a{
  47.             font-size: 23px;
  48.             margin-right: 20px;
  49.         }
  50.         .title1 > span{
  51.             color:red;
  52.         }
  54.         .title2 {
  55.             grid-area: title2;
  56.         }
  57.         .title2 > span{
  58.             color:red;
  59.             font-size: 23px;
  60.         }
  61.         .title2 > a{
  62.             padding-left:20px;;
  63.         }
  65.        .goods-list {
  66.            grid-area: goods-list;
  67.            display: grid;
  68.            /*再将goods-list划分为两行四列网格*/
  69.            grid-template-columns: repeat(4,178px);
  70.            grid-template-rows: repeat(2,200px);
  71.            /*行间距15px，列间距10px*/
  72.            grid-gap: 15px 10px;
  73.         }
  74.         .goods-list img{
  75.             border-radius: 5px;
  76.             border: 1px solid #ccc;
  77.             display: block;
  78.         }
  79.         .goods-list a{
  80.             display: block;
  81.             margin-bottom: 13px;
  82.         }
  83.         .goods-list img:hover{
  84.             box-shadow: 0 0 8px #ccc;
  85.         }
  86.         .goods-list > .intro > div{
  87.             display: flex;
  88.             /*价格文字两端对齐*/
  89.             justify-content: space-between;
  90.         }
  91.         .goods-list > .intro > div > span:first-of-type{
  92.             color:red;
  93.         }
  94.         .goods-list > .intro > div > span:last-of-type{
  95.             background: #55a532;
  96.             color: white;
  97.             padding: 0 3px;
  98.         }
  100.        .quick-entry {
  101.            grid-area: quick-entry;
  102.            display: grid;
  103.            /*再将quick-entry划分为四行两列网格*/
  104.            grid-template-columns: repeat(2,190px);
  105.            grid-template-rows: 130px 130px 60px 60px;
  106.            /*行间距12px，列间距25px*/
  107.            grid-gap: 12px 25px;
  108.            /*网格区域命名*/
  109.            grid-template-areas:
  110.            'img1 img2'
  111.            'img3 img4'
  112.            'img5 img5'
  113.            'img6 img6';
  114.         }
  116.         .quick-entry a:nth-of-type(5){
  117.             grid-area: img5;
  118.         }
  119.         .quick-entry a:last-of-type{
  120.             grid-area: img6;
  121.         }
  124.     </style>
  125. </head>
  126. <body>
  128. <!--大标题-->
  129. <div class="public-headerline">
  130.     <span>二手交易</span>
  131. </div>
  133. <div class="title1">
  134.     <a href="">抢好货</a>
  135.     <span>0低价，便捷，安全，快速</span>
  136. </div>
  138. <div class="title2">
  139.     <span>热门分类</span>
  140.     <a href="">美女写真</a>
  141.     <a href="">日本美女</a>
  142.     <a href="">美国美女</a>
  143.     <a href="">国内美女</a>
  144.     <a href="">AV美女</a>
  145. </div>
  147. <div class="goods-list">
  148.     <!--            商品简介-->
  149.     <div class="intro">
  150.         <a href=""><img src="../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  151.         <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  152.         <div>
  153.             <span>&yen; 333</span>
  154.             <span>美女</span>
  155.         </div>
  156.     </div>
  157.     <div class="intro">
  158.         <a href=""><img src="../static/images/shop/shop2.jpg" alt="" width="176" height="120"></a>
  159.         <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  160.         <div>
  161.             <span>&yen; 333</span>
  162.             <span>美女</span>
  163.         </div>
  164.     </div>
  165.     <div class="intro">
  166.         <a href=""><img src="../static/images/shop/shop3.jpg" alt="" width="176" height="120"></a>
  167.         <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  168.         <div>
  169.             <span>&yen; 333</span>
  170.             <span>美女</span>
  171.         </div>
  172.     </div>
  173.     <div class="intro">
  174.         <a href=""><img src="../static/images/shop/shop4.jpg" alt="" width="176" height="120"></a>
  175.         <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  176.         <div>
  177.             <span>&yen; 333</span>
  178.             <span>美女</span>
  179.         </div>
  180.     </div>
  181.     <div class="intro">
  182.         <a href=""><img src="../static/images/shop/shop5.jpg" alt="" width="176" height="120"></a>
  183.         <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  184.         <div>
  185.             <span>&yen; 333</span>
  186.             <span>美女</span>
  187.         </div>
  188.     </div>
  189.     <div class="intro">
  190.         <a href=""><img src="../static/images/shop/shop6.jpg" alt="" width="176" height="120"></a>
  191.         <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  192.         <div>
  193.             <span>&yen; 333</span>
  194.             <span>美女</span>
  195.         </div>
  196.     </div>
  197.     <div class="intro">
  198.         <a href=""><img src="../static/images/shop/shop7.jpg" alt="" width="176" height="120"></a>
  199.         <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  200.         <div>
  201.             <span>&yen; 333</span>
  202.             <span>美女</span>
  203.         </div>
  204.     </div>
  205.     <div class="intro">
  206.         <a href=""><img src="../static/images/shop/shop8.jpg" alt="" width="176" height="120"></a>
  207.         <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  208.         <div>
  209.             <span>&yen; 333</span>
  210.             <span>美女</span>
  211.         </div>
  212.     </div>
  213. </div>
  215. <div class="quick-entry">
  216.     <a href=""><img src="../static/images/ad/1.png" alt=""></a>
  217.     <a href=""><img src="../static/images/ad/1.png" alt=""></a>
  218.     <a href=""><img src="../static/images/ad/1.png" alt=""></a>
  219.     <a href=""><img src="../static/images/ad/1.png" alt=""></a>
  220.     <a href=""><img src="../static/images/ad/image.png" alt=""></a>
  221.     <a href=""><img src="../static/images/ad/ad2.jpg" alt=""></a>
  223. </div>
  224. </body>
  225. </html>

效果图

手抄Grid布局基础知识


上一条：微信小程序生成带参数的二维码以及小程序码下一条：二手商品交易和评论与回复的组件（1226前端开发学习）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多