Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 两个经典的组件flex写法案例（商品列表及评论区块）--PHP线上班十期1226
Blogger Information
Blog 25
fans 1
comment 1
visits 20506
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写法案例（商品列表及评论区块）--PHP线上班十期1226
高的PHP十期培训学习笔记
Original
1075 people have browsed it

案例一：商品列表展示区块的实现方法

要实现的效果

首先分析这个案例的结构，并确定关系

结构如下

按照分析的结构写出HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>二手商品列表</title>
  6.     <link rel="stylesheet" href="public_second_hand.css">
  7. </head>
  8. <body>
  9. <!--标题组件-->
  10. <div class="public-headline">
  11.     <span>二手交易</span>
  12. </div>
  14. <!--交易专区-->
  15. <div class="publi-second-hand">
  16. <!--    抢好货标题-->
  17.     <div class="title1">
  18.         <a href="">抢好货</a>
  19.         <span>0元低价，便捷，安全</span>
  20.     </div>
  21. <!--    分类标题-->
  22.     <div class="title2">
  23.         <span>热门分类</span>
  24. <!--        在光标所在行按CTRL+D可以快速复制当前行-->
  25.         <a href="">美女写真</a>
  26.         <a href="">日本美女</a>
  27.         <a href="">美国美女</a>
  28.         <a href="">国内美女</a>
  29.     </div>
  30. <!--    商品内容区-->
  31.     <div class="goods">
  32. <!--        商品列表-->
  33.         <div class="goods-list">
  34. <!--            单个商品块-->
  35.             <div class="intro">
  36.                 <a href=""><img src="../../../static/images/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.             <!--            单个商品块-->
  44.             <div class="intro">
  45.                 <a href=""><img src="../../../static/images/shop2.jpg" alt="" width="176" height="120"></a>
  46.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  47.                 <div>
  48.                     <span>&yen; 333</span>
  49.                     <span>美女</span>
  50.                 </div>
  51.             </div>
  52.             <!--            单个商品块-->
  53.             <div class="intro">
  54.                 <a href=""><img src="../../../static/images/shop3.jpg" alt="" width="176" height="120"></a>
  55.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  56.                 <div>
  57.                     <span>&yen; 333</span>
  58.                     <span>美女</span>
  59.                 </div>
  60.             </div>
  61.             <!--            单个商品块-->
  62.             <div class="intro">
  63.                 <a href=""><img src="../../../static/images/shop4.jpg" alt="" width="176" height="120"></a>
  64.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  65.                 <div>
  66.                     <span>&yen; 333</span>
  67.                     <span>美女</span>
  68.                 </div>
  69.             </div>
  70.             <!--            单个商品块-->
  71.             <div class="intro">
  72.                 <a href=""><img src="../../../static/images/shop5.jpg" alt="" width="176" height="120"></a>
  73.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  74.                 <div>
  75.                     <span>&yen; 333</span>
  76.                     <span>美女</span>
  77.                 </div>
  78.             </div>
  79.             <!--            单个商品块-->
  80.             <div class="intro">
  81.                 <a href=""><img src="../../../static/images/shop6.jpg" alt="" width="176" height="120"></a>
  82.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  83.                 <div>
  84.                     <span>&yen; 333</span>
  85.                     <span>美女</span>
  86.                 </div>
  87.             </div>
  88.             <!--            单个商品块-->
  89.             <div class="intro">
  90.                 <a href=""><img src="../../../static/images/shop7.jpg" alt="" width="176" height="120"></a>
  91.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  92.                 <div>
  93.                     <span>&yen; 333</span>
  94.                     <span>美女</span>
  95.                 </div>
  96.             </div>
  97.             <!--            单个商品块-->
  98.             <div class="intro">
  99.                 <a href=""><img src="../../../static/images/shop8.jpg" alt="" width="176" height="120"></a>
  100.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  101.                 <div>
  102.                     <span>&yen; 333</span>
  103.                     <span>美女</span>
  104.                 </div>
  105.             </div>
  107.         </div>
  108. <!--        右侧图片功能区-->
  109.         <div class="quick-entry">
  110.             <a href=""><img src="../../../static/images/1.png" alt=""></a>
  111.             <a href=""><img src="../../../static/images/2.png" alt=""></a>
  112.             <a href=""><img src="../../../static/images/3.png" alt=""></a>
  113.             <a href=""><img src="../../../static/images/4.png" alt=""></a>
  114.             <div>
  115.                 <a href=""><img src="../../../static/images/ad1.png" alt=""></a>
  116.                 <a href=""><img src="../../../static/images/ad2.jpg" alt=""></a>
  117.             </div>
  118.         </div>
  119.     </div>
  120. </div>
  121. </body>
  122. </html>

