Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > Flex实现二手交易与评论功能
Blogger Information
Blog 7
fans 0
comment 1
visits 5426
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
Flex实现二手交易与评论功能
荔枝哥哥
Original
662 people have browsed it

Flex实现二手交易与评论功能

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="./job_1.css">
  8.     <title>二手组件</title>
  9. </head>
  10. <body>
  11.     <!-- 引入大标题组件 -->
  12.     <div class="public-headline">
  13.         <span>二手交易</span>
  14.     </div>
  15.     <!-- 二手交易区 -->
  16.     <div class="public-second-hand">
  17.         <!-- 标题1 -->
  18.         <div class="title1">
  19.             <a href="">抢好货</a>
  20.             <span> 0低价, 便捷,安全,快速</span>
  21.         </div>
  22.         <div class="title2">
  23.             <span>热门分类</span>
  24.             <a href="">美女写真</a>
  25.             <a href="">日本美女</a>
  26.             <a href="">美国美女</a>
  27.             <a href="">国内美女</a>
  28.             <a href="">神奇女侠</a>
  29.         </div>
  30.         <!-- 商品展示区 -->
  31.         <div class="goods">
  32.             <!--1 商品列表 -->
  33.             <div class="goods-list">
  34.                 <!-- 商品简介1 -->
  35.                 <div class="intro">
  36.                     <a href=""><img src="./1226/static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  37.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  38.                     <div>
  39.                         <span>&yen;333</span>
  40.                         <span>美女</span>
  41.                     </div>
  42.                 </div>
  43.                 <div class="intro">
  44.                     <a href=""><img src="./1226/static/images/shop/shop2.jpg" alt="" ></a>
  45.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  46.                     <div>
  47.                         <span>&yen;333</span>
  48.                         <span>美女</span>
  49.                     </div>
  50.                 </div>
  51.                 <div class="intro">
  52.                     <a href=""><img src="./1226/static/images/shop/shop3.jpg" alt=""></a>
  53.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  54.                     <div>
  55.                         <span>&yen;333</span>
  56.                         <span>美女</span>
  57.                     </div>
  58.                 </div>
  59.                 <div class="intro">
  60.                     <a href=""><img src="./1226/static/images/shop/shop4.jpg" alt=""></a>
  61.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  62.                     <div>
  63.                         <span>&yen;333</span>
  64.                         <span>美女</span>
  65.                     </div>
  66.                 </div>
  67.                 <div class="intro">
  68.                     <a href=""><img src="./1226/static/images/shop/shop5.jpg" alt=""></a>
  69.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  70.                     <div>
  71.                         <span>&yen;333</span>
  72.                         <span>美女</span>
  73.                     </div>
  74.                 </div>
  75.                 <div class="intro">
  76.                     <a href=""><img src="./1226/static/images/shop/shop6.jpg" alt=""></a>
  77.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  78.                     <div>
  79.                         <span>&yen;333</span>
  80.                         <span>美女</span>
  81.                     </div>
  82.                 </div>
  83.                 <div class="intro">
  84.                     <a href=""><img src="./1226/static/images/shop/shop7.jpg" alt=""></a>
  85.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  86.                     <div>
  87.                         <span>&yen;333</span>
  88.                         <span>美女</span>   
  89.                     </div>
  90.                 </div>
  91.                 <div class="intro">
  92.                     <a href=""><img src="./1226/static/images/shop/shop8.jpg" alt=""></a>
  93.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  94.                     <div>
  95.                         <span>&yen;333</span>
  96.                         <span>美女</span>
  97.                     </div>
  98.                 </div>
  99.             </div>
  100.             <!-- 右侧快速入口 -->
  101.             <div class="quick-entry">
  102.                 <a href=""><img src="./1226/static/images/ad/1.png" alt=""></a>
  103.                 <a href=""><img src="./1226/static/images/ad/2.png" alt=""></a>
  104.                 <a href=""><img src="./1226/static/images/ad/3.png" alt=""></a>
  105.                 <a href=""><img src="./1226/static/images/ad/4.png" alt=""></a>
  106.                 <div>
  107.                     <a href=""><img src="./1226/static/images/ad/image.png" alt=""></a>
  108.                     <a href=""><img src="./1226/static/images/ad/ad2.jpg" alt=""></a>
  109.                 </div>
  110.             </div>
  111.         </div>
  112.     </div>
  115. </body>
  116. </html>
  1. /*样式重置*/
  2. @import "./job_reset.css";
  4. /*大标题组件*/
  5. @import "./job_headline.css";
  7. /* 二手交易专区的样式表 */
  8. .public-second-hand{
  9.     width: 1200px;
  10.     padding: 10px;
  11.     box-sizing: border-box;
  12.     margin: auto;
  13.     border-radius: 5px;
  14.     background-color: #fff;
  15. }
  16. /* 阴影效果 */
  17. .public-second-hand:hover{
  18.     box-shadow: 0 0 8px #888;
  19. }
  20. /* 标题1 */
  21. .public-second-hand > .title1{
  22.     height: 50px;
  23.     border-bottom: 1px solid #cccccc;
  24.     box-sizing: border-box;
  25. }
  26. .public-second-hand > .title1 > a{
  27.     font-size: 23px;
  28.     margin-right: 20px;
  29. }
  30. .public-second-hand > .title1 > span{
  31.     color: red;
  32. }
  33. /* 标题2 */
  34. .public-second-hand > .title2 {
  35.     height: 55px;
  36. }
  37. .public-second-hand > .title2 > span{
  38.     color: red;
  39.     font-size: 23px;
  40. }
  41. .public-second-hand > .title2 > span ~ a{
  42.     padding-left: 20px;
  43. }
  44. .public-second-hand > .title2 > span ~ a:hover {
  45.     color: lightcoral;
  46. }
  48. /* 商品展示区 */
  49. .public-second-hand > .goods {
  50.     height: 440px;
  51.     /* 转换为弹性布局 */
  52.     display: flex;
  53. }
  54. .public-second-hand > .goods > .goods-list{
  55.     padding: 10px;
  56.     flex-basis: 800px;
  57.     display: flex;
  58.     flex-flow: row wrap;
  59.     justify-content: space-between;
  60. }
  61. .public-second-hand > .goods > .goods-list > .intro{
  62.     width: 178px;
  63.     height: 200px;
  64.     display: flex;
  65.     flex-flow: column nowrap;
  66.     justify-content: space-between;
  67. }
  68. .public-second-hand > .goods > .goods-list > .intro img{
  69.     width: 176px;
  70.     height: 120px;
  71.     border: 1px solid #cccccc;
  72.     border-radius: 5px;
  73. }
  74. .public-second-hand > .goods > .goods-list > .intro span:first-of-type {
  75.     color: red;
  76. }
  77. .public-second-hand > .goods > .goods-list > .intro > div {
  78.     display: flex;
  79. }
  80. .public-second-hand > .goods > .goods-list > .intro span:last-of-type {
  81.     color: white;
  82.     background-color: #55ce9f;
  83.     padding: 0 5px;
  84.     margin-left: auto;
  85. }
  86. /* 功能快速入口区 */
  87. .public-second-hand > .goods > .quick-entry{
  88.     flex-basis: 400px;
  89.     padding: 10px;
  90.     display: flex;
  91.     flex-flow: row wrap;
  92.     justify-content: space-between;
  93. }
  94. .public-second-hand > .goods > .quick-entry img{
  95.     width: 190px;
  96.     height: 130px;
  97. }
  98. .public-second-hand > .goods > .quick-entry > div {
  99.     width: 400px;
  100.     display: flex;
  101.     flex-direction: column;
  102. }
  103. .public-second-hand > .goods > .quick-entry > div img {
  104.     width: 393px;
  105.     height: 60px;
  106. }

