search

博客列表 >使用Grid布局，仿写二手交易网页

使用Grid布局，仿写二手交易网页

荔枝哥哥
荔枝哥哥原创
2020年01月03日 13:59:48574浏览

上代码，上图

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

grid-second-hand

总结

1 首先画好，大的布局，在调整行内小的布局。大的是4行2列。其中前三行，占满全部行。第四行，分为2列，第一列在画成2行4列，将元素填充。第四行的第二列在划分4行2列，将元素填充，注意倒数1和2元素占满2行。
2 一层套一层的盒子，画好格子后，开始写，基本上是没问题。

手写grid属性" class="reference-link">grid手写grid属性

上一条：仿手机端m.php.cn网站（1227前端开发作业）下一条：使用Grid布局来完成商品列表组件的展示样式--PHP线上培训十期1228
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
Dusk2020-01-03 15:45:372楼
你qq多少
荔枝哥哥2020-01-03 14:00:451楼
忘记上传手抄的作业，补上，不好意思，朱老师

相关文章

查看更多