Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 第十期FLEX二手商品列表与评论与回复思路总结（2019-12-26）
Blogger Information
Blog 22
fans 1
comment 0
visits 17738
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二手商品列表与评论与回复思路总结（2019-12-26）
齐齐
Original
686 people have browsed it

二手交易商品列表

第一步：首先对页面的结构做分析，大致可以上中下结构，然后将下面块商品展示划分为左右结构

第二步：写出基本的dom结构代码。然后对每一部分进行样式控制，达到想要的页面效果。

重点：当区块变成flex容器后，子元素变成行内块，操作起来更加方便。将商品展示区的每一个小块转为flex容器，让垂直排列。在将最后一行转为flex容器，对齐方式改为两端对齐。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public_second_hand.css">
  6.     <title>公共二手交易区组件</title>
  7. </head>
  8. <body>
  9. <!--导入大标题组件-->
  10. <div class="public-headline">
  11.     <span>二手交易</span>
  12. </div>
  13. <!--二手交易区-->
  14.  <div class="public-second-hand">
  15.      <!--标题一-->
  16.      <div class="title1">
  17.          <a href="">抢好货</a>
  18.          <span>0低价，便捷，安全，快速</span>
  19.      </div>
  20.      <!--标题二-->
  21.      <div class="title2">
  22.          <span>热门分类</span>
  23.          <a href="">美女写真</a>
  24.          <a href="">日本美女</a>
  25.          <a href="">美国美女</a>
  26.          <a href="">国内美女</a>
  27.          <a href="">AV美女</a>
  28.      </div>
  29.         <!-- 商品展示区-->
  30.      <div class="goods">
  31.     <!-- 1.左侧为商品列表 -->
  32.         <div class="goods-list">
  33.             <!--商品简介-->
  34.             <div class="intro">
  35.             <a href="">
  36.                 <img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120">
  37.             </a>
  38.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  39.             <div>
  40.                 <span>&yen;333</span>
  41.                 <span>美女</span>
  42.             </div>
  44.         </div>
  45.             <div class="intro">
  46.                 <a href="">
  47.                     <img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120">
  48.                 </a>
  49.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  50.                 <div>
  51.                     <span>&yen;333</span>
  52.                     <span>美女</span>
  53.                 </div>
  55.             </div>
  56.             <div class="intro">
  57.                 <a href="">
  58.                     <img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120">
  59.                 </a>
  60.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  61.                 <div>
  62.                     <span>&yen;333</span>
  63.                     <span>美女</span>
  64.                 </div>
  66.             </div>
  67.             <div class="intro">
  68.                 <a href="">
  69.                     <img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120">
  70.                 </a>
  71.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  72.                 <div>
  73.                     <span>&yen;333</span>
  74.                     <span>美女</span>
  75.                 </div>
  77.             </div>
  78.             <div class="intro">
  79.                 <a href="">
  80.                     <img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120">
  81.                 </a>
  82.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  83.                 <div>
  84.                     <span>&yen;333</span>
  85.                     <span>美女</span>
  86.                 </div>
  88.             </div>
  89.             <div class="intro">
  90.                 <a href="">
  91.                     <img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120">
  92.                 </a>
  93.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  94.                 <div>
  95.                     <span>&yen;333</span>
  96.                     <span>美女</span>
  97.                 </div>
  99.             </div>
  100.             <div class="intro">
  101.                 <a href="">
  102.                     <img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120">
  103.                 </a>
  104.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  105.                 <div>
  106.                     <span>&yen;333</span>
  107.                     <span>美女</span>
  108.                 </div>
  110.             </div>
  111.             <div class="intro">
  112.                 <a href="">
  113.                     <img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120">
  114.                 </a>
  115.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  116.                 <div>
  117.                     <span>&yen;333</span>
  118.                     <span>美女</span>
  119.                 </div>
  121.             </div>
  122.         </div>
  123.     <!--2.右侧功能快速入口 -->
  124.          <div class="quick-entry">
  125.              <a href=""><img src="../../static/images/ad/1.png" alt=""></a>
  126.              <a href=""><img src="../../static/images/ad/2.png" alt=""></a>
  127.              <a href=""><img src="../../static/images/ad/3.png" alt=""></a>
  128.              <a href=""><img src="../../static/images/ad/4.png" alt=""></a>
  129.              <div>
  130.                  <a href=""><img src="../../static/images/ad/image.png" alt=""></a>
  131.                  <a href=""><img src="../../static/images/ad/ad2.jpg" alt=""></a>
  132.              </div>
  134.          </div>
  135.      </div>
  137.  </div>
  138. </body>
  139. </html>
  1. /*导入元素的公共初始化样式表*/
  2. @import "../public_reset.css";
  3. /*大标题组件*/
  4. @import url(../public_headline/public_headline.css);
  5. .public-second-hand{
  6.     width: 1200px;
  7.     padding: 10px;
  8.     box-sizing: border-box;
  9.     margin: auto;
  10.     border-radius: 5px;
  11.     background-color: #fff;
  12. }
  13. .public-second-hand:hover{
  14.     box-shadow: 0 0 8px #888;
  15. }
  16. /*标题1*/
  17. .public-second-hand > .title1{
  18.     height: 50px;
  19.     border-bottom: 1px solid #ccc;
  20.     box-sizing: border-box;
  21. }
  22. .public-second-hand > .title1 a{
  23.     font-size: 23px;
  24.      margin-right: 20px;
  25. }
  26. .public-second-hand > .title1 >span{
  27.     color:red;
  28. }
  29. /*标题2*/
  30. .public-second-hand > .title2{
  31.     height: 55px;
  32. }
  33. .public-second-hand > .title2 span{
  34.     font-size:23px;
  35.     color:red;
  36. }
  37. .public-second-hand > .title2 span ~ a{
  38.     padding-left: 20px;
  39. }
  40. .public-second-hand > .title2 span ~ a:hover{color:#f60;}
  41. /*商品展示区*/
  42. .public-second-hand > .goods{
  43.     height: 440px;
  44.     /*转为弹性容器*/
  45.     display: flex;
  46. }
  47. .public-second-hand > .goods > .goods-list{
  48.     padding: 10px;
  49.     flex-basis: 800px;
  50.     display: flex;
  51.     flex-flow: row wrap;
  52.     justify-content: space-between;
  53. }
  54. .public-second-hand > .goods > .goods-list >.intro{
  55.     width: 178px;
  56.     height: 200px;
  57.     display: flex;
  58.     flex-flow:column nowrap;
  59.     justify-content: space-between;
  60. }
  61. .public-second-hand > .goods > .goods-list >.intro img{border: 1px solid #ccc;
  62. border-radius:5px;
  63. }
  64. .public-second-hand > .goods > .goods-list >.intro >div{
  65.     display: flex;
  66.     /*justify-content: space-between;*/
  67. }
  68. .public-second-hand > .goods > .goods-list >.intro span:first-of-type{
  69.     color: red;
  70. }
  71. .public-second-hand > .goods > .goods-list >.intro span:last-of-type{
  72.     background-color: #55a532;
  73.     color:#fff;
  74.     padding: 0 5px;
  75.     margin-left: auto;
  76. }
  78. /*功能快速入口区*/
  79. .public-second-hand > .goods > .quick-entry{
  80.     flex-basis: 400px;
  81.     padding: 10px;
  82.     display: flex;
  83.     flex-flow: row wrap;
  84.     justify-content: space-between;
  85. }
  86. .public-second-hand > .goods > .quick-entry img{
  87.     width: 190px;
  88.     height: 130px;
  89. }
  90. .public-second-hand > .goods > .quick-entry div{
  91.     width: 400px;
  92.     display: flex;
  93.     flex-direction: column;
  95. }
  96. .public-second-hand > .goods > .quick-entry > div img{
  97.     width: 393px;
  98.     height: 60px;
  99. }

flex元素排列效果直接被flex容器的宽和高影响，当没有多余剩余空间时，每个flex项目会被挤到一起，没有任何间距。

评论与回复

首先对效果页面进行结构分析，简单可以将整个页面分为上下就结构。

然后写出基本的dom结构代码，我要评论区分为上中下结构，中间部分左右结构。其中有一个小技巧，将用户头像放入label能够实现点击头像，焦点进入输入框中。为了不然用于随意拉动文本框， textarea部分css代码设置resize: none;。

我要评论区主体部分为左右结构，有了flex布局后，时间和回复部分能够很快的实现一个靠左一个靠右的效果。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="../../static/font/iconfont.css">
  6.     <link rel="stylesheet" href="public_comment_reply.css">
  7.     <title>评论与回复</title>
  8. </head>
  9. <body>
  10. <div class="public-comment-reply">
  11.    <!-- 评论区-->
  12.     <div class="comment">
  13.         <h3>我要评论</h3>
  14.         <div>
  15.             <label for="comment"><img src="../../static/images/user.png" alt=""></label>
  16.             <textarea name="" id="comment" ></textarea>
  17.         </div>
  18.         <button>发表评论</button>
  19.     </div>
  20.     <!--回复区-->
  21.     <!--回复区-->
  22.     <div class="reply">
  23.         <h3>最新留言</h3>
  24.         <div>
  25.         <img src="../../static/images/user.png" alt="">
  26.         <div class="datail">
  27.             <span>用户昵称</span>
  28.             <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  29.             <div>
  30.                 <span>2019-12-12 15:34:23发表</span>
  31.                 <span><i class="iconfont icon-dianzan"></i>回复</span>
  32.             </div>
  33.         </div>
  34.         </div>
  35.         <div>
  36.             <img src="../../static/images/user.png" alt="">
  37.             <div class="datail">
  38.                 <span>用户昵称</span>
  39.                 <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  40.                 <div>
  41.                     <span>2019-12-12 15:34:23发表</span>
  42.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  43.                 </div>
  44.             </div>
  45.         </div>
  46.         <div>
  47.             <img src="../../static/images/user.png" alt="">
  48.             <div class="datail">
  49.                 <span>用户昵称</span>
  50.                 <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  51.                 <div>
  52.                     <span>2019-12-12 15:34:23发表</span>
  53.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  54.                 </div>
  55.             </div>
  56.         </div>
  57.     </div>
  59. </div>
  60. </body>
  61. </html>
  1. @import "../public_reset.css";
  2. .public-comment-reply {
  3.     padding: 15px;
  4.     box-sizing: border-box;
  5.     background-color: #fff;
  6.     display: flex;
  7.     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 #ccc;
  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 #ccc;
  23. }
  24. .public-comment-reply > .comment > div{
  25.     padding: 15px;
  26.     height: 180px;
  27.     display: flex;
  28. }
  29. .public-comment-reply > .comment > div label{
  30.     align-self: flex-start;
  31. }
  32. .public-comment-reply > .comment > div textarea{
  33.     height: 180px;
  34.     margin-left: 20px;
  35.     flex:1;
  36.     resize: none;
  37. }
  38. .public-comment-reply > .comment > div textarea:hover{
  39.     box-shadow: 0px 0px 10px #ccc;
  40. }
  41. .public-comment-reply > .comment > button{
  42.     font-size: 14px;
  43.     background-color: #ff0000;
  44.     border: none;
  45.     color:#fff;
  46.     width: 150px;
  47.     height: 40px;
  48.     margin-left: auto;
  49.     /*align-self: end;*/
  50. }
  51. .public-comment-reply > .comment > button:hover{background:dodgerblue;cursor: pointer}
  52. .public-comment-reply > .reply{
  53.     display: flex;
  54.     flex-direction: column;
  55.     padding: 15px 0;
  56. }
  57. .public-comment-reply > .reply > h3{
  58.     padding: 20px 0;}
  59. .public-comment-reply > .reply > div{
  60.     display: flex;
  61.     margin-top: 25px;
  63. }
  64. .public-comment-reply > .reply > div >img{
  65.     align-self: center;
  66. }
  67. .public-comment-reply > .reply > div >.datail{
  68.     flex:1;
  69.     display: flex;
  70.     flex-direction: column;
  71.     margin-left: 20px;
  72.     height: 90px;
  73.     justify-content:space-between;
  74. }
  75. .public-comment-reply > .reply > div >.datail >div{
  76.     display: flex;
  77.     justify-content: space-between;
  78. }
  79. .public-comment-reply > .reply > div >.datail >div i{
  80.     color:red;
  81.     font-size: 1.2rem;
  82.     padding-right: 8px;
  83. }

总结：通过做了以上两个效果实例，发现flex是一个非常神奇。由于接触的时间不长，对很多地方的概念可能存在有疑惑。
问题1：例如二手交易区，为何设置初始化宽度800 与 400， 能用的空间只有1180？
问题2：当空间不够的时候，默认会缩小。可是在写完页面后发现，左侧部分宽度缩小，右侧宽度并没有发生什么改变。flex计算机制究竟是怎么计算的。


问题3：这两块换位置，实现出来的效果会不一样吗？flex容器项目中都不用写box-sizing: border-box;是因为用了无效，还是为什么？测试了项目宽度没有任何变化

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：弹性项目也普通盒子有区别, 有flex-basis控制宽度, 不要再用原生盒子模型去思考
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