search

博客列表 >Grid入门—Php第十期线上班

Grid入门—Php第十期线上班

迫
迫原创
2020年02月19日 10:46:21482浏览

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布局有了初步认识

上一条：一个PHP文件实现JS-SDK新版微信分享朋友圈，分享给好友功能下一条：2019.12.30第九节课 grid布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多