search

博客列表 >二手商品列表与评论与回复案例---PHP培训十期线上班

二手商品列表与评论与回复案例---PHP培训十期线上班

方小生
方小生原创
2019年12月29日 20:41:57606浏览

12月26日作业

目标：独立完成二手商品列表与评论回复，将写出自己的思路与实现方案

先看效果
商品列表与评论回复

整体分为三个组件，如图结构
文件结构

  1. 标题组件

实现：div盒子包裹文本，文本用span包裹（如果用h2标签，下部横线会很长），文本居中，设置上下内边距，下边框

demo示例

  1. <style>
  2. .title{
  3.     padding:30px;
  4.     text-align: center;
  5. }
  7. .title > span{
  8.     font-size: 23px;
  9.     border-bottom: 2px solid red;
  10.     padding-bottom: 3px;
  11. }
  12. </style>
  13. <div class="title">
  14.     <span>二手交易</span>
  15. </div>
  1. 商品列表组件

实现：整体分为两块（标题信息区域、商品区域），上面标题和导航区域不用使用flex,使用span和a链接，行内元素，水平排列；商品区域分为两个部分,使用flex布局，主轴方向横向；内部也是使用flex水平布局，可换行

demo示例：

  1. <style>
  2. /*商品列表区*/
  3. .shop_container{
  4.     width: 1200px;
  5.     background-color: #fff;
  6.     margin:auto;
  7.     padding: 15px;
  8.     box-sizing: border-box;
  9.     border-radius: 10px;
  10. }
  12. .shop_container:hover{
  13.     box-shadow: 0 0 5px #888;
  14. }
  15. /*顶部信息*/
  16. .shop_container > .top-title{
  17.     height: 50px;
  18.     border-bottom: 1px solid #ccc;
  19.     box-sizing: border-box;
  20. }
  21. .shop_container > .top-title>:first-child{
  22.     font-size: 24px;
  23.     margin-right: 20px;
  24. }
  25. .shop_container > .top-title>:nth-child(2){
  26.     color:red;
  27. }
  29. /*区域导航*/
  30. .shop_container > .section-nav{
  31.     height:55px;
  32. }
  33. .shop_container > .section-nav >span{
  34.     font-size: 24px;
  35.     color:red;
  36.     padding-right:10px;
  37. }
  38. .shop_container > .section-nav > a{
  39.     padding-left: 20px;
  40. }
  42. /*商品区域*/
  43. .shop_container > .main-list{
  44.     height: 440px;
  45.     display: flex;
  46. }
  48. /*左侧*/
  49. .shop_container > .main-list > .left{
  50.     padding: 10px;
  51.     width: 800px;
  52.     display: flex;
  53.     flex-flow: row wrap;
  54.     justify-content: space-between;
  55. }
  56. .shop_container > .main-list > .left > .shop{
  57.     width: 178px;
  58.     height: 200px;
  59.     display: flex;
  60.     flex-flow: column nowrap;
  61.     justify-content: space-between;
  62. }
  63. /*商品图片*/
  64. .shop_container > .main-list > .left > .shop img{
  65.     width: 178px;
  66.     border:1px solid #ccc;
  67.     border-radius: 5px;
  68. }
  69. .shop_container > .main-list > .left > .shop > div {
  70.     display: flex;
  71. }
  72. .shop_container > .main-list > .left > .shop span:first-of-type{
  73.     color:red;
  74. }
  75. .shop_container > .main-list > .left > .shop span:last-of-type{
  76.     background-color: lightgreen;
  77.     color:white;
  78.     padding:0 5px;
  79.     margin-left:auto;
  80. }
  82. /*右侧快速入口*/
  83. .shop_container > .main-list > .right {
  84.     flex-basis: 400px;
  85.     padding: 10px;
  86.     display:flex;
  87.     flex-flow: row wrap;
  88.     justify-content: space-between;
  89. }
  91. .shop_container > .main-list > .right >a img{
  92.     width: 190px;
  93.     height: 130px;
  94. }
  96. .shop_container > .main-list > .right > .ad img {
  97.     width: 393px;
  98.     height: 60px;
  99. }
  100. </style>
  101. <body>
  102.     <div class="shop_container">
  103.         <!--顶部信息-->
  104.         <div class="top-title">
  105.             <span>抢好货</span>
  106.             <span>0低价，便捷，快速</span>
  107.         </div>
  108.         <!--区域导航-->
  109.         <div class="section-nav">
  110.             <span>热门分类</span>
  111.             <a href="">美女写真</a>
  112.             <a href="">日本美女</a>
  113.             <a href="">美国美女</a>
  114.             <a href="">国内美女</a>
  115.             <a href="">AV美女</a>
  116.         </div>
  117.         <!--列表区域-->
  118.         <div class="main-list">
  119.             <!--左侧商品区域-->
  120.             <div class="left">
  121.                 <div class="shop">
  122.                     <a href="">
  123.                         <img src="../../../img/9.jpg" alt="">
  124.                     </a>
  125.                     <a href="">
  126.                         大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖
  127.                     </a>
  128.                     <div>
  129.                         <span>&yen345</span>
  130.                         <span>美女</span>
  131.                     </div>
  132.                 </div>
  133.                 <div class="shop">
  134.                     <a href="">
  135.                         <img src="../../../img/9.jpg" alt="">
  136.                     </a>
  137.                     <a href="">
  138.                         大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖
  139.                     </a>
  140.                     <div>
  141.                         <span>&yen345</span>
  142.                         <span>美女</span>
  143.                     </div>
  144.                 </div>
  145.                 <div class="shop">
  146.                     <a href="">
  147.                         <img src="../../../img/9.jpg" alt="">
  148.                     </a>
  149.                     <a href="">
  150.                         大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖
  151.                     </a>
  152.                     <div>
  153.                         <span>&yen345</span>
  154.                         <span>美女</span>
  155.                     </div>
  156.                 </div>
  157.                 <div class="shop">
  158.                     <a href="">
  159.                         <img src="../../../img/9.jpg" alt="">
  160.                     </a>
  161.                     <a href="">
  162.                         大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖
  163.                     </a>
  164.                     <div>
  165.                         <span>&yen345</span>
  166.                         <span>美女</span>
  167.                     </div>
  168.                 </div>
  169.                 <div class="shop">
  170.                     <a href="">
  171.                         <img src="../../../img/9.jpg" alt="">
  172.                     </a>
  173.                     <a href="">
  174.                         大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖
  175.                     </a>
  176.                     <div>
  177.                         <span>&yen345</span>
  178.                         <span>美女</span>
  179.                     </div>
  180.                 </div>
  181.                 <div class="shop">
  182.                     <a href="">
  183.                         <img src="../../../img/9.jpg" alt="">
  184.                     </a>
  185.                     <a href="">
  186.                         大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖
  187.                     </a>
  188.                     <div>
  189.                         <span>&yen345</span>
  190.                         <span>美女</span>
  191.                     </div>
  192.                 </div>
  193.                 <div class="shop">
  194.                     <a href="">
  195.                         <img src="../../../img/9.jpg" alt="">
  196.                     </a>
  197.                     <a href="">
  198.                         大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖
  199.                     </a>
  200.                     <div>
  201.                         <span>&yen345</span>
  202.                         <span>美女</span>
  203.                     </div>
  204.                 </div>
  205.                 <div class="shop">
  206.                     <a href="">
  207.                         <img src="../../../img/9.jpg" alt="">
  208.                     </a>
  209.                     <a href="">
  210.                         大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖大甩卖
  211.                     </a>
  212.                     <div>
  213.                         <span>&yen345</span>
  214.                         <span>美女</span>
  215.                     </div>
  216.                 </div>
  217.             </div>
  218.             <!--右侧快速入口-->
  219.             <div class="right">
  220.                 <a href=""><img src="../../../img/ad/1.png" alt=""></a>
  221.                 <a href=""><img src="../../../img/ad/2.png" alt=""></a>
  222.                 <a href=""><img src="../../../img/ad/3.png" alt=""></a>
  223.                 <a href=""><img src="../../../img/ad/4.png" alt=""></a>
  224.                 <div class="ad">
  225.                     <img src="../../../img/ad/image.png" alt="">
  226.                     <img src="../../../img/ad/ad2.jpg" alt="">
  227.                 </div>
  228.             </div>
  229.         </div>
  230.     </div>
  231. </body>
  1. 评论回复组件

