search

博客列表 >使用flex布局完成分页、二手商品、评论回复--PHP培训十期线上班

使用flex布局完成分页、二手商品、评论回复--PHP培训十期线上班

Miss灬懒虫
Miss灬懒虫原创
2019年12月29日 15:54:00895浏览

使用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. }

谢谢，阅读浏览！

上一条：Flex项目的6大属性与公共组件下一条：jquery介绍和原理1-2019年12月19日
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多