second-hand

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="./1226/static/font/iconfont.css">
  8.     <link rel="stylesheet" href="job_2.css">
  9.     <title>评论与回复组件</title>
  10. </head>
  11. <body>
  12.     <div class="public-comment-reply">
  13.         <!-- 评论区 -->
  14.         <div class="comment">
  15.             <h3>我要评论</h3>
  16.             <div>
  17.                 <label for="comment"><img src="./1226/static/images/user.png" alt=""></label>
  18.                 <textarea name="" id="comment"></textarea>
  19.             </div>
  20.             <button>发表评论</button>
  21.         </div>
  22.         <!-- 回复区 -->
  23.         <div class="reply">
  24.             <h3>最新回复</h3>
  25.             <div>
  26.                 <img src="./1226/static/images/user.png" alt="">
  27.                 <div class="detail">
  28.                     <span>用户昵称</span>
  29.                     <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  30.                     <div>
  31.                         <span>2019-12-29 22:03:11发表</span>
  32.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  33.                     </div>
  35.                 </div>
  36.             </div>
  37.             <div>
  38.                 <img src="./1226/static/images/user.png" alt="">
  39.                 <div class="detail"> 
  40.                     <span>用户昵称</span>
  41.                     <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  42.                     <div>
  43.                         <span>2019-12-29 22:03:11发表</span>
  44.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  45.                     </div>
  47.                 </div>
  48.             </div>
  49.             <div>
  50.                 <img src="./1226/static/images/user.png" alt="">
  51.                 <div class="detail">
  52.                     <span>用户昵称</span>
  53.                     <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  54.                     <div>
  55.                         <span>2019-12-29 22:03:11发表</span>
  56.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  57.                     </div>
  59.                 </div>
  60.             </div>
  61.             <div>
  62.                 <img src="./1226/static/images/user.png" alt="">
  63.                 <div class="detail">
  64.                     <span>用户昵称</span>
  65.                     <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  66.                     <div>
  67.                         <span>2019-12-29 22:03:11发表</span>
  68.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  69.                     </div>
  71.                 </div>
  72.             </div>
  73.             <div>
  74.                 <img src="./1226/static/images/user.png" alt="">
  75.                 <div class="detail">
  76.                     <span>用户昵称</span>
  77.                     <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  78.                     <div>
  79.                         <span>2019-12-29 22:03:11发表</span>
  80.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  81.                     </div>
  83.                 </div>
  84.             </div>
  85.             <div>
  86.                 <img src="./1226/static/images/user.png" alt="">
  87.                 <div class="detail">
  88.                     <span>用户昵称</span>
  89.                     <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  90.                     <div>
  91.                         <span>2019-12-29 22:03:11发表</span>
  92.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  93.                     </div>
  95.                 </div>
  96.             </div>
  97.         </div>
  98.     </div>
  99. </body>
  100. </html>
  1. @import url(./job_reset.css);
  3. .public-comment-reply{
  4.     padding: 15px;
  5.     box-sizing: border-box;
  6.     background-color: #fff;
  7.     display: flex;
  8.     flex-direction: column;
  9. }
  10. .public-comment-reply img{
  11.     width: 60px;
  12.     height: 60px;
  13.     border-radius: 5px;
  14.     box-shadow: 1px 1px 3px #cccccc;
  15. }
  16. .public-comment-reply > .comment{
  17.     display: flex;
  18.     flex-direction: column;
  19. }
  20. .public-comment-reply > .comment h3{
  21.     padding: 20px 0;
  22.     border-top: 1px solid #cccccc;
  23. }
  24. .public-comment-reply > .comment > div{
  25.     padding: 15px;
  26.     height: 200px;
  27.     display: flex;
  28.     flex-flow: row nowrap;
  29. }
  30. .public-comment-reply > .comment > div img{
  31.     align-self: flex-start;
  32. }
  33. .public-comment-reply > .comment > div textarea{
  34.     height: 200px;
  35.     margin-left: 20px;
  36.     /* 输入框大小不可以拖动 */
  37.     resize: none;
  38.     flex: auto;
  39. }
  40. .public-comment-reply > .comment > div textarea:hover{
  41.     box-shadow: 0 0 8px #888888;
  42. }
  43. .public-comment-reply > .comment > button{
  44.     font-size: 14px;
  45.     background-color: #f64c59;
  46.     border: none;
  47.     color: white;
  48.     width: 150px;
  49.     height: 40px;
  50.     align-self: flex-end;
  51. }
  52. .public-comment-reply > .comment > button:hover{
  53.     background-color: #178cee;
  54.     box-shadow: 0 0 8px #888888;
  55.     cursor: pointer;
  56. }
  57. /* 回复区 */
  58. .public-comment-reply > .reply{
  59.     display: flex;
  60.     flex-direction: column;
  61.     padding: 15px 0;
  62. }
  63. .public-comment-reply > .reply > h3{
  64.     padding: 20px 0;
  65. }
  66. .public-comment-reply > .reply > div{
  67.     display: flex;
  68.     margin-top: 30px;
  69. }
  70. .public-comment-reply > .reply > div > img{
  71.     align-self: center;
  72. }
  73. .public-comment-reply > .reply > div > .detail{
  74.     flex: auto;
  75.     display: flex;
  76.     flex-direction: column;
  77.     margin-left: 20px;
  78.     height: 90px;
  79.     justify-content: space-between;
  80. }
  81. .public-comment-reply > .reply > div > .detail >div{
  82.     display: flex;
  83.     justify-content: space-between;
  84. }
  85. .public-comment-reply > .reply > div > .detail >div i{
  86.     color: red;
  87.     font-size: 1.2rem;
  88.     margin-right: 5px;
  89. }

comment-reply

总结

拿到界面时先整体规划好思路，画好多少个弹性盒子，怎么布局会更容易让flex发挥他的最优方式

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