Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 二手商品交易和评论与回复的组件（1226前端开发学习）
Blogger Information
Blog 26
fans 0
comment 2
visits 35044
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
二手商品交易和评论与回复的组件（1226前端开发学习）
小辰
Original
657 people have browsed it

1.首先是二手商品组件效果图与代码。

效果图

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>二手交易</title></br>
  5.     <meta charset="utf-8">
  6.     <link rel="stylesheet" href="css/second_hand.css">
  7. </head>
  8. <body>
  9.     <div class="public-second-hand">
  10.     <!-- 标题一 -->
  11.     <div class="title1">
  12.        <a href="">抢好货</a>
  13.        <span>低价，便捷，安全，快速</span>
  14.     </div>
  15.     <!-- 标题二 -->
  16.     <div class="title2">
  17.     <span>热门分类</span>
  18.        <a href="">美女写真</a>
  19.        <a href="">日本美女</a>
  20.        <a href="">韩国美女</a>
  21.        <a href="">欧美美女</a>
  22.        <a href="">国内美女</a>
  23.     </div>
  24.     <!-- 商品展示区 -->
  25.     <div class="goods">
  26.         <!-- 左侧商品 -->
  27.         <div class="goods-list">
  28.         <div class="intro">
  29.                     <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  30.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  31.                     <div>
  32.                         <span>¥ 345</span>
  33.                         <span>美女</span>
  34.                     </div></div>
  35.          <div class="intro">
  36.                     <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  37.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  38.                     <div>
  39.                         <span>¥ 345</span>
  40.                         <span>美女</span>
  43.                     </div></div>
  44.          <div class="intro">
  45.                     <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  46.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  47.                     <div>
  48.                         <span>¥ 345</span>
  49.                         <span>美女</span>
  50.                     </div></div>
  51.         <div class="intro">
  52.                     <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  53.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  54.                     <div>
  55.                         <span>¥ 345</span>
  56.                         <span>美女</span>
  57.                     </div></div>
  58.         <div class="intro">
  59.                     <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  60.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  61.                     <div>
  62.                         <span>¥ 345</span>
  63.                         <span>美女</span>
  64.                     </div>
  65.         </div>
  66.         <div class="intro">
  67.                     <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  68.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  69.                     <div>
  70.                         <span>¥ 345</span>
  71.                         <span>美女</span>
  72.                     </div>
  73.         </div>
  74.         <div class="intro">
  75.                     <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  76.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  77.                     <div>
  78.                         <span>¥ 345</span>
  79.                         <span>美女</span>
  80.                     </div>
  81.         </div>
  82.         <div class="intro">
  83.                     <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  84.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  85.                     <div>
  86.                         <span>¥ 345</span>
  87.                         <span>美女</span>
  88.                     </div>
  89.         </div>
  90.         </div>
  93.         <!-- 右侧功能 -->
  94.         <div class="quick-entry">
  95.             <a href=""><img src="img/1.png" alt="" ></a>
  96.             <a href=""><img src="img/2.png" alt=""></a>
  97.             <a href=""><img src="img/3.png" alt=""></a>
  98.             <a href=""><img src="img/4.png" alt=""></a>
  99.                 <div>
  100.             <a href=""><img src="img/ad2.jpg" alt=""></a>
  101.             <a href=""><img src="img/image.png" alt=""></a>     </div>
  102.             </div>
  103.         </div>
  105. </body>
  106. </html>

