登录  /  注册
博主信息
博文 22
粉丝 1
评论 1
访问量 21392
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
使用flex布局完成分页、二手商品、评论回复--PHP培训十期线上班
Miss灬懒虫
原创
849人浏览过

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

二手商品

效果图

布局思路

首先,有一个包裹最外面的大盒子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. }
  18. /*头部标题1 样式*/
  19. .public-second-hand >.title1{
  20. height: 40px;
  21. line-height: 40px;
  22. text-align: left;
  23. }
  24. .public-second-hand >.title1 >span:first-of-type{
  25. color: #404040;
  26. font-size: 1.4rem;
  27. margin: 0 10px;
  28. }
  29. .public-second-hand >.title1 >span:last-of-type{
  30. color: red;
  31. padding-left: 16px;
  32. }
  33. /*头部标题2 以及分类导航样式*/
  34. .public-second-hand >.title2{
  35. height: 40px;
  36. margin: 10px 10px;
  37. border-top: 1px solid #cccccc;
  38. }
  39. .public-second-hand >.title2 >span{
  40. color: red;
  41. font-size: 1.4rem;
  42. }
  43. .public-second-hand >.title2 >a{
  44. margin: 0 10px;
  45. }
  46. .public-second-hand >.title2> a:hover {
  47. color: lightcoral;
  48. cursor: pointer;
  49. }
  50. /*商品列表与快速入口的大盒子*/
  51. .public-second-hand >.hand-content{
  52. height: 420px;
  53. display: flex;
  54. margin: 0 5px;
  55. }
  56. /*商品列表小盒子*/
  57. .public-second-hand> .hand-content >.hand-list{
  58. width: 850px;
  59. height: 420px;
  60. display: flex;
  61. flex-flow: row wrap;
  62. }
  63. /*商品图片与介绍*/
  64. .list-goods{
  65. width: 200px;
  66. height: 120px;
  67. display: flex;
  68. flex-flow: column nowrap;
  69. margin: 0 5px;
  70. }
  71. .list-goods > img{
  72. width: 190px;
  73. height: 120px;
  74. border-radius: 4px;
  75. }
  76. /*价格*/
  77. .goods-price{
  78. text-align: center;
  79. display: flex;
  80. }
  81. .goods-price >span:first-of-type{
  82. color: red;
  83. font-weight: bolder;
  84. }
  85. .goods-price >span:last-of-type{
  86. color: #fff;
  87. background-color: #669900;
  88. margin-left: auto;
  89. }
  90. /*快速入口小盒子*/
  91. .public-second-hand> .hand-content >.quick{
  92. width: 410px;
  93. height: 420px;
  94. display: flex;
  95. flex-flow: column wrap;
  96. }
  97. .quick-entry{
  98. display: flex;
  99. flex-flow: row wrap;
  100. justify-content: space-evenly;
  101. }
  102. .quick-entry a{
  103. margin-top: 5px;
  104. }
  105. .quick-entry a img{
  106. width: 190px;
  107. height: 120px;
  108. }
  109. .quick-ad{
  110. display: flex;
  111. flex-flow: column nowrap;
  112. margin: 0 auto;
  113. }
  114. .quick-ad >img{
  115. width: 380px;
  116. height: 65px;
  117. }

评论回复

效果图

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

谢谢,阅读浏览!

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:对页面的基本控制技术, 是宏观上知识 , 对于字体大小颜色等细节, 还是要根据自己喜爱决定
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学