Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex实战(二手交易区,翻页,评论组件)
Blogger Information
Blog 6
fans 1
comment 0
visits 5724
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
flex实战(二手交易区,翻页,评论组件)
xiaosheng
Original
697 people have browsed it

flex布局实战

二手交易区组件

_second_hand.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>二手交易区</title>
  6.     <link rel="stylesheet" href="../../../static/css/_second_hand.css">
  7. </head>
  8. <body>
  9.     <div class="title">
  10.         <span>二手交易</span>
  11.     </div>
  12.     <div class="content">
  13.         <div class="content-title">
  14.             <span>抢好货</span>
  15.             <span>0低价.便捷.安全.快速</span>
  16.         </div>
  17.         <div class="sort">
  18.             <span>热门分类</span>
  19.             <ul>
  20.                 <li><a href="">美女写真</a></li>
  21.                 <li><a href="">日本美女</a></li>
  22.                 <li><a href="">美国美女</a></li>
  23.                 <li><a href="">国内美女</a></li>
  24.                 <li><a href="">AV美女</a></li>
  25.             </ul>
  26.         </div>
  27.         <div class="goods">
  28.             <div class="good">
  29.                 <a class="good-img" href="">
  30.                     <img src="../../../static/images/shop/shop3.jpg" alt="">
  31.                 </a>
  32.                 <p class="introduce">美女性感写真海报墙艺术装饰画贴画涂1</p>
  33.                 <div>
  34.                     <span class="price">$333</span>
  35.                     <span class="tag">美女</span>
  36.                 </div>
  37.             </div>
  38.             <div class="good">
  39.                 <a class="good-img" href="">
  40.                     <img src="../../../static/images/shop/shop3.jpg" alt="">
  41.                 </a>
  42.                 <p class="introduce">美女性感写真海报墙艺术装饰画贴画涂1</p>
  43.                 <div>
  44.                     <span class="price">$333</span>
  45.                     <span class="tag">美女</span>
  46.                 </div>
  47.             </div>
  48.             <div class="good">
  49.                 <a class="good-img" href="">
  50.                     <img src="../../../static/images/shop/shop3.jpg" alt="">
  51.                 </a>
  52.                 <p class="introduce">美女性感写真海报墙艺术装饰画贴画涂1</p>
  53.                 <div>
  54.                     <span class="price">$333</span>
  55.                     <span class="tag">美女</span>
  56.                 </div>
  57.             </div>
  58.             <div class="good">
  59.                 <a class="good-img" href="">
  60.                     <img src="../../../static/images/shop/shop3.jpg" alt="">
  61.                 </a>
  62.                 <p class="introduce">美女性感写真海报墙艺术装饰画贴画涂1</p>
  63.                 <div>
  64.                     <span class="price">$333</span>
  65.                     <span class="tag">美女</span>
  66.                 </div>
  67.             </div>
  68.             <div class="good">
  69.                 <a class="good-img" href="">
  70.                     <img src="../../../static/images/shop/shop3.jpg" alt="">
  71.                 </a>
  72.                 <p class="introduce">美女性感写真海报墙艺术装饰画贴画涂1</p>
  73.                 <div>
  74.                     <span class="price">$333</span>
  75.                     <span class="tag">美女</span>
  76.                 </div>
  77.             </div>
  78.             <div class="good">
  79.                 <a class="good-img" href="">
  80.                     <img src="../../../static/images/shop/shop3.jpg" alt="">
  81.                 </a>
  82.                 <p class="introduce">美女性感写真海报墙艺术装饰画贴画涂1</p>
  83.                 <div>
  84.                     <span class="price">$333</span>
  85.                     <span class="tag">美女</span>
  86.                 </div>
  87.             </div>
  88.             <div class="good">
  89.                 <a class="good-img" href="">
  90.                     <img src="../../../static/images/shop/shop3.jpg" alt="">
  91.                 </a>
  92.                 <p class="introduce">美女性感写真海报墙艺术装饰画贴画涂1</p>
  93.                 <div>
  94.                     <span class="price">$333</span>
  95.                     <span class="tag">美女</span>
  96.                 </div>
  97.             </div>
  98.             <div class="good">
  99.                 <a class="good-img" href="">
  100.                     <img src="../../../static/images/shop/shop3.jpg" alt="">
  101.                 </a>
  102.                 <p class="introduce">美女性感写真海报墙艺术装饰画贴画涂1</p>
  103.                 <div>
  104.                     <span class="price">$333</span>
  105.                     <span class="tag">美女</span>
  106.                 </div>
  107.             </div>
  108.         </div>
  109.         <div class="ad">
  110.             <div class="ad-4">
  111.                 <a href=""><img src="../../../static/images/ad/1.png" alt=""></a>
  112.                 <a href=""><img src="../../../static/images/ad/2.png" alt=""></a>
  113.                 <a href=""><img src="../../../static/images/ad/3.png" alt=""></a>
  114.                 <a href=""><img src="../../../static/images/ad/4.png" alt=""></a>
  115.             </div>
  116.             <a href="">
  117.                 <img src="../../../static/images/ad/image.png" alt="">
  118.             </a>
  119.             <a href="">
  120.                 <img src="../../../static/images/ad/ad2.jpg" alt="">
  121.             </a>
  122.         </div>
  123.     </div>
  124. </body>
  125. </html>

