search

博客列表 >二手商品列表+回复组件（2019年12月26日）--PHP培训第十期线上班

二手商品列表+回复组件（2019年12月26日）--PHP培训第十期线上班

宋明杰
宋明杰原创
2019年12月27日 16:37:21667浏览

二手商品列表：

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

运行截图

上一条：12月26日网站各个组件的实战，以及FLEX的具体应用下一条：2019-12-26作业，商品交易区和评论回复组件
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多