search

博客列表 >第十期FLEX二手商品列表与评论与回复思路总结（2019-12-26）

第十期FLEX二手商品列表与评论与回复思路总结（2019-12-26）

齐齐
齐齐原创
2019年12月29日 17:13:46685浏览

二手交易商品列表

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

第二步：写出基本的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;是因为用了无效，还是为什么？测试了项目宽度没有任何变化

上一条：12月23日_jQuery文档处理、筛选、属性和效果下一条：2019-12-27 m.php.cn网站的首页布局(Flex实现)-PHP培训十期
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多