search

博客列表 >二手商品交易和评论与回复的组件（1226前端开发学习）

二手商品交易和评论与回复的组件（1226前端开发学习）

小辰
小辰原创
2020年01月02日 10:40:26656浏览

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上，感觉布局的时候，太粗心了，以后还要注意一下。

上一条：CSS基础Grid布局公共二手交易区组件-PHP培训十期线上班 学号：510251 12月28日作业下一条：12月31日—laravel框架的使用查询构造器对数据库进行增删查改操作
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多