Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1226作业-用Flex布局实现二手商品组件和评论回复组件的思路与实现过程-php培训十期线上班
Blogger Information
Blog 22
fans 1
comment 0
visits 20234
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
1226作业-用Flex布局实现二手商品组件和评论回复组件的思路与实现过程-php培训十期线上班
Dseven
Original
839 people have browsed it

1.效果图

2.设计思路

2.1分析示意图

2.2flex布局分析

作业要求为用flex来实现页面效果，flex是弹性容器，特点是具有主轴和交叉轴，项目可以按轴排列。

第一步：合并同类项，由外至内依次划分出不同的弹性容器。

这个组件从外至内大概分为红、蓝、黄、绿四级弹性容器。

按照红色容器的排布来看，是纵向排列，因此其父级容器应该是垂直不换行。

标题行与文字导航区结构相似，里面的内容按样式均可分为两块，为了便于控制，设置span标签。左右间距可以通过margin或者padding来实现，如果用了padding的方法，需要加设box-size来控制盒子尺寸。

最下面的两个蓝色容器呈现左右分区的特点，因此其父级容器设置主轴为横向不换行。

底部左边蓝色区块，平均分布着8个样式相同的绿色区块，因此该容器可以设置为横向换行。其中每个绿色区块还可以细化为图片、介绍和价格标签三块，上中下分布。

底部右边蓝色区块内部，呈现出上下两类的特点，可以将上下两部分成两个容器。

第二步：确定页面尺寸，字体大小、图片大小、容器大小

第三步：按照从上至下，从左往右，依次写出页面的DOM结构

第四步：按照同样的次序写出css样式，同步观察调整

3.页面源码

3.1HTML代码：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <link rel="stylesheet" href="public_second_hand.css">
  9.     <title>public_second_hand</title>
  11. </head>
  12. <body>
  13.     <div class="public-headline">
  14.     <span>二手交易</span>
  15. </div>
  16.     <div class="public-second-hand">
  17.         <div class="title1">
  18.             <a href="">抢好货</a>
  19.             <span>0低价,便捷,安全,快速</span>
  20.         </div>
  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.         <div class="goods">
  30.             <div class="goods-list">
  31.                 <div class="img-info">
  32.                     <a href=""><img src="../../static/images/shop/shop1.jpg" alt=""></a>
  33.                     <a href="">美女性感写真海报墙艺术装饰画贴画图</a>
  34.                     <div>
  35.                         <span>&yen; 333</span>
  36.                         <span>美女</span>
  37.                     </div>
  38.                 </div>
  39.                 <div class="img-info">
  40.                     <a href=""><img src="../../static/images/shop/shop2.jpg" alt=""></a>
  41.                     <a href="">美女性感写真海报墙艺术装饰画贴画图2</a>
  42.                     <div>
  43.                         <span>&yen; 333</span>
  44.                         <span>美女</span>
  45.                     </div>
  46.                 </div>
  47.                 <div class="img-info">
  48.                     <a href=""><img src="../../static/images/shop/shop3.jpg" alt="" ></a>
  49.                     <a href="">美女性感写真海报墙艺术装饰画贴画图3</a>
  50.                     <div>
  51.                         <span>&yen; 333</span>
  52.                         <span>美女</span>
  53.                     </div>
  54.                 </div>
  55.                 <div class="img-info">
  56.                     <a href=""><img src="../../static/images/shop/shop4.jpg" alt="" ></a>
  57.                     <a href="">美女性感写真海报墙艺术装饰画贴画图4</a>
  58.                     <div>
  59.                         <span>&yen; 333</span>
  60.                         <span>美女</span>
  61.                     </div>
  62.                 </div>
  63.                 <div class="img-info">
  64.                     <a href=""><img src="../../static/images/shop/shop5.jpg" alt="" ></a>
  65.                     <a href="">美女性感写真海报墙艺术装饰画贴画图5</a>
  66.                     <div>
  67.                         <span>&yen; 333</span>
  68.                         <span>美女</span>
  69.                     </div>
  70.                 </div>
  71.                 <div class="img-info">
  72.                     <a href=""><img src="../../static/images/shop/shop6.jpg" alt="" ></a>
  73.                     <a href="">美女性感写真海报墙艺术装饰画贴画图6</a>
  74.                     <div>
  75.                         <span>&yen; 333</span>
  76.                         <span>美女</span>
  77.                     </div>
  78.                 </div>
  79.                 <div class="img-info">
  80.                     <a href=""><img src="../../static/images/shop/shop7.jpg" alt="" ></a>
  81.                     <a href="">美女性感写真海报墙艺术装饰画贴画图7</a>
  82.                     <div>
  83.                         <span>&yen; 333</span>
  84.                         <span>美女</span>
  85.                     </div>
  86.                 </div>
  87.                 <div class="img-info">
  88.                     <a href=""><img src="../../static/images/shop/shop8.jpg" alt=""></a>
  89.                     <a href="">美女性感写真海报墙艺术装饰画贴画图8</a>
  90.                     <div>
  91.                         <span>&yen; 333</span>
  92.                         <span>美女</span>
  93.                     </div>
  94.                 </div>
  95.             </div>
  96.             <div class="quick-entry">
  97.                 <a href=""><img src="../../static/images/ad/1.png" alt=""></a>
  98.                 <a href=""><img src="../../static/images/ad/2.png" alt=""></a>
  99.                 <a href=""><img src="../../static/images/ad/3.png" alt=""></a>
  100.                 <a href=""><img src="../../static/images/ad/4.png" alt=""></a>
  101.                 <div>
  102.                     <img src="../../static/images/ad/image.png" alt="">
  103.                     <img src="../../static/images/ad/ad2.jpg" alt="">
  104.                 </div>
  105.             </div>
  106.         </div>
  107.     </div>
  108. </body>
  109. </html>