先运行一下看下效果

添加公共初始化的样式表

将PhpStorm显示方式设置为左右两栏方式，方便对照HTML

写出CSS样式表,并做好注释，尤其是自己还不太熟悉的命令

一定要做好注释加深印象

  1. /*引入初始化样式表*/
  2. @import "../public_reset.css";
  4. /*引入标题样式*/
  5. @import "../../public/public_headline/public-headline.css";
  8. /*交易专区的样式表*/
  9. .publi-second-hand {
  10.     width: 1200px;
  11.     padding: 10px;
  12.     /*防止盒子撑大*/
  13.     box-sizing: border-box;
  14.     margin: auto;
  15.     /*加圆角*/
  16.     border-radius: 5px;
  17.     background-color: #fff;
  18. }
  19. /*鼠标经过加阴影*/
  20. .publi-second-hand:hover {
  21.     box-shadow: 0 0 8px #888;
  22. }
  24. /*抢好货标题*/
  25. .publi-second-hand > .title1 {
  26.     height: 50px;
  27.     /*一个像素的的底部实线*/
  28.     border-bottom: 1px solid #cccccc;
  29.     box-sizing: border-box;
  30. }
  31. .publi-second-hand > .title1 > a {
  32.     font-size: 23px;
  33.     margin-right: 20px;
  34. }
  35. .publi-second-hand > .title1 > span {
  36.     color: red;
  37. }
  39. /*分类标题*/
  40. .publi-second-hand > .title2 {
  41.     height: 55px;
  42. }
  43. .publi-second-hand > .title2 > span {
  44.     color: red;
  45.     font-size: 23px;
  46. }
  47. .publi-second-hand > .title2 > span ~ a {
  48.     padding-left: 20px;
  49. }
  50. /*鼠标经过分类标题时的颜色变化*/
  51. .publi-second-hand > .title2 > span ~ a:hover {
  52.     color: lightcoral;
  53. }
  55. /*商品内容区*/
  56. .publi-second-hand > .goods {
  57.     height: 440px;
  58.     /*转为flex*/
  59.     display: flex;
  60. }
  61. .publi-second-hand > .goods > .goods-list {
  62.     padding: 10px;
  63.     flex-basis: 800px;
  64.     /*转为flex*/
  65.     display: flex;
  66.     flex-flow: row wrap;
  67.     /*设置对齐方式为两端对齐*/
  68.     justify-content: space-between;
  69. }
  70. .publi-second-hand > .goods > .goods-list > .intro{
  71.     width: 178px;
  72.     height: 200px;
  73.     /*转为flex*/
  74.     display: flex;
  75.     /*设置主轴方向，并不允许换行*/
  76.     flex-flow: column nowrap;
  77.     justify-content: space-between;
  78. }
  79. .publi-second-hand > .goods > .goods-list > .intro img {
  80.     border: 1px solid #cccccc;
  81.     border-radius: 5px;
  82. }
  84. .publi-second-hand > .goods > .goods-list > .intro span:first-of-type {
  85.     color: red;
  86. }
  87. .publi-second-hand > .goods > .goods-list > .intro > div {
  88.     display: flex;
  89. }
  90. .publi-second-hand > .goods > .goods-list > .intro span:last-of-type {
  91.     color: white;
  92.     background-color: #55ce9f;
  93.     padding: 0 5px;
  94.     margin-left: auto;
  95. }
  97. /*右侧图片功能区*/
  98. .publi-second-hand > .goods > .quick-entry {
  99.     flex-basis: 400px;
  100.     padding: 10px;
  101.     display: flex;
  102.     /*按行方向排列并允许换行*/
  103.     flex-flow: row wrap;
  104.     justify-content: space-between;
  105. }
  106. .publi-second-hand > .goods > .quick-entry img {
  107.     width: 190px;
  108.     height: 130px;
  109. }
  110. .publi-second-hand > .goods > .quick-entry > div {
  111.     width: 400px;
  112.     display: flex;
  113.     /*按列方向排列*/
  114.     flex-direction: column;
  115. }
  117. .publi-second-hand > .goods > .quick-entry > div img {
  118.     width: 393px;
  119.     height: 60px;
  120. }

