search

博客列表 >Grid布局之旅-评论回复案例-PHP培训十期线上班

Grid布局之旅-评论回复案例-PHP培训十期线上班

方小生
方小生原创
2020年01月01日 21:18:01682浏览

12月28-29号作业

从第一堂课开始，一直深深的记得老师说过的一句话，”归零心态”;无论自己是否学过，从开始学习那一刻就要将自己归零。

好了，这次就开始了Grid布局之旅

1.Grid网格布局基本知识

网格布局基础知识

2.评论回复案例（Grid布局）

先看整体效果，然后我会讲一下整体布局思路，给大家参考一下。

整体效果

效果图

一开始，拿到这个案例，使Grid布局，我是不知从何下手。分析结构感觉像多行一列，没有思绪（之前没使用Grid布局），后来想Grid布局得要把想成表格，就开始打格子先不想内容，就有了如下代码结构：

开始想它是6行3列，就放了18个类名item的div，先把格子排列出来；然后再填充内容，可以看到如下图结构（蓝色区域（6行3列）），这样就将内容分割出来了，需要注意的：

1.有些地方需要横跨多列，在网格项目中使用grid-column：起始列线编号 / 停止列线编号|横跨列数，例如：textarea所在单元格横跨2列 grid-column:2 / 4或者这样写grid-column:2 / span 2;

2.某个单元格内容需要垂直居中，比如点赞块，使用align-self：center，注意这是容器下项目的属性；如果对容器里面的单元格内容做垂直居中，使用align-items:center;如果对容器里面整体网格区域做垂直居中，使用align-content:center。

3.有些细小的区域内容对齐还可以采用flex布局，例如回复信息那块，要求每个文本独占一行，可以让其变成flex，然后使用flex-flow做对齐;
上面三点是我这次案例感觉使用比较多的部分

结构图

结构图

代码

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Grid基础</title>
  9.     <link rel="stylesheet" href="static/font/iconfont.css">
  10.     <style>
  11.         body>div>div{
  12.             /*outline: 1px dashed red;*/
  13.         }
  14.         /*评论与回复*/
  15.         .comment-replay{
  16.             background-color: #fff;
  17.             display: grid;
  18.             grid-template-columns: 66px auto 60px;
  19.             grid-template-rows: auto;
  20.             grid-gap:10px 20px;
  21.             padding:15px;
  22.         }
  23.         /************评论区域*************/
  24.         /*标题*/
  25.         .comment-replay>.title{
  26.             grid-column: 1 / 4;
  27.             height: 80px;
  28.         }
  29.             /*标题内容*/
  30.         .comment-replay>.title>h3{
  31.             padding:10px 0;
  33.         }
  34.         .comment-replay>.title:first-of-type>h3{
  35.             padding-top: 20px;
  36.             border-top:1px solid #ccc;
  37.             box-sizing: border-box;
  38.         }
  39.         /*评论者头像*/
  40.         .comment-replay>.comment-img img{
  41.             width: 60px;
  42.             height: 60px;
  43.             border-radius: 5px;
  44.         }
  45.         /*评论区域*/
  46.         .comment-replay>.comment-fill{
  47.             grid-column: 2 / 4;
  48.             height: 200px;
  49.             padding-right: 20px;
  50.         }
  51.             /*评论填写区*/
  52.         .comment-replay>.comment-fill textarea{
  53.             width: 100%;
  54.             height: 200px;
  55.             resize:none;
  56.             border-radius: 5px;
  57.             box-sizing: border-box;
  58.         }
  59.             /*填写区鼠标移上特效*/
  60.         .comment-replay>.comment-fill textarea:hover{
  61.             box-shadow: 0 0 5px #ccc;
  62.         }
  63.         /*评论按钮*/
  64.         .comment-replay>.comment-btn{
  65.             grid-column: 1 / span 3;
  66.             padding: 10px 0 0;
  67.         }
  68.         .comment-replay>.comment-btn button{
  69.             font-size: 14px;
  70.             background-color: #f64c59;
  71.             border: none;
  72.             color: white;
  73.             width: 150px;
  74.             height: 40px;
  75.             cursor: pointer;
  76.         }
  77.         /********回复区域**********/
  78.         .comment-replay>.reply-info{
  79.             display:flex;
  80.             flex-flow:column nowrap;
  81.             justify-content: space-between;
  82.             padding: 10px;
  83.         }
  84.         .comment-replay>.reply-img{
  85.             align-self: center;
  86.         }
  87.         .comment-replay>.dz{
  88.             align-self: center;
  89.         }
  90.         .comment-replay>.dz i{
  91.             color:red;
  92.             font-size:1.2rem;
  93.             margin-right: 5px;
  94.         }
  95.     </style>
  96. </head>
  97. <body>
  98. <div class="comment-replay">
  99.     <div class="title"><h3>我要评论</h3></div>
  100.     <div class="comment-img">
  101.         <label for="comment">
  102.             <img src="static/images/user.png" alt="">
  103.         </label>
  104.     </div>
  105.     <div class="comment-fill">
  106.         <textarea name="" id="comment" ></textarea>
  107.     </div>
  108.     <div class="comment-btn"><button>发表评论</button></div>
  109.     <div class="title"><h3>最新回复</h3></div>
  110.     <div class="comment-img reply-img">
  111.         <img src="static/images/user.png" alt="">
  112.     </div>
  113.     <div class="reply-info">
  114.         <span>用户昵称</span>
  115.         <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  116.         <span>2019-12-12 15:34:23发表</span>
  117.     </div>
  118.     <div class="dz">
  119.         <span><i class="iconfont icon-dianzan"></i>回复</span>
  120.     </div>
  121.     <div class="comment-img reply-img">
  122.         <img src="static/images/user.png" alt="">
  123.     </div>
  124.     <div class="reply-info">
  125.         <span>用户昵称</span>
  126.         <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  127.         <span>2019-12-12 15:34:23发表</span>
  128.     </div>
  129.     <div class="dz">
  130.         <span><i class="iconfont icon-dianzan"></i>回复</span>
  131.     </div>
  132. </div>
  134. </body>
  135. </html>

运行效果查看：Grid之旅-评论回复小案例

总结一下：这次是第一次使用Grid布局，还是有很多的不习惯，从布局思路到代码结构；也不知道是不是这样想的，反正效果达到了，希望能看到Grid布局很好的想法和案例代码，目前只能后面通过更多案例来揣摩了^ ^

上一条：1224_jquery节点查找、事件绑定、动画 第39课下一条：《Flex入门体验》2019-12-23作业笔记
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多