3.2CSS样式

  1. /*引入初始化样式表*/
  2. @import "../reset.css";
  3. @import "../public_headline/public_headline.css";
  5. /*设置最外层div样式*/
  6. .public-second-hand {
  7.     display: flex;
  8.     flex-flow: column nowrap;
  9.     width: 1200px;
  10.     margin:auto;
  11.     padding: 10px;
  12.     box-sizing: border-box;
  13.     border-radius: 5px;
  14.     background-color: #ffffff;
  15. }
  16. .public-second-hand:hover {
  17.     box-shadow: 0 0 5px;
  18. }
  20. /*设置标题1样式*/
  21. .public-second-hand > .title1 {
  22.     height: 50px;
  23.     border-bottom: 1px solid #888888;
  24. }
  25. .public-second-hand>.title1 a{
  26.     font-size:23px;
  27.     margin-right: 20px;
  28. }
  29. .public-second-hand>.title1>span {
  30.     font-size: 13px;
  31.     color: red;
  32. }
  34. /*设置标题2样式*/
  35. .public-second-hand > .title2 {
  36.     height: 55px;
  37. }
  38. .public-second-hand > .title2 > span {
  39.     font-size: 23px;
  40.     color: red;
  41. }
  42. .public-second-hand > .title2 > a {
  43.     padding-left: 20px;
  44. }
  46. /*设置商品展示区样式*/
  47. .public-second-hand > .goods {
  48.     display: flex;
  49.     flex-flow: row nowrap;
  50.     height: 440px;
  51. }
  52. .public-second-hand > .goods > .goods-list {
  53.     padding: 10px;
  54.     display: flex;
  55.     flex-basis: 800px;
  56.     flex-flow: row wrap;
  57.     justify-content: space-between;
  58. }
  59. .public-second-hand > .goods > .goods-list .img-info {
  60.     display: flex;
  61.     flex-flow: column nowrap;
  62.     width: 178px;
  63.     height: 200px;
  64.     justify-content: space-between;
  65. }
  66. .public-second-hand > .goods >.goods-list >.img-info img {
  67.     width: 176px;
  68.     height: 120px ;
  69.     border-radius: 5px;
  70.     border: 1px solid rgb(204 204 204);
  71. }
  72. .public-second-hand > .goods >.goods-list >.img-info div {
  73.      display: flex;
  74.     justify-content: space-between;
  75.  }
  76. .public-second-hand > .goods >.goods-list >.img-info span:first-of-type{
  77.     color: red;
  78. }
  79. .public-second-hand > .goods >.goods-list >.img-info span:last-of-type{
  80.     color: white;
  81.     background-color: lightseagreen;
  82.     padding:0 5px;
  83.     margin-left: auto;
  84. }
  86. /*设置快速入口样式，弹性盒子，因为父级元素是弹性容器，设置基础宽度400，容器内项目两端对齐，自动换行*/
  87. .public-second-hand > .goods >.quick-entry {
  88.     display: flex;
  89.     flex-basis: 400px;
  90.     padding: 10px;
  91.     flex-flow: row wrap;
  92.     justify-content: space-between;
  93. }
  94. /*设置图片尺寸*/
  95. .public-second-hand >.goods > .quick-entry   img{
  96.     width: 190px;
  97.     height: 130px;
  98. }
  99. /*将容器设为弹性容器，纵向排列不换行，因为其同时是上一级的弹性项目，需要设置宽度*/
  100. .public-second-hand >.goods > .quick-entry > div {
  101.     display: flex;
  102.     width: 400px;
  103.     flex-flow:column nowrap;
  104. }
  105. /*设置图片尺寸*/
  106. .public-second-hand >.goods > .quick-entry > div img {
  107.     width: 393px;
  108.     height: 60px;
  109. }

4.评论回复区的页面分析图与源码

4.1页面效果图

4.2页面分析图

4.3分析思路

基本思路与上个页面相同，需要注意的是：

“我要评论”不能用行内元素的标签，只能用块元素标签，因为要设置上面的那个分隔条。

文本区域可以设置为flex：1或者flex：auto或者flex-grow：1，让其自动扩展。

在弹性盒子嵌套时，思路要清晰注意两点，一是轴向，二是区分容器与项目。

4.4源码

