简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >flex实战(二手交易区,翻页,评论组件)

flex实战(二手交易区,翻页,评论组件)

xiaosheng
xiaosheng原创
2019年12月27日 19:38:46695浏览

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

上一条：flex容器的6个属性练习总结-PHP培训十期线上班-20191223下一条：2019年12月26日作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多