简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >Flex弹性盒子仿二手商品交易与评论回复页面

Flex弹性盒子仿二手商品交易与评论回复页面

饮雪煮茶
饮雪煮茶原创
2019年12月27日 13:30:29969浏览

第一次作业，对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. }

二手商品交易效果图

上一条：flex容器的6个属性练习总结下一条：12月26日作业：flex实战案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多