html代码：

  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.         <div class="comment-title">
  12.         <h3>我要评论</h3>
  13.         <div class="comment">
  14.             <label for="comment-area" ><img src="../../static/images/user.png" alt=""></label>
  15.             <input type="textarea" class="comment-area" id="comment-area" name="comment-area">
  16.         </div>
  17.         <button class="submit" id="submit">发表评论</button>
  18.         </div>
  19.         <div class="reply">
  20.             <h3>最新回复</h3>
  21.             <div class="userreply">
  22.             <img src="../../static/images/user.png" alt="">
  23.             <div>
  24.                 <span>用户昵称</span>
  25.                 <span>留言内容：PHP中文网，是一个有温度，有思想的学习平台</span>
  26.                 <div class="time">
  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="userreply">
  33.                 <img src="../../static/images/user.png" alt="">
  34.                 <div>
  35.                     <span>用户昵称</span>
  36.                     <span>留言内容：PHP中文网，是一个有温度，有思想的学习平台</span>
  37.                     <div class="time">
  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="userreply">
  44.                 <img src="../../static/images/user.png" alt="">
  45.                 <div>
  46.                     <span>用户昵称</span>
  47.                     <span>留言内容：PHP中文网，是一个有温度，有思想的学习平台</span>
  48.                     <div class="time">
  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="userreply">
  55.                 <img src="../../static/images/user.png" alt="">
  56.                 <div>
  57.                     <span>用户昵称</span>
  58.                     <span>留言内容：PHP中文网，是一个有温度，有思想的学习平台</span>
  59.                     <div class="time">
  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. /*引入初始化样式*/
  2. @import url(../reset.css);
  3. /*将入口类设置为flex，纵向排列*/
  4. .public-comment-reply{
  5.     display: flex;
  6.     flex-direction: column;
  7.     padding: 15px;
  8.     box-sizing: border-box;
  9. }
  10. /*将回复区设置为flex，纵向排列*/
  11. .public-comment-reply > .comment-title {
  12.     display: flex;
  13.     flex-direction: column;
  14. }
  15. /*设置标题格式，此处不能用span，因为它是内联块，加上边沿时不能横向扩展到整个页面，用h3是块元素，加上边框可以扩展*/
  16. .public-comment-reply > .comment-title > h3 {
  17.     border-top: 1px solid #cccccc;
  18.     padding: 20px 0;
  19.     box-sizing: border-box;
  20. }
  21. /*设置图像和文本框区域样式，弹性盒子，项目横向排列*/
  22. .public-comment-reply > .comment-title > .comment {
  23.     display: flex;
  24.     padding: 10px;
  25. }
  26. /*设置图像格式，图片加上block可以去除下面的空白区*/
  27. .public-comment-reply > .comment-title > .comment img{
  28.     width: 60px;
  29.     height: 60px;
  30.     border-radius: 5px;
  31.     justify-content: center;
  32.     display: block;
  33. }
  34. /*设置文本框样式，flex：1与flex：auto效果相同，可以自动增长宽度*/
  35. .public-comment-reply > .comment-title > .comment .comment-area {
  36.     height: 200px;
  37.     margin-left: 20px;
  38.     flex: 1;
  40. }
  41. /*设置鼠标滑过文本框的样式*/
  42. .public-comment-reply > .comment-title > .comment .comment-area:hover{
  43.     box-shadow:0 0 5px #cccccc;
  44. }
  45. /*设置按钮的样式，此时的主轴为纵轴，所以交叉轴为横轴，可以用align-self来将按钮安排在最右侧,
  46. 还可以用margin-left：auto的方法达到同样党的效果*/
  47. .public-comment-reply > .comment-title > .submit {
  48.     font-size: 14px;
  49.     background-color: red;
  50.     color: white;
  51.     height: 40px;
  52.     width: 150px;
  53.     /*align-self: flex-end;*/
  54.     margin-left: auto;
  55.     border: none;
  56. }
  57. .public-comment-reply > .comment-title > .submit:hover {
  58.     background-color: #178cee;
  59. }
  60. /*设置评论区样式*/
  61. .reply{
  62.     display: flex;
  63.     flex-direction: column;
  64. }
  65. .reply > div {
  66.     display: flex;
  67.     margin-top: 30px;
  68. }
  69. .reply img{
  70.     width: 60px;
  71.     height: 60px;
  72.     border-radius: 5px;
  73.     align-self: center;
  74.     display: block;
  75. }
  76. .reply > div > div{
  77.     display: flex;
  78.     flex: 1;
  79.     flex-direction: column;
  80.     margin-left: 20px;
  81.     height: 90px;
  82.     justify-content: space-between;
  83. }
  84. .reply > div > div >div {
  85.     display: flex;
  86.     justify-content: space-between;
  87. }
  88. /*将点赞图标设置颜色和大小，注意大小的单位*/
  89. .reply > div > div  i{
  90.     color: red;
  91.     font-size: 1rem;
  92. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：有了前面的页面详细分析, 这样写起来就事半功倍了, 相信你已经体会到了... 这里再推荐一个小技巧, 就是写css的时候, 先把页面中可能用到的所有选择器尽可能的行写出来, 然后写上注释, 在样式规则中先写上关键代码, 实现最基本功能, 再慢慢调试和完善, 最终完成作品, 我就是这样做的
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