最终运行效果如下

案例二:评论组件的实现方法及步骤

要实现的效果

首先拿到图需要分析架构，写出HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>评论组件</title>
  6. <!--    引入字体图标样式表-->
  7.     <link rel="stylesheet" href="../../../static/font/iconfont.css">
  8.     <link rel="stylesheet" href="public_comment_reply.css">
  9. </head>
  10. <body>
  11. <!--先写一个大区块（同组件名）-->
  12. <div class="public-comment-reply">
  13. <!--    发表评论区-->
  14.     <div class="public-comment">
  15.         <h3>发表评论</h3>
  16.         <div>
  18.             <label for="public-comment">
  19.                 <img src="../../../static/images/user.jpg" alt="">
  20.             </label>
  21.             <textarea name="" id="public-comment"></textarea>
  22.         </div>
  23.         <button>发表评论</button>
  24.     </div>
  25. <!--    评论列表显示区-->
  26.     <div class="public-reply">
  27. <h3>最新回复</h3>
  28. <!--        单条评论-->
  29.         <div>
  30.             <img src="../../../static/images/user.jpg" alt="">
  31.             <div class="detail">
  32.                 <span>用户名字</span>
  33.                 <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  34.                 <div>
  35.                     <span>2019-12-12 15:34:23发表</span>
  36.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  37.                 </div>
  38.             </div>
  39.         </div>
  40.         <div>
  41.             <img src="../../../static/images/user.jpg" alt="">
  42.             <div class="detail">
  43.                 <span>用户名字</span>
  44.                 <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  45.                 <div>
  46.                     <span>2019-12-12 15:34:23发表</span>
  47.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  48.                 </div>
  49.             </div>
  50.         </div>
  51.         <div>
  52.             <img src="../../../static/images/user.jpg" alt="">
  53.             <div class="detail">
  54.                 <span>用户名字</span>
  55.                 <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  56.                 <div>
  57.                     <span>2019-12-12 15:34:23发表</span>
  58.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  59.                 </div>
  60.             </div>
  61.         </div>
  62.         <div>
  63.             <img src="../../../static/images/user.jpg" alt="">
  64.             <div class="detail">
  65.                 <span>用户名字</span>
  66.                 <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  67.                 <div>
  68.                     <span>2019-12-12 15:34:23发表</span>
  69.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  70.                 </div>
  71.             </div>
  72.         </div>
  73.         <div>
  74.             <img src="../../../static/images/user.jpg" alt="">
  75.             <div class="detail">
  76.                 <span>用户名字</span>
  77.                 <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  78.                 <div>
  79.                     <span>2019-12-12 15:34:23发表</span>
  80.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  81.                 </div>
  82.             </div>
  83.         </div>
  84.     </div>
  87. </div>
  89. </body>
  91. </html>

运行效果如下：

引入公共样式表后的效果：

  1. /*初始化样式表*/
  2. @import "../public_reset.css";

