Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 2019-12-29 留言及评论(Grid实现)-PHP培训十期
Blogger Information
Blog 12
fans 0
comment 0
visits 7979
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
2019-12-29 留言及评论(Grid实现)-PHP培训十期
ys899
Original
604 people have browsed it

```HTML Code DOM结构 素材库已备齐
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../../static/font/iconfont.css">
<link rel="stylesheet" href="public_comment_reply_grid.css">
<title>评论与回复组件</title>
</head>

<body>

<div class="public-comment-reply">
<!--评论区-->
<div class="comment">
<h3>我要评论</h3>
<div>
<label for="commment">
<img src="../../../static/images/user.png" alt="">
</label>
<textarea name="" id="commment"></textarea>
</div>
<button>发表评论</button>
</div> 

  1. <!--回复区-->
  2. <div class="reply">
  3.     <h3>最新回复</h3>
  4.     <div>
  5.         <img src="../../../static/images/user.png" alt="">
  6.         <div class="detail">
  7.             <span>用户昵称</span>
  8.             <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  9.             <div>
  10.                 <span>2019-12-12 15:34:23发表</span>
  11.                 <span><i class="iconfont icon-dianzan"></i>回复</span>
  12.             </div>
  13.         </div>
  14.     </div>
  15.     <div>
  16.         <img src="../../../static/images/user.png" alt="">
  17.         <div class="detail">
  18.             <span>用户昵称</span>
  19.             <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  20.             <div>
  21.                 <span>2019-12-12 15:34:23发表</span>
  22.                 <span><i class="iconfont icon-dianzan"></i>回复</span>
  23.             </div>
  24.         </div>
  25.     </div>
  26.     <div>
  27.         <img src="../../../static/images/user.png" alt="">
  28.         <div class="detail">
  29.             <span>用户昵称</span>
  30.             <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  31.             <div>
  32.                 <span>2019-12-12 15:34:23发表</span>
  33.                 <span><i class="iconfont icon-dianzan"></i>回复</span>
  34.             </div>
  35.         </div>
  36.     </div>
  37.     <div>
  38.         <img src="../../../static/images/user.png" alt="">
  39.         <div class="detail">
  40.             <span>用户昵称</span>
  41.             <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  42.             <div>
  43.                 <span>2019-12-12 15:34:23发表</span>
  44.                 <span><i class="iconfont icon-dianzan"></i>回复</span>
  45.             </div>
  46.         </div>
  47.     </div>
  49. </div>

</div>
</body>
</html>

  1. ```CSS Code Grid布局
  2. @import url(../public_reset.css);
  4. .public-comment-reply {
  5.     padding: 15px;
  6.     box-sizing: border-box;
  7.     background-color: #fff;
  8.     display: grid;
  9.     /*flex-direction: column;*/
  10. }
  12. .public-comment-reply img {
  13.     width: 60px;
  14.     height: 60px;
  15.     border-radius: 5px;
  16.     box-shadow: 1px 1px 3px #cccccc;
  17. }
  18. .public-comment-reply > .comment {
  19.     display: flex;
  20.     flex-direction: column;
  21. }
  22. .public-comment-reply > .comment h3 {
  23.     padding: 20px 0;
  24.     border-top: 1px solid #cccccc;
  25. }
  27. .public-comment-reply > .comment > div {
  28.     padding: 15px;
  29.     height: 200px;
  30.     display: flex;
  31.     flex-flow: row nowrap;
  32. }
  33. .public-comment-reply > .comment > div img {
  34.     align-self: flex-start;
  35. }
  37. .public-comment-reply > .comment > div textarea {
  38.     height: 200px;
  39.     margin-left: 20px;
  40.     resize: none;
  41.     flex: auto;
  42. }
  43. .public-comment-reply > .comment > div textarea:hover {
  44.     box-shadow: 0 0 8px #888888;
  45. }
  46. .public-comment-reply > .comment > button {
  47.     font-size: 14px;
  48.     background-color: #f64c59;
  49.     border: none;
  50.     color: white;
  51.     width: 150px;
  52.     height: 40px;
  54.     align-self:  end;
  55. }
  57. .public-comment-reply > .comment > button:hover {
  58.     background-color: #178cee;
  59.     box-shadow: 0 0 8px #888888;
  60.     cursor: pointer;
  61. }
  63. /*回复区*/
  64. .public-comment-reply > .reply {
  65.     display: flex;
  66.     flex-direction: column;
  67.     padding: 15px 0;
  68. }
  70. .public-comment-reply > .reply > h3 {
  71.     padding: 20px 0;
  72. }
  74. .public-comment-reply > .reply > div {
  75.     display: flex;
  76.     margin-top: 30px;
  77. }
  79. .public-comment-reply > .reply > div > img {
  80.     align-self: center;
  81. }
  82. .public-comment-reply > .reply > div > .detail {
  83.     flex: auto;
  85.     display: flex;
  86.     flex-direction: column;
  87.     margin-left: 20px;
  88.     height: 90px;
  89.     justify-content: space-between;
  90. }
  92. .public-comment-reply > .reply > div > .detail > div {
  93.     display: flex;
  94.     justify-content: space-between;
  95. }
  97. .public-comment-reply > .reply > div > .detail > div i {
  98.     color: red;
  99.     font-size: 1.2rem;
  100.     margin-right: 5px;
  101. }

效果图

Correcting teacher：天蓬老师天蓬老师

Correction status：unqualified

Teacher's comments：将代码版式调整好再提交, 代码没有高亮显示
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