Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Flex弹性盒子仿二手商品交易与评论回复页面
Blogger Information
Blog 11
fans 0
comment 0
visits 27456
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
971 people have browsed it

第一次作业，对flex属性还是比较生疏，再页面布局标签有点深，css命名也有点太长，比教学案列源码可能多了点，但总是算写完了。

评论回复html

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

评论回复css

  1. @import "../public_reset.css";
  2. .public-comment-replay{
  3.     display: flex;
  4.     flex-flow: column nowrap;
  5.     padding: 15px;
  6.     box-sizing: border-box;
  7.     background-color: #fff;
  8. }
  9. .public-comment-replay>.comment{
  10.     display: flex;
  11.     flex-direction: column;
  12. }
  13. .public-comment-replay>.comment>h3{
  14.     padding: 20px 0;
  15.     border-top: 1px solid #ccc;
  16. }
  17. .public-comment-replay>.comment>div{
  18.     display: flex;
  19.     padding: 10px;
  20. }
  21. .public-comment-replay img{
  22.     width: 60px;
  23.     height: 60px;
  24.     box-shadow: 1px 1px 3px #ccc;
  25.     border-radius: 5px;
  26. }
  27. .public-comment-replay>.comment>div>textarea{
  28.     height: 200px;
  29.     flex:auto;
  30.     resize: none;
  31.     margin-left: 20px;
  32. }
  33. .public-comment-replay>.comment>div>textarea:hover{
  34.     box-shadow: 0 0 1px #888;
  35. }
  36. .public-comment-replay>.comment>button{
  37.     height: 40px;
  38.     width: 150px;
  39.     background-color: #f64c59;
  40.     color: #fff;
  41.     align-self: end;
  42. }
  43. .public-comment-replay>.comment>button{
  44.     background-color: #178cee;
  45.     color: #fff;
  46.     box-shadow: 0 0 3px #888;
  47. }
  48. .public-comment-replay>.reply{
  49.     padding: 15px 0;
  50.     display: flex;
  51.     flex-direction: column;
  52. }
  53. .public-comment-replay>.reply>h3{
  54.     padding: 20px 0;
  55. }
  56. .public-comment-replay>.reply>.reply-list {
  57.     display: flex;
  58.     flex-flow: row nowrap;
  59.     margin-top: 30px;
  60.     height: 90px;
  61. }
  62. .public-comment-replay>.reply>.reply-list>.reply-item{
  63.     margin-left: 20px;
  64.     flex: auto;
  65.     display: flex;
  66.     flex-flow: column nowrap;
  67.     justify-content: space-between;
  68. }
  69. .public-comment-replay>.reply>.reply-list>.reply-item>div{
  70.     display: flex;
  71.     justify-content: space-between;
  72. }
  73. .public-comment-replay>.reply>.reply-list>.reply-item .iconfont{
  74.     font-size: 1.2rem;
  75.     color: #f00;
  76.     margin-right: 15px;
  77. }

效果图

二手商品交易html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>二手商品交易</title>
  6.     <link rel="stylesheet" href="../static/font/iconfont.css">
  7.     <link rel="stylesheet" href="./public-second-hand.css">
  8. </head>
  9. <body>
  10.         <div class="public-headline">
  11.             <span>二手交易</span>
  12.         </div>
  13.         <div class="public-second-hand">
  14.             <div class="second-hand-title1">
  15.                 <a href="">抢好货</a>
  16.                 <span> 0低价, 便捷,安全,快速</span>
  17.             </div>
  18.             <div class="second-hand-title2">
  19.                 <h3>热门分类</h3>
  20.                 <a href="">美女写真</a>
  21.                 <a href="">日本美女</a>
  22.                 <a href="">美国美女</a>
  23.                 <a href="">国内美女</a>
  24.                 <a href="">AV美女</a>
  25.             </div>
  26.             <div class="second-hand-content">
  27.                 <div class="second-hand-list">
  28.                     <div class="second-hand-item">
  29.                         <a href=""><img src="../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  30.                         <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  31.                         <div>
  32.                             <span>&yen;345</span>
  33.                             <span>美女</span>
  34.                         </div>
  35.                     </div>
  36.                     <div class="second-hand-item">
  37.                         <a href=""><img src="../static/images/shop/shop2.jpg" alt="" width="176" height="120"></a>
  38.                         <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  39.                         <div>
  40.                             <span>&yen;345</span>
  41.                             <span>美女</span>
  42.                         </div>
  43.                     </div>
  44.                     <div class="second-hand-item">
  45.                         <a href=""><img src="../static/images/shop/shop3.jpg" alt="" width="176" height="120"></a>
  46.                         <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  47.                         <div>
  48.                             <span>&yen;345</span>
  49.                             <span>美女</span>
  50.                         </div>
  51.                     </div>
  52.                     <div class="second-hand-item">
  53.                         <a href=""><img src="../static/images/shop/shop4.jpg" alt="" width="176" height="120"></a>
  54.                         <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  55.                         <div>
  56.                             <span>&yen;345</span>
  57.                             <span>美女</span>
  58.                         </div>
  59.                     </div>
  60.                     <div class="second-hand-item">
  61.                         <a href=""><img src="../static/images/shop/shop5.jpg" alt="" width="176" height="120"></a>
  62.                         <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  63.                         <div>
  64.                             <span>&yen;345</span>
  65.                             <span>美女</span>
  66.                         </div>
  67.                     </div>
  68.                     <div class="second-hand-item">
  69.                         <a href=""><img src="../static/images/shop/shop6.jpg" alt="" width="176" height="120"></a>
  70.                         <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  71.                         <div>
  72.                             <span>&yen;345</span>
  73.                             <span>美女</span>
  74.                         </div>
  75.                     </div>
  76.                     <div class="second-hand-item">
  77.                         <a href=""><img src="../static/images/shop/shop7.jpg" alt="" width="176" height="120"></a>
  78.                         <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  79.                         <div>
  80.                             <span>&yen;345</span>
  81.                             <span>美女</span>
  82.                         </div>
  83.                     </div>
  84.                     <div class="second-hand-item">
  85.                         <a href=""><img src="../static/images/shop/shop8.jpg" alt="" width="176" height="120"></a>
  86.                         <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  87.                         <div>
  88.                             <span>&yen;345</span>
  89.                             <span>美女</span>
  90.                         </div>
  91.                     </div>
  92.                 </div>
  93.                 <div class="second-hand-quick">
  94.                     <div class="second-hand-quick-img">
  95.                         <a href=""><img src="../static/images/ad/1.png" alt=""></a>
  96.                         <a href=""><img src="../static/images/ad/1.png" alt=""></a>
  97.                         <a href=""><img src="../static/images/ad/1.png" alt=""></a>
  98.                         <a href=""><img src="../static/images/ad/1.png" alt=""></a>
  99.                     </div>
  100.                     <div class="second-hand-quick-ad">
  101.                         <a href=""><img src="../static/images/ad/image.png" alt=""></a>
  102.                         <a href=""><img src="../static/images/ad/ad2.jpg" alt=""></a>
  103.                     </div>
  104.                 </div>
  105.             </div>
  106.         </div>
  107. </body>
  108. </html>

