Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 使用flex布局完成分页、二手商品、评论回复--PHP培训十期线上班
Blogger Information
Blog 22
fans 1
comment 1
visits 22219
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培训十期线上班
Miss灬懒虫
Original
894 people have browsed it

使用flex布局完成分页、二手商品、评论回复（补12.26）

因为工作原因，没有能及完成相关学习任务，后面会尽快补上。
下面是使用flex布局，完成的三个简单例子，分别依次按照分页、二手商品、评论回复顺序编写，每个项目有又分为 效果图、布局思路、HTML代码和CSS代码几个部分。

简单的分页

效果图

布局思路

首先，将包裹分页的容器转换为“弹性盒子”容器（container），然后让整个盒子居中显示，并且将盒子内容的空间平局分配个盒子里面的项目（item），然后的a便签中的文本进行样式调整，包括文本水平以及垂直居中，字体大小等，最后个鼠标动作添加划过特效（手型、阴影等）。

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>公共翻页标签</title>
  6.     <link rel="stylesheet" href="public_paginate.css">
  7. </head>
  8. <body>
  9. <div class="public-paginate">
  10.     <a href="">&lt;</a>
  11.     <a href="">1</a>
  12.     <a href="">2</a>
  13.     <a href="">3</a>
  14.     <a href="">4</a>
  15.     <a href="">5</a>
  16.     <a href="">6</a>
  17.     <a href="">7</a>
  18.     <a href="">8</a>
  19.     <a href="">&gt;</a>
  20. </div>
  21. </body>
  22. </html>

CSS代码

  1. /*引入公共初始化标签样式文件*/
  2. @import "public_reset.css";
  4. .public-paginate{
  5.     width: 1200px;
  6.     height: 60px;
  7.     display: flex;
  8.     flex-flow: row nowrap;
  9.     /*设置子元素在主轴上的对齐方式*/
  10.     justify-content: center;
  11.     /*设置子元素在交叉轴上的对齐方式*/
  12.     align-items: center;
  13. }
  14. .public-paginate > a{
  15.     width: 60px;
  16.     height: 40px;
  17.     line-height: 40px;
  18.     text-align: center;
  19.     font-size: 14px;
  20.     margin: 0 5px;
  21.     border-radius: 5px;
  22.     background-color: #fff;
  23. }
  24. .public-paginate > a:hover{
  25.     font-size: 1.2em;
  26.     font-weight: bolder;
  27.     color: #fff;
  28.     background-color: #0086b3;
  29.     /*阴影效果：
  30.     box-shadow: h-shadow v-shadow blur spread color inset.
  31.                 h-shadow: 阴影的水平位置
  32.                 v-shadow：阴影的垂直位置
  33.                 blur：阴影的模糊半径
  34.                 spread：阴影的半径
  35.                 color：阴影的颜色
  36.                 inset：将外部阴影改成内部阴影【outset反过来】
  37.      */
  38.     box-shadow: 0 0 5px #888888;
  39. }

二手商品

效果图

布局思路

