search

博客列表 >1226作业-用Flex布局实现二手商品组件和评论回复组件的思路与实现过程-php培训十期线上班

1226作业-用Flex布局实现二手商品组件和评论回复组件的思路与实现过程-php培训十期线上班

Dseven
Dseven原创
2019年12月30日 22:45:48836浏览

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. }
上一条：1227作业-用Flex布局实现m.php.cn移动端页面布局-php培训十期线上班下一条：微信小程序api 点赞 评论 暂停 循环播放 . (2019年3月29日)
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多