Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Grid入门—Php第十期线上班
Blogger Information
Blog 22
fans 0
comment 0
visits 11742
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入门—Php第十期线上班
迫
Original
479 people have browsed it

12.28作业

前言

由于春节和疫情原因，现开始补交作业，争取尽快赶上进度

Grid布局完成回复页面


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="../static/font/iconfont.css">
  6.     <title>public_comment_reply</title>
  7.     <style>
  8.         .public_comment_reply{
  9.             padding: 20px;
  10.             box-sizing: border-box;
  11.             background-color: #fff;
  12.             display: grid;
  13.         }
  14.         .public_comment_reply>.comment{
  15.             display: grid;
  16.             grid-template-rows: 50px 250px 50px ;
  17.         }
  18.         .public_comment_reply>.comment img{
  19.             width: 60px;
  20.             height: 60px;
  21.             border-radius: 5px;
  22.             box-shadow: 1px 1px 3px #cccccc;
  23.         }
  24.         .public_comment_reply>.comment>h3{
  25.             padding: 10px 0;
  26.             border-top: 1px solid #cccccc;
  27.         }
  28.         .public_comment_reply>.comment >div{
  29.             padding: 15px;
  30.             height: 200px;
  31.             display: grid;
  32.         }
  33.         .public_comment_reply>.comment >div img{
  34.             /*align-self: center;*/
  35.         }
  36.         .public_comment_reply>.comment >.comment_area{
  37.             display: grid;
  38.             grid-template-areas: "a b";
  39.             grid-auto-columns:60px 1fr;
  40.             grid-auto-flow:row;
  41.         }
  42.         .public_comment_reply>.comment>.comment_area>div textarea{
  43.             height: 200px;
  44.             margin-left: 10px;
  45.             resize: none;
  46.             width: 100%;
  47.         }
  48.         .public_comment_reply>.comment>div textarea:hover{
  49.             box-shadow: 0 0 8px #888888;
  50.         }
  51.         .public_comment_reply>.comment>button{
  52.             width: 150px;
  53.             height: 40px;
  54.             font-size: 14px;
  55.             background-color: #f64c59;
  56.             border: none;
  57.             color: white;
  58.             justify-self: end;
  59.         }
  60.         .public_comment_reply>.comment>button:hover{
  61.             background-color: #178cee;
  62.             box-shadow: 0 0 8px #888888;
  63.             cursor: pointer;
  64.         }
  65.         .public_comment_reply>.reply{
  66.             display: grid;
  67.             padding: 15px;
  68.             grid-template-rows: 50px repeat(4,1fr) ;
  69.         }
  70.         .public_comment_reply>.reply > div{
  71.             display: grid;
  72.             margin-top: 30px;
  73.         }
  74.         .public_comment_reply>.reply > .reply_area{
  75.             display: grid;
  76.             grid-template-columns: 50px 2fr 1fr;
  77.         }
  78.         .public_comment_reply>.reply > div >img{
  80.         }
  81.         .public_comment_reply>.reply > div >.detail{
  82.             display: grid;
  83.             margin-left: 20px;
  84.             height: 90px;
  85.         }
  86.         .public_comment_reply>.reply > .reply_area> div:last-of-type{
  87.             justify-self: end;
  88.             align-self: end;
  89.         }
  90.         .public_comment_reply>.reply > .reply_area > div i{
  91.             color: red;
  92.             font-size: 1.2rem;
  93.             margin-right: 5px;
  94.         }
  95.     </style>
  96. </head>
  97. <body>
  98. <div class="public_comment_reply">
  99.     <!--        评论-->
  100.     <div class="comment">
  101.         <h3>我要评论</h3>
  102.         <div class="comment_area">
  103.             <div><label for="comment">
  104.                 <img src="../static/images/user.png" alt="">
  105.             </label></div>
  106.             <div>
  107.                 <textarea name="" id="comment"></textarea>
  108.             </div>
  109.         </div>
  110.         <button>发表评论</button>
  111.     </div>
  112.     <!--        回复-->
  113.     <div class="reply">
  114.         <h3>最新回复</h3>
  115.         <div class="reply_area">
  116.             <img src="../static/images/user.png" width="60"  alt="">
  117.             <div class="detail">
  118.                 <span>用户昵称</span>
  119.                 <span>留言内容：Php.cn</span>
  120.                 <span>2019-12-12 15:53:45发表</span>
  121.             </div>
  122.             <div>
  123.                 <span><i class="iconfont icon-dianzan"></i>回复</span>
  124.             </div>
  125.         </div>
  126.         <div class="reply_area">
  127.             <img src="../static/images/user.png" width="60"  alt="">
  128.             <div class="detail">
  129.                 <span>用户昵称</span>
  130.                 <span>留言内容：Php.cn</span>
  131.                 <span>2019-12-12 15:53:45发表</span>
  132.             </div>
  133.             <div>
  134.                 <span><i class="iconfont icon-dianzan"></i>回复</span>
  135.             </div>
  136.         </div>
  137.         <div class="reply_area">
  138.             <img src="../static/images/user.png" width="60"  alt="">
  139.             <div class="detail">
  140.                 <span>用户昵称</span>
  141.                 <span>留言内容：Php.cn</span>
  142.                 <span>2019-12-12 15:53:45发表</span>
  143.             </div>
  144.             <div>
  145.                 <span><i class="iconfont icon-dianzan"></i>回复</span>
  146.             </div>
  147.         </div>
  148.         <div class="reply_area">
  149.             <img src="../static/images/user.png" width="60"  alt="">
  150.             <div class="detail">
  151.                 <span>用户昵称</span>
  152.                 <span>留言内容：Php.cn</span>
  153.                 <span>2019-12-12 15:53:45发表</span>
  154.             </div>
  155.             <div>
  156.                 <span><i class="iconfont icon-dianzan"></i>回复</span>
  157.             </div>
  158.         </div>
  159.     </div>
  160. </div>
  161. </body>
  162. </html>

手抄Grid知识点

小结

将Flex布局变更为Grid布局时，对Flex布局对于网页放大缩小时比例不变化，网页不变形的优势有了进一步的认识，同时对Grid布局有了初步认识

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：grid布局是table布局的plus+, 以后肯定会成一种趋势, 越早接触越好
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