按照效果图完成CSS样式部分代码的编写(做好注释方便后期修改)：

  1. /*初始化样式表*/
  2. @import "../public_reset.css";
  4. /*评论样式开始*/
  5. .public-comment-reply {
  6.     padding: 15px;
  7.     /*防止撑大*/
  8.     box-sizing: border-box;
  9.     background-color: #fff;
  10.     /*转为flex*/
  11.     display: flex;
  12.     /*按列方向显示*/
  13.     flex-direction: column;
  14. }
  15. /*定义头像的样式*/
  16. .public-comment-reply img {
  17.     width: 60px;
  18.     height: 60px;
  19.     /*圆角*/
  20.     border-radius: 5px;
  21.     /*加边框和阴影*/
  22.     box-shadow: 1px 1px 3px #cccccc;
  23. }
  24. .public-comment-reply > .public-comment {
  25.     display: flex;
  26.     flex-direction: column;
  27. }
  28. .public-comment-reply > .public-comment h3 {
  29.     padding: 20px 0;
  30.     /*在顶部加一个线条分隔*/
  31.     border-top: 1px solid #cccccc;
  32. }
  34. .public-comment-reply > .public-comment > div {
  35.     padding: 15px;
  36.     height: 150px;
  37.     display: flex;
  38.     /*按行显示，不允许换行*/
  39.     flex-flow: row nowrap;
  40. }
  41. .public-comment-reply > .public-comment > div img {
  42.     /*单独定义头像的对齐方式*/
  43.     align-self: flex-start;
  44. }
  46. .public-comment-reply > .public-comment > div textarea {
  47.     height: 150px;
  48.     margin-left: 20px;
  49.     /*不允许拉伸文本框*/
  50.     resize: none;
  51.     flex: auto;
  52. }
  53. /*文本框加阴影*/
  54. .public-comment-reply > .public-comment > div textarea:hover {
  56.     box-shadow: 0 0 8px #888888;
  57. }
  58. .public-comment-reply > .public-comment > button {
  59.     font-size: 14px;
  60.     background-color: #f64c59;
  61.     /*去掉按钮边框*/
  62.     border: none;
  63.     color: white;
  64.     width: 150px;
  65.     height: 40px;
  66. /*定义按钮的对齐位置*/
  67.     align-self:  end;
  68. }
  69. /*鼠标经过按钮时的效果*/
  70. .public-comment-reply > .public-comment > button:hover {
  71.     background-color: #178cee;
  72.     box-shadow: 0 0 8px #888888;
  73.     /*给鼠标变一个指针（小手）*/
  74.     cursor: pointer;
  75. }
  77. /*回复区*/
  78. .public-comment-reply > .public-reply {
  79.     display: flex;
  80.     /*列对齐*/
  81.     flex-direction: column;
  82.     padding: 15px 0;
  83. }
  85. .public-comment-reply > .public-reply > h3 {
  86.     padding: 20px 0;
  87. }
  89. .public-comment-reply > .public-reply > div {
  90.     display: flex;
  91.     margin-top: 30px;
  92. }
  93. /*图片居中*/
  94. .public-comment-reply > .public-reply > div > img {
  95.     align-self: center;
  96. }
  97. .public-comment-reply > .public-reply > div > .detail {
  98.     flex: auto;
  100.     display: flex;
  101.     flex-direction: column;
  102.     margin-left: 20px;
  103.     height: 90px;
  104.     /*两端对齐*/
  105.     justify-content: space-between;
  106. }
  108. .public-comment-reply > .public-reply > div > .detail > div {
  109.     display: flex;
  110.     /*两端对齐*/
  111.     justify-content: space-between;
  112. }
  114. .public-comment-reply > .public-reply > div > .detail > div i {
  115.     color: red;
  116.     /*默认字体的1.2倍*/
  117.     font-size: 1.2rem;
  118.     margin-right: 5px;
  119. }

最终运行效果

此效果中将 “发表评论” 的按钮靠右侧对齐，和参照图有所区别，更美观，代码如下：

  1. /*定义按钮的对齐位置*/
  2.     align-self:  end;
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