_second_hand.css

  1. @import "reset.css";
  2. @import "_title.css";
  4. body {
  5.     background-color: #cccccc;
  6. }
  8. li {
  9.     list-style-type: none;
  10. }
  11. .content {
  12.     width: 1200px;
  13.     background-color: #fff;
  14.     margin: 20px auto 0;
  15.     padding: 5px 10px 5px 10px;
  16.     position: relative;
  17.     -webkit-box-sizing: border-box;
  18.     -moz-box-sizing: border-box;
  19.     box-sizing: border-box;
  20. }
  21. .content:hover {
  22.     box-shadow:0px 0px 10px #000;
  23. }
  24. .content .content-title {
  25.     height: 40px;
  26.     border-bottom: 1px solid #cccccc;
  27. }
  28. .content .content-title span:first-child {
  29.     font-size: 20px;
  30.     color: RGB(97, 105, 129);
  31. }
  32. .content .content-title span:nth-child(2) {
  33.     color: red;
  34.     margin-left: 20px;
  35. }
  36. .content > .sort {
  37.     height: 30px;
  38.     position: relative;
  39. }
  40. .content > .sort > span {
  41.     font-size: 20px;
  42.     color: red;
  43. }
  44. .content > .sort > ul {
  45.     width: 400px;
  46.     height: 25px;
  48.     position: absolute;
  49.     top: 0;
  50.     left: 105px;
  51.     display: flex;
  52.     justify-content: space-between;
  53.     align-items: flex-end;
  54. }
  55. .content > .sort > ul > li > a {
  56.     color: RGB(135, 136, 139);
  57. }
  58. .content > .sort > ul > li > a:hover {
  59.     color: red;
  60. }
  61. .content .goods {
  62.     width: 720px;
  63.     margin-left: 5px;
  64.     display: flex;
  65.     flex-wrap: wrap;
  66.     margin-top: 25px;
  67.     justify-content: space-between;
  68. }
  69. .content .goods .good {
  70.     width: 170px;
  71.     height: 220px;
  72. }
  73. .content .goods .good .good-img {
  74.     width: 170px;
  75.     height: 120px;
  76. }
  77. .content .goods .good .good-img > img {
  78.     width: 170px;
  79.     height: 120px;
  80.     -webkit-border-radius: 5px;
  81.     -moz-border-radius: 5px;
  82.     border-radius: 5px;
  83. }
  85. .content .goods .good .good-img > img:hover {
  86.     box-shadow:0px 0px 10px #000;
  87. }
  88. .content .goods .good .introduce {
  89.     width: 170px;
  90.     margin-top: 5px;
  91.     color: RGB(139, 139, 132);
  92. }
  93. .content .goods .good > div {
  94.     margin-top: 5px;
  95. }
  96. .content .goods .good > div > .price {
  97.     color: #df5000;
  98. }
  99. .content .goods .good > div > .tag {
  100.     display: inline-block;
  101.     width: 27px;
  102.     height: 18px;
  103.     text-align: center;
  104.     line-height: 18px;
  105.     background-color: RGB(136, 201, 170);
  106.     margin-left: 110px;
  107.     -webkit-border-radius: 3px;
  108.     -moz-border-radius: 3px;
  109.     border-radius: 3px;
  110. }
  111. .content .ad {
  112.     width: 420px;
  113.     position: absolute;
  114.     top: 100px;
  115.     right: 20px;
  116. }
  117. .content .ad .ad-4 {
  118.     height: 280px;
  119.     display: flex;
  120.     flex-wrap: wrap;
  121.     justify-content: space-between;
  122. }
  124. .content .ad > .ad-4 img {
  125.     width: 200px;
  126.     height: 130px;
  127. }
  128. .content .ad > .ad-4 img:hover {
  129.     box-shadow:0px 0px 10px #000;
  130. }

翻页组件

_paginate.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>分页</title>
  6.     <link rel="stylesheet" href="../../../static/css/_paginate.css">
  7. </head>
  8. <body>
  9.     <div class="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="">9</a>
  20.         <a href="">&gt;</a>
  21.     </div>
  22. </body>
  23. </html>

_paginate.css

  1. @import "reset.css";
  3. .paginate {
  4.     width: 400px;
  5.     margin: 20px auto;
  6.     display: flex;
  7.     justify-content: space-between;
  8. }
  9. .paginate > a {
  10.     width: 30px;
  11.     height: 30px;
  12.     border: 1px solid #abcdef;
  13.     text-align: center;
  14.     line-height: 30px;
  15. }
  16. .paginate > a:hover {
  17.     background-color: #abcdef;
  18.     color: #ffffff;
  19. }

回复和评论组件