首先，有一个包裹最外面的大盒子BOX（container）,在打盒子里面有3 行项目（item），其中 row-1 标题1、row-2 标题2+导航、row-3（BOX-2）。
row-3（BOX-2）西面，又包含3个盒子（BOX-3）,其中一个是商品的图片和价格等，另外一个是快速入口。同时因为商品图片格式等是一致的所以就又是一个盒子（BOX-4），而快速入口下面的广告部分和上面的方向不一致，所以单拿出来做一个盒子（BOX-4。

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. <div class="public-second-hand">
  10. <!--    头部标题1-->
  11.     <div class="title1">
  12.         <span>抢好货</span>
  13.         <span>0低价，便捷，安全，快速</span>
  14.     </div>
  15. <!--    头部标题2-->
  16.     <div class="title2">
  17.         <span>热门分类</span>
  18.         <a href="">美女写真</a>
  19.         <a href="">日本美女</a>
  20.         <a href="">美国美女</a>
  21.         <a href="">国内美女</a>
  22.         <a href="">AV美女</a>
  23.     </div>
  24. <!--    二手商品列表以及快速入口-->
  25.     <div class="hand-content">
  26. <!--        商品列表-->
  27.         <div class="hand-list">
  28.             <div class="list-goods">
  29.             <img src="../../../1220/images/shop/shop1.jpg" alt="">
  30.             <span>美女性感写真海报墙艺术装饰、画贴--图1</span>
  31.             <div class="goods-price">
  32.                 <span>&yen;345</span>
  33.                 <span>美女</span>
  34.             </div>
  35.         </div>
  36.             <div class="list-goods">
  37.                 <img src="../../../1220/images/shop/shop2.jpg" alt="">
  38.                 <span>美女性感写真海报墙艺术装饰、画贴--图1</span>
  39.                 <div class="goods-price">
  40.                     <span>&yen;345</span>
  41.                     <span>美女</span>
  42.                 </div>
  43.             </div>
  44.             <div class="list-goods">
  45.                 <img src="../../../1220/images/shop/shop3.jpg" alt="">
  46.                 <span>美女性感写真海报墙艺术装饰、画贴--图1</span>
  47.                 <div class="goods-price">
  48.                     <span>&yen;345</span>
  49.                     <span>美女</span>
  50.                 </div>
  51.             </div>
  52.             <div class="list-goods">
  53.                 <img src="../../../1220/images/shop/shop4.jpg" alt="">
  54.                 <span>美女性感写真海报墙艺术装饰、画贴--图1</span>
  55.                 <div class="goods-price">
  56.                     <span>&yen;345</span>
  57.                     <span>美女</span>
  58.                 </div>
  59.             </div>
  60.             <div class="list-goods">
  61.                 <img src="../../../1220/images/shop/shop5.jpg" alt="">
  62.                 <span>美女性感写真海报墙艺术装饰、画贴--图1</span>
  63.                 <div class="goods-price">
  64.                     <span>&yen;345</span>
  65.                     <span>美女</span>
  66.                 </div>
  67.             </div>
  68.             <div class="list-goods">
  69.                 <img src="../../../1220/images/shop/shop6.jpg" alt="">
  70.                 <span>美女性感写真海报墙艺术装饰、画贴--图1</span>
  71.                 <div class="goods-price">
  72.                     <span>&yen;345</span>
  73.                     <span>美女</span>
  74.                 </div>
  75.             </div>
  76.             <div class="list-goods">
  77.                 <img src="../../../1220/images/shop/shop7.jpg" alt="">
  78.                 <span>美女性感写真海报墙艺术装饰、画贴--图1</span>
  79.                 <div class="goods-price">
  80.                     <span>&yen;345</span>
  81.                     <span>美女</span>
  82.                 </div>
  83.             </div>
  84.             <div class="list-goods">
  85.                 <img src="../../../1220/images/shop/shop8.jpg" alt="">
  86.                 <span>美女性感写真海报墙艺术装饰、画贴--图1</span>
  87.                 <div class="goods-price">
  88.                     <span>&yen;345</span>
  89.                     <span>美女</span>
  90.                 </div>
  91.             </div>
  92.         </div>
  93. <!--        快速入口-->
  94.         <div class="quick">
  95.             <div class="quick-entry">
  96.                 <a href=""><img src="../../../1220/images/ad/1.png" alt=""></a>
  97.                 <a href=""><img src="../../../1220/images/ad/2.png" alt=""></a>
  98.                 <a href=""><img src="../../../1220/images/ad/3.png" alt=""></a>
  99.                 <a href=""><img src="../../../1220/images/ad/4.png" alt=""></a>
  100.             </div>
  101.             <div class="quick-ad">
  102.                 <img src="../../../1220/images/ad/image.png" alt="">
  103.                 <img src="../../../1220/images/ad/ad2.jpg" alt="">
  104.             </div>
  105.         </div>
  106.     </div>
  107. </div>
  108. </body>
  109. </html>