实现：整体分为两部分（评论和回复），使用flex，主轴方向垂直；中间头像和文本域也是使用flex；用户头像和用户回复信息使用flex横向布局，用户回复信息区域用flex垂直布局；最后一行使用margin-left=auto,需要将当前容器转为flex才有效;

demo示例

  1. <style>
  2. @import "../../../static/font/iconfont.css";
  3. .comment-replay{
  4.     padding:15px;
  5.     box-sizing: border-box;
  6.     background-color: #fff;
  7.     display: flex;
  8.     flex-direction: column;
  9. }
  10. .top{
  11.     display: flex;
  12.     flex-flow: column nowrap;
  13. }
  14. .top h3{
  15.     padding:20px 0;
  16.     border-top:1px solid #ccc;
  17. }
  18. .top > div{
  19.     display: flex;
  20.     flex-flow: row nowrap;
  21.     padding: 15px;
  22.     height: 200px;
  23. }
  24. .comment-replay img{
  25.     width: 60px;
  26.     height: 60px;
  27.     border-radius: 5px;
  28. }
  29. .top textarea{
  30.     height: 200px;
  31.     resize:none;
  32.     margin-left:20px;
  33.     flex:1;
  34.     border-radius: 5px;
  35. }
  36. .top textarea:hover{
  37.     box-shadow: 0 0 5px #ccc;
  38. }
  39. .top > button {
  40.     font-size: 14px;
  41.     background-color: #f64c59;
  42.     border: none;
  43.     color: white;
  44.     width: 150px;
  45.     height: 40px;
  46.     align-self: end;
  47.     cursor: pointer;
  48. }
  49. .top > button:hover{
  50.     background-color: lightblue;
  51.     box-shadow: 0 0 5px #888;
  52. }
  53. /*回复*/
  54. .comment-replay > .replay{
  55.     display:flex;
  56.     flex-flow: column nowrap;
  57.     padding:10px 0;
  58. }
  59. .comment-replay > .replay > div{
  60.     display:flex;
  61.     align-items: center;
  62.     margin-top:30px;
  63. }
  64. /*回复的内容区域*/
  65. .comment-replay > .replay > div>div{
  66.     display:flex;
  67.     flex-direction: column;
  68.     margin-left:20px;
  69.     height: 90px;
  70.     justify-content: space-between;
  71.     flex:1;
  72. }
  73. /*回复时间*/
  74. .comment-replay > .replay > div>div>div{
  75.     display: flex;
  76.     justify-content: space-between;
  77. }
  78. .comment-replay > .replay > div>div>div i{
  79.     color:red;
  80.     font-size:1.2rem;
  81.     margin-right: 5px;
  82. }
  84. </style>
  85. <body>
  86.     <div class="comment-replay">
  87.         <div class="top">
  88.             <h3>我要评论</h3>
  89.             <div>
  90.                 <label for="comment">
  91.                     <img src="../../../static/images/user.png" alt="">
  92.                 </label>
  93.                 <textarea name="" id="comment" ></textarea>
  94.             </div>
  95.             <button>发表评论</button>
  96.         </div>
  97.         <div class="replay">
  98.             <h3>最新回复</h3>
  99.             <div>
  100.                 <img src="../../../static/images/user.png" alt="">
  101.                 <div>
  102.                     <span>用户昵称</span>
  103.                     <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  104.                     <div>
  105.                         <span>2019-12-12 15:34:23发表</span>
  106.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  107.                     </div>
  108.                 </div>
  109.             </div>
  110.             <div>
  111.                 <img src="../../../static/images/user.png" alt="">
  112.                 <div>
  113.                     <span>用户昵称</span>
  114.                     <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  115.                     <div>
  116.                         <span>2019-12-12 15:34:23发表</span>
  117.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  118.                     </div>
  119.                 </div>
  120.             </div>
  121.         </div>
  122.     </div>
  123. </body>

ps:不知道为什么写这个写了好几个小时，大概布局其实也不难，就是具体尺寸和定宽大小不清楚，后面调整细节花了些时间^_^

上一条：使用flex仿PHP中文网移动端页面（1227）下一条：flex项目属性及页面组件开发思路（12.25前端开发学习作业）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多