css代码

  1. @import "reset.css";
  2. .public-second-hand {
  3.     width: 1200px;
  4.     padding: 10px;
  5.     box-sizing: border-box;
  6.     margin: auto;
  7.     border-radius: 5px;
  8.     background-color: #fff;
  9. }
  11. .public-second-hand:hover {
  12.     box-shadow: 0 0 8px #888;
  13. }
  15. /*标题1*/
  16. .public-second-hand > .title1 {
  17.     height: 50px;
  18.     border-bottom: 1px solid #cccccc;
  19.     box-sizing: border-box;
  20. }
  21. .public-second-hand > .title1 > a {
  22.     font-size: 23px;
  23.     margin-right: 20px;
  24. }
  25. .public-second-hand > .title1 > span {
  26.     color: red;
  27. }
  29. /*标题2*/
  30. .public-second-hand > .title2 {
  31.     height: 55px;
  32. }
  33. .public-second-hand > .title2 > span {
  34.     color: red;
  35.     font-size: 23px;
  36. }
  37. .public-second-hand > .title2 > span ~ a {
  38.     padding-left: 20px;
  39. }
  40. .public-second-hand > .title2 > span ~ a:hover {
  41.     color: lightcoral;
  42. }
  44. /*商品展示区*/
  45. .public-second-hand > .goods {
  46.     height: 440px;
  47.     /*转为flex*/
  48.     display: flex;
  49.     /*flex-flow: row nowrap;*/
  50. }
  51. .public-second-hand > .goods > .goods-list {
  52.     padding: 10px;
  53.     flex-basis: 800px;
  55.     display: flex;
  56.     flex-flow: row wrap;
  57.     justify-content: space-between;
  58. }
  59. .public-second-hand > .goods > .goods-list > .intro{
  60.     width: 178px;
  61.     height: 200px;
  62.     display: flex;
  63.     flex-flow: column nowrap;
  64.     justify-content: space-between;
  65. }
  66. .public-second-hand > .goods > .goods-list > .intro img {
  67.     border: 1px solid #cccccc;
  68.     border-radius: 16px;
  69. }
  72. .public-second-hand > .goods > .goods-list > .intro span:first-of-type {
  73.     color: red;
  74. }
  75. .public-second-hand > .goods > .goods-list > .intro > div {
  76.     display: flex;
  77. }
  78. .public-second-hand > .goods > .goods-list > .intro span:last-of-type {
  79.     color: white;
  80.     background-color: #55ce9f;
  81.     padding: 0 5px;
  82.     margin-left: auto;
  83. }
  85. /*功能快速入口区*/
  86. .public-second-hand > .goods > .quick-entry {
  87.     flex-basis: 400px;
  88.     padding: 10px;
  89.     display: flex;
  90.     flex-flow: row wrap;
  91.     justify-content: space-between;
  92. }
  93. .public-second-hand > .goods > .quick-entry img {
  94.     width: 190px;
  95.     height: 130px;
  96. }
  97. .public-second-hand > .goods > .quick-entry > div {
  98.     width: 400px;
  99.     display:flex;
  100.     flex-direction:column;
  101. }
  103. .public-second-hand > .goods > .quick-entry > div img {
  104.     width: 393px;
  105.     height: 60px;
  106. }

2.下面是评论与回复效果图与代码

效果图

reply

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="font/iconfont.css">
  6.     <link rel="stylesheet" href="css/public_reply.css">
  7.     <title>评论回复</title>
  8. </head>
  9. <body>
  10.     <div class="public-reply">
  11.         <!-- 评论 -->
  12.         <div class="comment">
  13.             <h4>我要评论</h4>
  14.             <div>
  15.                 <label for="comment">
  16.                     <img src="img/user.png" alt="">
  17.                 </label>
  18.                 <textarea name="" id="comment">
  19.                 </textarea>
  20.             </div>
  21.             <button>发表评论</button>
  22.         </div>
  23.         <!-- 回复 -->
  24.         <div class="reply">
  25.             <h3>最新回复</h3>
  26.             <div>
  27.                 <img src="img/user.png" alt="">
  28.                 <div class="detail">
  29.                     <span>ad1</span>
  30.                     <span>留言内容: 
  31.                     php中文网,是一个有温度,有思想的学习平台</span>
  32.                     <div>
  33.                         <span>发布于：2019-12-31</span>
  34.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  35.                     </div>
  36.                 </div>
  37.             </div>
  38.             <div>
  39.                 <img src="img/user.png" alt="">
  40.                 <div class="detail">
  41.                     <span>ad2</span>
  42.                     <span>留言内容：
  43.                      php中文网,是一个有温度,有思想的学习平台</span>
  44.                     <div>
  45.                         <span>发表于：2019-12-31</span>
  46.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  47.                     </div>
  48.                 </div>
  49.             </div>
  50.             <div>
  51.                 <img src="img/user.png" alt="">
  52.                 <div class="detail">
  53.                     <span>ad23</span>
  54.                     <span>留言内容：
  55.                     php中文网,是一个有温度,有思想的学习平台</span>
  56.                     <div>
  57.                         <span>发表于：2019-12-31</span>
  58.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  59.                     </div>
  60.                 </div>
  61.             </div>
  62.             <div>
  63.                 <img src="img/user.png" alt="">
  64.                 <div class="detail">
  65.                     <span>ad24</span>
  66.                     <span>留言内容：
  67.                     php中文网,是一个有温度,有思想的学习平台</span>
  68.                     <div>
  69.                         <span>发表于：2019-12-31</span>
  70.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  71.                     </div>
  72.                 </div>
  73.             </div>
  74.         </div>
  75.     </div>
  76. </body>
  77. </html>

