Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 二手商品列表+回复组件（2019年12月26日）--PHP培训第十期线上班
Blogger Information
Blog 11
fans 0
comment 0
visits 8078
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
二手商品列表+回复组件（2019年12月26日）--PHP培训第十期线上班
宋明杰
Original
668 people have browsed it

二手商品列表：

HTML代码：

  1.     <div class="essp-a">
  2.         <span>二手交易</span>
  3.     </div>
  4.     <div class="essp">
  5.         <div class="essp-b">
  6.         <div class="essp-b1">
  7.             <a href="#">抢好货</a>
  8.             <span>0低价，便捷，安全，快速</span>
  9.         </div>
  10.         <div class="essp-b2">
  11.             <span>热门分类</span>
  12.             <a href="#">美女写真</a>
  13.             <a href="#">日本美女</a>
  14.             <a href="#">美国美女</a>
  15.             <a href="#">中国美女</a>
  16.             <a href="#">AV美女</a>
  17.         </div>
  18.         <div class="essp-b3">
  19.             <div class="essp-b31">
  20.                 <div class="essp-b31a">
  21.                     <a href=""><img src="../img/img1.jpg"></a>
  22.                     <a href="">美女性感写真海报墙艺术装饰画贴画图9</a>
  23.                     <div>
  24.                     <span>￥999</span>
  25.                     <span>美女</span>
  26.                     </div>
  27.                 </div>
  28.                 <div class="essp-b31a">
  29.                     <a href=""><img src="../img/img1.jpg"></a>
  30.                     <a href="">美女性感写真海报墙艺术装饰画贴画图9</a>
  31.                     <div>
  32.                         <span>￥999</span>
  33.                         <span>美女</span>
  34.                     </div>
  35.                 </div>

