search

博客列表 >两个经典的组件flex写法案例（商品列表及评论区块）--PHP线上班十期1226

两个经典的组件flex写法案例（商品列表及评论区块）--PHP线上班十期1226

高的PHP十期培训学习笔记
高的PHP十期培训学习笔记原创
2019年12月31日 12:39:461074浏览

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

要实现的效果

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

结构如下

按照分析的结构写出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;
上一条：前端学习-1223号作业下一条：12月30日—laravel框架的使用原生SQL对数据库进行增删查改操作
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多