二手商品交易css

  1. @import url(../public_reset.css);
  2. @import url(../public_headline/public-headline.css);
  3. .public-second-hand{
  4.     width: 1200px;
  5.     padding: 10px;
  6.     margin: 0 auto;
  7.     border-sizing: border-box;
  8.     border-radius: 5px;
  9.     background-color: #fff;
  10. }
  11. .public-second-hand:hover{
  12.     box-shadow: 0 0 5px #888;
  13. }
  14. .public-second-hand > .second-hand-title1{
  15.     height: 50px;
  16.     border-bottom: 1px solid #ccc;
  17. }
  18. .public-second-hand > .second-hand-title1 > a {
  19.     font-size: 23px;
  20.     margin-right: 20px;
  21. }
  22. .public-second-hand >.second-hand-title1 > span{
  23.     color: #f00;
  24. }
  25. .public-second-hand>.second-hand-title2{
  26.     display: flex;
  27.     align-items: flex-end;
  28. }
  29. .public-second-hand > .second-hand-title2 > h3{
  30.     font-size: 23px;
  31.     color: #f00;
  32. }
  33. .public-second-hand>.second-hand-title2>a{
  34.     margin-left: 20px;
  35. }
  36. .public-second-hand>.second-hand-title2>a:hover{
  37.     color: #f00;
  38. }
  39. .public-second-hand>.second-hand-content{
  40.     margin-top: 15px;
  41.     display: flex;
  42.     height: 440px;
  43. }
  44. .public-second-hand>.second-hand-content>.second-hand-list{
  45.     padding: 10px;
  46.     display: flex;
  47.     flex-flow: row wrap;
  48.     flex-basis: 800px;
  49.     justify-content: space-between;
  50. }
  51. .public-second-hand>.second-hand-content>.second-hand-list>.second-hand-item{
  52.     width: 178px;
  53.     height: 200px;
  54.     display: flex;
  55.     flex-flow: column nowrap;
  56.     justify-content: space-between;
  57. }
  58. .public-second-hand>.second-hand-content>.second-hand-list>.second-hand-item img{
  59.     border: 1px solid #ccc;
  60.     border-radius: 5px;
  61. }
  62. .public-second-hand>.second-hand-content>.second-hand-list>.second-hand-item>div{
  63.     display: flex;
  64. }
  65. .public-second-hand>.second-hand-content>.second-hand-list>.second-hand-item>div>:first-child{
  66.     color: #f00;
  67. }
  68. .public-second-hand>.second-hand-content>.second-hand-list>.second-hand-item>div>:last-child{
  69.     margin-left: auto;
  70.     padding: 0 5px;
  71.     background-color: #55ce9f;
  72.     color: #fff;
  73. }
  74. .public-second-hand>.second-hand-content>.second-hand-quick{
  75.     display: flex;
  76.     flex-flow: column nowrap;
  77.     flex-basis: 400px;
  78.     /*padding: 10px;*/
  79. }
  80. .public-second-hand>.second-hand-content>.second-hand-quick>.second-hand-quick-img{
  81.     height: 270px;
  82.     display: flex;
  83.     flex-flow: row wrap;
  84.     padding: 10px;
  85.     justify-content: space-between;
  86. }
  87. .public-second-hand>.second-hand-content>.second-hand-quick>.second-hand-quick-img img{
  88.     height: 130px;
  89.     width: 190px;
  90. }
  91. .public-second-hand>.second-hand-content>.second-hand-quick>.second-hand-quick-ad{
  92.     display: flex;
  93.     flex-flow: column nowrap;
  94.     padding: 10px;
  95.     justify-content: space-between;
  96. }
  97. .public-second-hand>.second-hand-content>.second-hand-quick>.second-hand-quick-ad img{
  98.     width: 393px;
  99.     height: 60px;
  100. }

二手商品交易效果图

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