search

博客列表 >Grid布局实现评论与回复（1228作业）

Grid布局实现评论与回复（1228作业）

暴风战斧
暴风战斧原创
2020年01月09日 21:58:04511浏览

手写的grid.md课件

Grid实现评论回复组件

思路与方案

对照评论回复组件效果图，最先想到的是可以划分为多行，然后分两列，把元素层级做一些调整，一层层对应到网格中去；
在实现的过程中，因为对flex方案印象最深刻，所以在写html的时候还是把元素层级划分太多了，写css时发现实在难以进行，于是赶紧把元素层级进行调整，基本写成同级了，这样再写css时特别舒服了，把元素一一放进网格中去，然后一个一个设置样式，及时查看效果进行调整！

本次作业总结

这次作业较flex布局是突破性的，因为最开始写的时候还是很受flex影响，差点不知道如何下手，看到效果图这么多元素差点以为我要画一个很密集的网格，后来复习了下课件，快速回顾了视频，再次整理下思路，最终一点点完成了效果。感觉自己掌握了flex和grid两大布局技术了，很开心！这一次在grid中其实混用了flex，最后的“发表时间”和“点赞回复”我是在grid中用的flex布局，两端对齐一步到位！从不会到跟着写，再到自己实现，感觉真的能学到东西，开心！

效果图

缩小

html代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>评论与回复Grid实现</title>
  6.     <link rel="stylesheet" href="public_comment_reply.css">
  7.     <link rel="stylesheet" href="../../1226/static/font/iconfont.css">
  8.     <link rel="stylesheet" href="../../1226/componets/public/public_reset.css">
  9. </head>
  10. <body>
  11. <div class="container">
  12.     <!--评论区-->
  13.     <span>我要评论</span>
  14.     <label for="comment">
  15.         <img src="../../1226/static/images/user.png" alt="">
  16.     </label>
  17.     <textarea name="" id="comment" ></textarea>
  18.     <button>发表评论</button>
  19.     <!--回复区-->
  20.     <span>最新回复</span>
  21.     <span><img src="../../1226/static/images/user.png" alt=""></span>
  22.     <div>
  23.         <span>用户昵称</span>
  24.         <span>留言内容：php中文网，是一个有温度，有思想的学习平台</span>
  25.         <div>
  26.             <span>2019-12-12 15:34:23发表</span>
  27.             <span><i class="iconfont icon-dianzan"></i>回复</span>
  28.         </div>
  29.     </div>
  30.     <span><img src="../../1226/static/images/user.png" alt=""></span>
  31.     <div>
  32.         <span>用户昵称</span>
  33.         <span>留言内容：php中文网，是一个有温度，有思想的学习平台</span>
  34.         <div>
  35.             <span>2019-12-12 15:34:23发表</span>
  36.             <span><i class="iconfont icon-dianzan"></i>回复</span>
  37.         </div>
  38.     </div>
  39.     <span><img src="../../1226/static/images/user.png" alt=""></span>
  40.     <div>
  41.         <span>用户昵称</span>
  42.         <span>留言内容：php中文网，是一个有温度，有思想的学习平台</span>
  43.         <div>
  44.             <span>2019-12-12 15:34:23发表</span>
  45.             <span><i class="iconfont icon-dianzan"></i>回复</span>
  46.         </div>
  47.     </div>
  48. </div>
  49. </body>
  50. </html>
css代码
  1. /*评论与回复*/
  2. * {
  3.     background-color: #fff;
  4. }
  6. img {
  7.     width: 60px;
  8.     border-radius: 5px;
  9.     box-shadow: 0 0 5px #cccccc;
  10. }
  12. /** :not(body) {*/
  13.     /*outline: 1px solid red;*/
  14. /*}*/
  15. .container {
  16.     padding: 10px;
  17.     width: auto;
  18.     /*转为grid布局*/
  19.     display: grid;
  20.     grid-template-columns: 1fr 9fr;
  21.     grid-template-rows: 60px 150px 60px 60px 1fr 1fr 1fr;
  22.     grid-gap: 10px;
  23.     grid-template-areas:
  24.             'a a'
  25.             'b1 b2'
  26.             'c c'
  27.             'd d'
  28.             'e1 e2'
  29.             'f1 f2'
  30.             'g1 g2';
  31. }
  32. /*评论区*/
  33. .container > span:nth-of-type(1) {
  34.     grid-area: a;
  35.     font-size: 14px;
  36.     font-weight: bold;
  37.     padding-top: 20px;
  38.     border-top: 1px solid #cccccc;
  39. }
  40. .container > label {
  41.     display: grid;
  42.     align-self: start;
  43. }
  45. .container > label > img {
  46.     display: grid;
  47.     grid-area: b1;
  48. }
  50. .container > textarea {
  51.     grid-area: b2;
  52.     resize: none;
  53.     border: 1px solid #cccccc;
  54.     /*height: auto;*/
  55.     /*min-width: 365px;*/
  56.     /*max-width: 1200px;*/
  57.     /*justify-content: space-between;*/
  58. }
  59. .container > textarea:hover {
  60.     box-shadow: 0 0 5px #cccccc;
  61. }
  63. .container > button {
  64.     grid-area: c;
  65.     width: 150px;
  66.     height: 40px;
  67.     border: none;
  68.     color: white;
  69.     background-color: red;
  70.     align-self: center;
  71.     justify-self: end;
  73. }
  75. .container > button:hover {
  76.     color: #ffffff;
  77.     background-color: #178cee;
  78.     cursor: pointer;
  79.     box-shadow: 0 0 10px #cccccc;
  80. }
  82. .container > span:nth-of-type(2) {
  83.     grid-area: d;
  84.     font-size: 14px;
  85.     font-weight: bold;
  86.     padding-top: 20px;
  87. }
  88. /*回复内容*/
  89. .container > span:nth-of-type(3) {
  90.     display: grid;
  91.     align-self: center;
  92. }
  93. .container > span:nth-of-type(3) > img {
  94.     display: grid;
  95.     grid-area: e1;
  96. }
  98. .container > div:nth-of-type(1) {
  99.     display: grid;
  100.     grid-area: e2;
  101.     height: 120px;
  102.     align-items: center;
  103. }
  105. .container > div:nth-of-type(1) > div {
  106.     display: flex;
  107.     justify-content: space-between;
  108. }
  110. .container > span:nth-of-type(4) {
  111.     display: grid;
  112.     align-self: center;
  113. }
  114. .container > span:nth-of-type(4) > img {
  115.     display: grid;
  116.     grid-area: f1;
  117. }
  119. .container > div:nth-of-type(2) {
  120.     display: grid;
  121.     grid-area: f2;
  122.     align-items: center;
  123. }
  125. .container > div:nth-of-type(2) > div {
  126.     display: flex;
  127.     justify-content: space-between;
  128. }
  130. .container > span:nth-of-type(5) {
  131.     display: grid;
  132.     align-self: center;
  133. }
  134. .container > span:nth-of-type(5) > img {
  135.     display: grid;
  136.     grid-area: g1;
  137. }
  139. .container > div:nth-of-type(3) {
  140.     display: grid;
  141.     grid-area: g2;
  142.     align-items: center;
  143. }
  145. .container > div:nth-of-type(3) > div {
  146.     display: flex;
  147.     justify-content: space-between;
  148. }
  150. .container i {
  151.     font-size: 23px;
  152.     color: red;
  153.     margin-right: 4px;
  154. }
上一条：PHP 1.3作业下一条：20-01-07作业 综合实战 【网站后台设置】【安全设置】开发
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多