CSS代码

  1. /*引入公共重置标签样式文件*/
  2. @import "public_reset.css";
  3. /*外层div转弹性盒子*/
  4. .public-second-hand{
  5.     width: 1260px;
  6.     height: 530px;
  7.     background-color: #fff;
  8.     border-radius: 5px;
  9.     font-size: 13px;
  10.     color: #555555;
  11.     display: flex;
  12.     margin: 0 auto;
  13.     flex-flow: column nowrap;
  14. }
  15. .public-second-hand:hover{
  16.     box-shadow: 0 0 5px #888888;
  17. }
  19. /*头部标题1 样式*/
  20. .public-second-hand >.title1{
  21.     height: 40px;
  22.     line-height: 40px;
  23.     text-align: left;
  24. }
  25. .public-second-hand >.title1 >span:first-of-type{
  26.     color: #404040;
  27.     font-size: 1.4rem;
  28.     margin: 0 10px;
  29. }
  30. .public-second-hand >.title1 >span:last-of-type{
  31.     color: red;
  32.     padding-left: 16px;
  33. }
  35. /*头部标题2 以及分类导航样式*/
  36. .public-second-hand >.title2{
  37.     height: 40px;
  38.     margin: 10px 10px;
  39.     border-top: 1px solid #cccccc;
  40. }
  41. .public-second-hand >.title2 >span{
  42.     color: red;
  43.     font-size: 1.4rem;
  44. }
  45. .public-second-hand >.title2 >a{
  46.     margin: 0 10px;
  47. }
  48. .public-second-hand >.title2> a:hover {
  49.     color: lightcoral;
  50.     cursor: pointer;
  51. }
  53. /*商品列表与快速入口的大盒子*/
  54. .public-second-hand >.hand-content{
  55.     height: 420px;
  56.     display: flex;
  57.     margin: 0 5px;
  58. }
  59. /*商品列表小盒子*/
  60. .public-second-hand> .hand-content >.hand-list{
  61.     width: 850px;
  62.     height: 420px;
  63.     display: flex;
  64.     flex-flow: row wrap;
  65. }
  66. /*商品图片与介绍*/
  67. .list-goods{
  68.     width: 200px;
  69.     height: 120px;
  70.     display: flex;
  71.     flex-flow: column nowrap;
  72.     margin: 0 5px;
  73. }
  74. .list-goods > img{
  75.     width: 190px;
  76.     height: 120px;
  77.     border-radius: 4px;
  78. }
  80. /*价格*/
  81. .goods-price{
  82.     text-align: center;
  83.     display: flex;
  84. }
  85. .goods-price >span:first-of-type{
  86.     color: red;
  87.     font-weight: bolder;
  88. }
  89. .goods-price >span:last-of-type{
  90.     color: #fff;
  91.     background-color: #669900;
  92.     margin-left: auto;
  93. }
  96. /*快速入口小盒子*/
  97. .public-second-hand> .hand-content >.quick{
  98.     width: 410px;
  99.     height: 420px;
  100.     display: flex;
  101.     flex-flow: column wrap;
  102. }
  103. .quick-entry{
  104.     display: flex;
  105.     flex-flow: row wrap;
  106.     justify-content: space-evenly;
  107. }
  108. .quick-entry a{
  109.     margin-top: 5px;
  110. }
  111. .quick-entry a img{
  112.     width: 190px;
  113.     height: 120px;
  114. }
  115. .quick-ad{
  116.     display: flex;
  117.     flex-flow: column nowrap;
  118.     margin: 0 auto;
  119. }
  120. .quick-ad >img{
  121.     width: 380px;
  122.     height: 65px;
  123. }

评论回复

效果图

布局思路
首先，将模块分成两个部分，即评论区和回复区。因为都纵向排列，所以盒子基本都是flex-flow: column nowrap;,而评论区的文本域需要铺满剩余空间，所以flex:auto;resize: none;
其次，在回复内容部分，因为回复点赞在另一个，所以最后这一样也要转化为盒子，并且包裹回复的<span>元素，需要margin-left: auto;

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>公共组件-评论回复</title>
  6.     <link rel="stylesheet" href="public_comments_reply.css">
  7. </head>
  8. <body>
  9. <div class="public-comments-reply">
  10. <!--    评论区域-->
  11.     <div class="comments">
  12.         <span>我要评论</span>
  13.         <div class="comments-content">
  14.             <img src="../../../1220/images/user.png" alt="">
  15.             <label for="comments_text"></label>
  16.             <textarea name="comments_text" id="comments_text" cols="30" rows="10"></textarea>
  17.         </div>
  18.         <button>发表评论</button>
  19.     </div>
  20. <!--    回复区域-->
  21.     <div class="reply">
  22.         <span>最新回复</span>
  23. <!--        评论回复列表-->
  24.         <div class="reply-list">
  25.             <img src="../../../1220/images/user.png" alt="">
  26. <!--            评论内容-->
  27.             <div class="reply-content">
  28.                 <span>用户昵称</span>
  29.                 <span>留言内容：PHP中文网是一个有温度、有内容、有理想的学习平台！</span>
  30. <!--                回复时间与点赞-->
  31.                 <div>
  32.                     <span>2019-12-23 14:52:49发布</span>
  33.                     <span><i class="iconfont">&#xec80;</i>回复</span>
  34.                 </div>
  35.             </div>
  36.         </div>
  37.         <div class="reply-list">
  38.             <img src="../../../1220/images/user.png" alt="">
  39.             <!--            评论内容-->
  40.             <div class="reply-content">
  41.                 <span>用户昵称</span>
  42.                 <span>留言内容：PHP中文网是一个有温度、有内容、有理想的学习平台！</span>
  43.                 <!--                回复时间与点赞-->
  44.                 <div>
  45.                     <span>2019-12-23 14:52:49发布</span>
  46.                     <span><i class="iconfont">&#xec80;</i>回复</span>
  47.                 </div>
  48.             </div>
  49.         </div>
  50.         <div class="reply-list">
  51.             <img src="../../../1220/images/user.png" alt="">
  52.             <!--            评论内容-->
  53.             <div class="reply-content">
  54.                 <span>用户昵称</span>
  55.                 <span>留言内容：PHP中文网是一个有温度、有内容、有理想的学习平台！</span>
  56.                 <!--                回复时间与点赞-->
  57.                 <div>
  58.                     <span>2019-12-23 14:52:49发布</span>
  59.                     <span><i class="iconfont">&#xec80;</i>回复</span>
  60.                 </div>
  61.             </div>
  62.         </div>
  63.         <div class="reply-list">
  64.             <img src="../../../1220/images/user.png" alt="">
  65.             <!--            评论内容-->
  66.             <div class="reply-content">
  67.                 <span>用户昵称</span>
  68.                 <span>留言内容：PHP中文网是一个有温度、有内容、有理想的学习平台！</span>
  69.                 <!--                回复时间与点赞-->
  70.                 <div>
  71.                     <span>2019-12-23 14:52:49发布</span>
  72.                     <span><i class="iconfont">&#xec80;</i>回复</span>
  73.                 </div>
  74.             </div>
  75.         </div>
  76.     </div>
  77. </div>
  78. </body>
  79. </html>