_comment.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>评论和回复</title>
  6.     <link rel="stylesheet" href="../../../static/css/_comment.css">
  7.     <link rel="stylesheet" href="../../../static/font/iconfont.css">
  8. </head>
  9. <body>
  10.     <div class="comment-contents">
  11.         <p>我要评论</p>
  12.         <div class="create-comment">
  13.             <a class="create-head" href="">
  14.                 <img class="user-head" src="../../../static/images/user.png" alt="">
  15.             </a>
  16.             <form action="">
  17.                 <textarea name="" id="" cols="150" rows="20"></textarea>
  18.                 <br>
  19.                 <button class="submit" type="submit">发表评论</button>
  20.             </form>
  21.         </div>
  22.         <p>最新回复</p>
  23.         <div class="all-comments">
  24.             <div class="comment">
  25.                 <a class="comment-user-head" href="">
  26.                     <img class="user-head" src="../../../static/images/user.png" alt="">
  27.                 </a>
  28.                 <span class="comment-user-name">用户昵称</span>
  29.                 <span class="comment-content">留言内容:PHP是世界上最好的语言</span>
  30.                 <span class="comment-time">2019-12-27 18:05 发表</span>
  31.                 <span class="replay">
  32.                     <i class="iconfont icon-dianzan"></i> 回复
  33.                 </span>
  34.             </div>
  35.             <div class="comment">
  36.                 <a class="comment-user-head" href="">
  37.                     <img class="user-head" src="../../../static/images/user.png" alt="">
  38.                 </a>
  39.                 <span class="comment-user-name">用户昵称</span>
  40.                 <span class="comment-content">留言内容:PHP是世界上最好的语言</span>
  41.                 <span class="comment-time">2019-12-27 18:05 发表</span>
  42.                 <span class="replay">
  43.                     <i class="iconfont icon-dianzan"></i> 回复
  44.                 </span>
  45.             </div>
  46.             <div class="comment">
  47.                 <a class="comment-user-head" href="">
  48.                     <img class="user-head" src="../../../static/images/user.png" alt="">
  49.                 </a>
  50.                 <span class="comment-user-name">用户昵称</span>
  51.                 <span class="comment-content">留言内容:PHP是世界上最好的语言</span>
  52.                 <span class="comment-time">2019-12-27 18:05 发表</span>
  53.                 <span class="replay">
  54.                     <i class="iconfont icon-dianzan"></i> 回复
  55.                 </span>
  56.             </div>
  57.         </div>
  58.     </div>
  59. </body>
  60. </html>

_comment.css

  1. @import "reset.css";
  3. .comment-contents {
  4.     width: 1200px;
  5.     border-top: 1px solid #cccccc;
  6.     margin: 15px auto 0;
  7. }
  8. .comment-contents > p {
  9.     margin-top: 20px;
  10.     color: RGB(108, 111, 118);
  11.     font-weight: 700;
  12. }
  13. .comment-contents > .create-comment {
  14.     height: 350px;
  15.     margin: 30px 0 0 10px;
  16.     position: relative;
  17. }
  18. .comment-contents > .create-comment > .create-head {
  19.     display: inline-block;
  20.     width: 70px;
  21.     height: 70px;
  22. }
  23. .user-head {
  24.     width: 70px;
  25.     height: 70px;
  26.     -webkit-border-radius: 5px;
  27.     -moz-border-radius: 5px;
  28.     border-radius: 5px;
  29. }
  30. .comment-contents > .create-comment > form {
  31.     position: absolute;
  32.     top: 0;
  33.     left: 80px;
  34. }
  35. .comment-contents > .create-comment > form > .submit {
  36.     width: 100px;
  37.     height: 40px;
  38.     -webkit-border-radius: 5px;
  39.     -moz-border-radius: 5px;
  40.     border-radius: 5px;
  41.     position:absolute;
  42.     right: 0;
  43.     background-color: RGB(225, 102, 104);
  44. }
  45. .comment-contents > .all-comments {
  46.     margin-top: 50px;
  47. }
  48. .comment-contents > .all-comments > .comment {
  49.     position: relative;
  50.     height: 130px;
  51. }
  52. .comment-contents > .all-comments > .comment > .comment-user-head > img {
  53.     margin-top: 10px;
  54. }
  55. .comment-contents > .all-comments > .comment > .comment-user-name {
  56.     position: absolute;
  57.     top: 0;
  58.     left: 90px;
  59. }
  60. .comment-contents > .all-comments > .comment > .comment-content {
  61.     position: absolute;
  62.     top: 35px;
  63.     left: 90px;
  64. }
  65. .comment-contents > .all-comments > .comment > .comment-time {
  66.     position: absolute;
  67.     top: 70px;
  68.     left: 90px;
  69. }
  70. .comment-contents > .all-comments > .comment > .replay {
  71.     position: absolute;
  72.     top: 70px;
  73.     right: 200px;
  74. }
  75. .comment-contents > .all-comments > .comment > .replay > i {
  76.     color: red;
  77. }

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