CSS代码

  1. @import url(../zujian_reset.css);
  2. *{
  3.     /*border: 1px solid blue;*/
  4. }
  5. .essp{
  6.     width: 1200px;
  7.     padding: 10px;
  8.     box-sizing: border-box;
  9.     margin: auto;
  10.     border-radius: 5px;
  11.     background-color: #fff;
  12. }
  13. .essp:hover{
  14.     box-shadow: 0 0 8px #888;
  15. }
  16. .essp-a{
  17.     padding: 15px;
  18.     text-align: center;
  19. }
  20. .essp-a>span{
  21.     font-size:30px;
  22.     color:#222;
  23.     font-weight: bold;
  24.     border-bottom: 5px solid red;
  25. }
  26. .essp-b>.essp-b1{
  27.     border-bottom: 1px solid gainsboro;
  28.     padding: 10px;
  29. }
  30. .essp-b>.essp-b1>a{
  32.     color:black;
  33.     font-size: 20px;
  34.     margin: 15px;
  35. }
  36. .essp-b>.essp-b1>span{
  38.     color:red;
  39.     font-size: 12px;
  40.     margin: 10px;
  41. }
  42. .essp-b>.essp-b2>span{
  43.     font-size: 20px;
  44.     color: red;
  45.     margin: 25px;
  46. }
  47. .essp-b>.essp-b2>a{
  48.     padding-left: 15px;
  49.     color: #222222;
  50.     font-size: 13px;
  51. }
  52. .essp-b>.essp-b2>a:hover{
  53.     color: red;
  54. }
  55. .essp-b3{
  56.     display: flex;
  57.     height: 440px;
  58.     justify-content: space-between;
  59. }
  60. .essp-b3>.essp-b31{
  61.     padding: 10px;
  62.     flex-basis: 800px;
  63.     display: flex;
  64.     flex-flow: row wrap;
  65.     justify-content: space-between;
  66. }
  67. .essp-b3>.essp-b31>.essp-b31a{
  68.     width: 178px;
  69.     height: 200px;
  70.     display: flex;
  71.     flex-flow: column nowrap;
  72.     justify-content: space-between;
  73. }
  74. .essp-b3>.essp-b31>.essp-b31a div{
  75.     display: flex;
  76.     justify-content: space-between;
  77. }
  78. .essp-b3>.essp-b31>.essp-b31a img{
  79.     width: 174px;
  80.     height: 125px;
  81.     border: 1px solid #cccccc;
  82.     border-radius: 8px;
  83. }
  84. .essp-b3>.essp-b31>.essp-b31a>a{
  85.     font-size: 13px;
  86.     color: #222222;
  87. }
  88. .essp-b3>.essp-b31>.essp-b31a span:first-of-type{
  89.     color: red;
  90.     font-size: 13px;
  91. }
  92. .essp-b3>.essp-b31>.essp-b31a span:last-of-type{
  93.     background: dodgerblue;
  94.     color: #e9e9e9;
  95.     /*padding: 8px;*/
  96.     /*margin-right: auto;*/
  97.     padding: 0 5px;
  98.     margin-left:0 auto;
  99.     font-size: 13px;
  100. }
  101. .essp-b3>.essp-b32{
  102.     flex-basis: 400px;
  103.     padding: 10px;
  104.     display: flex;
  105.     flex-flow: row wrap;
  106.     justify-content: space-between;
  107. }
  108. /*.essp-b3>.essp-b32>.essp-b32a{*/
  109. /*    width: 450px;*/
  110. /*    display: flex;*/
  111. /*    flex-flow: row wrap;*/
  112. /*}*/
  113. .essp-b3>.essp-b32 img{
  114.     width: 193px;
  115.     height: 130px;
  116. }
  117. .essp-b3>.essp-b32>div{
  118.     width: 400px;
  119.     display: flex;
  120.     flex-direction: column;
  121. }
  122. .essp-b3>.essp-b32>div img{
  123.     width: 393px;
  124.     height: 60px;

运行截图：

评论回复

HTML代码：

  1. <body>
  2.     <div class="liuyan">
  3.         <div class="l1">
  4.             <h2>我要评论</h2>
  5.             <div class="l1a">
  6.                 <img src="../img/img1.jpg" ale="头像">
  7.                 <textarea name="" class="l1a1"></textarea>
  8.             </div>
  9.             <button>发表评论</button>
  10.         </div>
  11.         <div class="l2">
  12.             <h2>最新回复</h2>
  13.             <div class="l2a">
  14.                 <img src="../img/img1.jpg" alt="">
  15.                 <div class="l2a1">
  16.                     <span>用户昵称</span>
  17.                     <span>留言内容：PHP中文网，是一个好的学习平台，要认真学，加油</span>
  18.                     <span>2019-12-12 15：34：23发表</span>
  19.                 </div>
  20.             </div>

CSS代码：

  1. @import url(../zujian_reset.css);
  2. *{
  3.     /*border:1px solid red;*/
  4.     /*width: 1200px;*/
  5.     /*margin: auto;*/
  6. }
  8. .liuyan{
  9.     padding: 15px;
  10.     box-sizing: border-box;
  11.     background-color: #fff;
  12.     display: flex;
  13.     flex-direction: column;
  14. }
  15. .liuyan>.l1{
  16.     display: flex;
  17.     flex-direction: column;
  18. }
  19. .liuyan>.l1>h2{
  20.     font-size: 18px;
  21.     color: #222222;
  22.     border-top: 1px solid #e7e1cd;
  23.     padding: 20px 0;
  24. }
  25. .liuyan>.l1>.l1a{
  26.     display: flex;
  27.     /*flex-direction: ;*/
  28. }
  29. .liuyan>.l1>.l1a>img{
  30.     width: 60px;
  31.     height:60px;
  33.     border-radius: 5px;
  34.     /*box-shadow: 1px 1px 3px #cccccc;*/
  35. }
  36. .liuyan>.l1>.l1a>textarea{
  37.     height: 200px;
  38.     margin-left: 20px;
  39.     flex: auto;
  40. }
  41. .liuyan>.l1>.l1a>textarea:hover{
  42.     box-shadow: 0 0 8px #0077aa;
  43. }
  44. .liuyan>.l1>button{
  45.     font-size: 18px;
  46.     color: #e9e9e9;
  47.     background: red;
  48.     border: none;
  49.     width: 130px;
  50.     height: 50px;
  51.     align-self:flex-end;
  52.     margin: 15px 5px;
  53. }
  54. .liuyan>.l1>button:hover{
  55.     background-color: #178cee;
  56.     box-shadow: 0 0 8px #888888;
  57.     /*cursor: pointer;*/
  58. }
  59. .liuyan>.l2>h2{
  60.     font-size: 18px;
  61.     color: #222222;
  62.     /*border-top: 1px solid #e7e1cd;*/
  63.     padding: 20px 0;
  64. }
  65. .liuyan>.l2>.l2a{
  66.     display: flex;
  67.     margin: 30px 0px;
  68.     /*flex-direction: c;*/
  69. }
  70. .liuyan>.l2>.l2a>img {
  71.     width: 60px;
  72.     height: 60px;
  73.     align-self:center;
  74.     border-radius: 5px;
  75. }
  76. .liuyan>.l2>.l2a div {
  77.     display: flex;
  78.     flex-direction: column;
  79.     flex: auto;
  80.     margin-left: 20px;
  81.     height: 80px;
  82.     justify-content: space-between;
  83. }
  85. .liuyan>.l2>.l2a>div span{
  86.     font-size: 13px;
  87.     color: #222222;
  88.     margin: 20;
  89. }

运行截图

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