CSS代码

  1. /*引入公共重置标签样式文件*/
  2. @import "public_reset.css";
  4. .public-comments-reply{
  5.     width: 1200px;
  6.     height: 720px;
  7.     font-size: 13px;
  8.     color: #555555;
  9.     background-color: #fff;
  10.     display: flex;
  11.     flex-flow: column nowrap;
  12.     margin: 0 auto;
  14. }
  15. .public-comments-reply img{
  16.     width: 50px;
  17.     height: 50px;
  18.     border-radius: 2px;
  19.     box-shadow: 0 0 2px #888888;
  20.     margin: 0 14px;
  21. }
  22. /*评论区域样式*/
  23. .public-comments-reply >.comments{
  24.     width: 1160px;
  25.     height: 320px;
  26.     display: flex;
  27.     flex-flow: column nowrap;
  28.     justify-content: flex-start;
  29.     border-top: 1px solid #cccccc;
  30.     margin: 10px 10px;
  31. }
  32. /*评论区标题*/
  33. .public-comments-reply >.comments >span:first-of-type{
  34.     height: 60px;
  35.     line-height: 60px;
  36.     font-weight: bolder;
  37. }
  38. /*评论切头像与评论内容*/
  39. .comments >.comments-content{
  40.     height: 200px;
  41.     display: flex;
  42. }
  44. /*文本域样式*/
  45. .comments >.comments-content >textarea{
  46.     height: 200px;
  47.     flex:auto;
  48.     /*文本域不予许调整大小*/
  49.     resize: none;
  50. }
  51. .comments >.comments-content >textarea:hover{
  52.     box-shadow: 0 0 5px #888888;
  53. }
  55. /*评论区提交按钮按*/
  56. .public-comments-reply >.comments >button{
  57.     width: 130px;
  58.     height: 34px;
  59.     border: none;
  60.     line-height: 34px;
  61.     text-align: center;
  62.     color: #fff;
  63.     background-color: #ff2017;
  64.     margin-top: 20px;
  65.     margin-left: auto;
  66. }
  67. .public-comments-reply >.comments >button:hover {
  68.     background-color: #178cee;
  69.     cursor: pointer;
  70.     box-shadow: 0 0 2px #888888;
  71. }
  72. /*回复区域样式*/
  73. .public-comments-reply >.reply{
  74.     width: 1160px;
  75.     height: 360px;
  76.     display: flex;
  77.     flex-flow: column nowrap;
  78.     margin:0 10px;
  79. }
  80. .public-comments-reply >.reply >span{
  81.     height: 50px;
  82.     line-height: 50px;
  83.     font-weight: bolder;
  84. }
  85. /*回复内容 头像+内容*/
  86. .public-comments-reply>.reply>.reply-list{
  87.     height: 70px;
  88.     display: flex;
  89.     flex-flow: row nowrap;
  90.     margin-bottom: 18px;
  91. }
  92. .public-comments-reply>.reply>.reply-list> img{
  93.     /*子元素交叉轴居中*/
  94.     align-self: center;
  95. }
  96. /*回复内容*/
  97. .public-comments-reply>.reply>.reply-list>.reply-content{
  98.     flex:auto;
  99.     display: flex;
  100.     flex-flow: column nowrap;
  101.     justify-content: space-around;
  102. }
  103. .public-comments-reply>.reply>.reply-list>.reply-content >div{
  104.     display: flex;
  105. }
  106. .public-comments-reply>.reply>.reply-list>.reply-content >div >span:last-of-type{
  107.     margin-left: auto;
  108. }
  109. .public-comments-reply>.reply>.reply-list>.reply-content >div >span> i{
  110.     color: #ff2017;
  111.     font-size: 20px;
  112.     margin-right: 10px;
  113. }

谢谢，阅读浏览！

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