css代码

  1. @import "../public_reset.css";
  3. /*1. 评论区域的样式*/
  4. .public-reply {
  5.     /*宽度和高度主它自适应的父元素,这里不要设置*/
  6.     padding: 15px;
  7.     box-sizing: border-box;
  8.     background-color: #fff;
  9.     /*弹性布局, 整体垂直排列*/
  10.     display: flex;
  11.     flex-direction: column;
  12. }
  13. .public-reply img {
  14.     box-shadow: 1px 1px 3px #cccccc;
  15.     border-radius: 5px;
  16. }
  17. /*评论区整体样式*/
  18. .public-reply > .comment {  
  19.     display: flex;
  20.     flex-direction: column;
  21. }
  23. /*用户头像大小*/
  24. .public-reply img {
  25.     width: 60px;
  26.     height: 60px;
  27. }
  28. .public-reply > .comment h3 {
  29.     padding: 20px 0;
  30.     border-top: 1px solid #cccccc;
  31. }
  33. /*设置评论发布区: 头像与按钮的样式*/
  34. .public-reply .comment > div {
  35.     padding: 15px;
  36.     height: 200px;
  37.     /*头像与按钮应该水平排列,转为弹性盒子*/
  38.     display: flex;
  39.     flex-flow: row nowrap;
  40. }
  42. .public-reply .comment > div  img {
  43.     /*垂直方向从起始位置显示,这也是默认值,可省略*/
  44.     align-self: start;
  45. }
  47. /*设置文本域样式*/
  48. .public-reply .comment > div textarea {
  49.     height: 200px;
  50.     margin-left: 20px;
  51.     resize: none;
  52.     /*占据剩余全部空间, flex: 1*/
  53.     flex: auto;
  54. }
  55. .publi-reply .comment > div textarea:hover {
  56.     box-shadow: 0 0 8px #888;
  57. }
  58. /*自定义发表评论的按钮样式*/
  59. .public-reply .comment > button {
  60.     font-size: 14px;
  61.     background-color: #f64c59;
  62.     border: none;
  63.     color: white;
  64.     width: 150px;
  65.     height: 40px;
  67.     /*按钮居右显示,即交叉轴上对齐到结束框*/
  68.     align-self: end;
  69. }
  71. .public-reply .comment > button:hover {
  72.     background-color: #178cee;
  73.     box-shadow: 0 0 5px #888;
  74. }
  76. /*2. 回复区域的样式*/
  77. .publi-reply > .reply {
  78.     /*弹性盒子,垂直排列*/
  79.     display: flex;
  80.     flex-direction: column;
  81.     padding: 15px 0;
  82. }
  84. .public-reply > .reply > h3 {
  85.     padding: 20px 0;
  86. }
  88. /*回复区整体水平排列(默认值): 头像与回复详情*/
  89. .public-reply > .reply > div {
  90.     display: flex;
  91.     /*让每条回复之间有一定的间隙*/
  92.     margin-top: 30px;
  93. }
  95. /*用户头像垂直居中*/
  96. .public-reply > .reply > div > img {
  97.     align-self: center;
  98. }
  100. /*回复详情垂直排列三行*/
  101. .public-reply > .reply > div .detail {
  102.     /*回复详情占据水平剩余全部空间*/
  103.     flex:auto;
  105.     /*转为弹性盒子,且垂直排列*/
  106.     display: flex;
  107.     flex-direction: column;
  108.     margin-left: 20px;
  109.     /*必须设置高度, 否则主轴无法产生剩余空间*/
  110.     height: 90px;
  111.     /*三行文本二端对齐*/
  112.     justify-content: space-between;
  113. }
  115. /*将回复点赞按钮,放在最右边*/
  116. .public-reply > .reply > div .detail > div {
  117.     /*将发表时间和回复点赞所在容器设置为flex容器,以简化代码*/
  118.     display: flex;
  119.     flex-direction: row;
  120.     /*二端对齐, 实现最终效果*/
  121.     justify-content: space-between;
  122. }
  125. .public-reply > .reply > div .detail > div i {
  126.     color: red;
  127.     font-size: 1.2rem;
  128.     margin-right: 5px;
  129. }

3.总结

做这些页面css样式的时候，感觉用了flex布局方便一点，比传统的方便许多，但做的时候我还是遇到问题，主要是样式加不上去，检查才发现问题出在html的div上，感觉布局的时候，太粗心了，以后还要注意一下。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

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