search

博客列表 >Flex实现二手交易与评论功能

Flex实现二手交易与评论功能

荔枝哥哥
荔枝哥哥原创
2019年12月29日 22:41:59661浏览

Flex实现二手交易与评论功能

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="./job_1.css">
  8.     <title>二手组件</title>
  9. </head>
  10. <body>
  11.     <!-- 引入大标题组件 -->
  12.     <div class="public-headline">
  13.         <span>二手交易</span>
  14.     </div>
  15.     <!-- 二手交易区 -->
  16.     <div class="public-second-hand">
  17.         <!-- 标题1 -->
  18.         <div class="title1">
  19.             <a href="">抢好货</a>
  20.             <span> 0低价, 便捷,安全,快速</span>
  21.         </div>
  22.         <div class="title2">
  23.             <span>热门分类</span>
  24.             <a href="">美女写真</a>
  25.             <a href="">日本美女</a>
  26.             <a href="">美国美女</a>
  27.             <a href="">国内美女</a>
  28.             <a href="">神奇女侠</a>
  29.         </div>
  30.         <!-- 商品展示区 -->
  31.         <div class="goods">
  32.             <!--1 商品列表 -->
  33.             <div class="goods-list">
  34.                 <!-- 商品简介1 -->
  35.                 <div class="intro">
  36.                     <a href=""><img src="./1226/static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  37.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  38.                     <div>
  39.                         <span>&yen;333</span>
  40.                         <span>美女</span>
  41.                     </div>
  42.                 </div>
  43.                 <div class="intro">
  44.                     <a href=""><img src="./1226/static/images/shop/shop2.jpg" alt="" ></a>
  45.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  46.                     <div>
  47.                         <span>&yen;333</span>
  48.                         <span>美女</span>
  49.                     </div>
  50.                 </div>
  51.                 <div class="intro">
  52.                     <a href=""><img src="./1226/static/images/shop/shop3.jpg" alt=""></a>
  53.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  54.                     <div>
  55.                         <span>&yen;333</span>
  56.                         <span>美女</span>
  57.                     </div>
  58.                 </div>
  59.                 <div class="intro">
  60.                     <a href=""><img src="./1226/static/images/shop/shop4.jpg" alt=""></a>
  61.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  62.                     <div>
  63.                         <span>&yen;333</span>
  64.                         <span>美女</span>
  65.                     </div>
  66.                 </div>
  67.                 <div class="intro">
  68.                     <a href=""><img src="./1226/static/images/shop/shop5.jpg" alt=""></a>
  69.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  70.                     <div>
  71.                         <span>&yen;333</span>
  72.                         <span>美女</span>
  73.                     </div>
  74.                 </div>
  75.                 <div class="intro">
  76.                     <a href=""><img src="./1226/static/images/shop/shop6.jpg" alt=""></a>
  77.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  78.                     <div>
  79.                         <span>&yen;333</span>
  80.                         <span>美女</span>
  81.                     </div>
  82.                 </div>
  83.                 <div class="intro">
  84.                     <a href=""><img src="./1226/static/images/shop/shop7.jpg" alt=""></a>
  85.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  86.                     <div>
  87.                         <span>&yen;333</span>
  88.                         <span>美女</span>   
  89.                     </div>
  90.                 </div>
  91.                 <div class="intro">
  92.                     <a href=""><img src="./1226/static/images/shop/shop8.jpg" alt=""></a>
  93.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  94.                     <div>
  95.                         <span>&yen;333</span>
  96.                         <span>美女</span>
  97.                     </div>
  98.                 </div>
  99.             </div>
  100.             <!-- 右侧快速入口 -->
  101.             <div class="quick-entry">
  102.                 <a href=""><img src="./1226/static/images/ad/1.png" alt=""></a>
  103.                 <a href=""><img src="./1226/static/images/ad/2.png" alt=""></a>
  104.                 <a href=""><img src="./1226/static/images/ad/3.png" alt=""></a>
  105.                 <a href=""><img src="./1226/static/images/ad/4.png" alt=""></a>
  106.                 <div>
  107.                     <a href=""><img src="./1226/static/images/ad/image.png" alt=""></a>
  108.                     <a href=""><img src="./1226/static/images/ad/ad2.jpg" alt=""></a>
  109.                 </div>
  110.             </div>
  111.         </div>
  112.     </div>
  115. </body>
  116. </html>
  1. /*样式重置*/
  2. @import "./job_reset.css";
  4. /*大标题组件*/
  5. @import "./job_headline.css";
  7. /* 二手交易专区的样式表 */
  8. .public-second-hand{
  9.     width: 1200px;
  10.     padding: 10px;
  11.     box-sizing: border-box;
  12.     margin: auto;
  13.     border-radius: 5px;
  14.     background-color: #fff;
  15. }
  16. /* 阴影效果 */
  17. .public-second-hand:hover{
  18.     box-shadow: 0 0 8px #888;
  19. }
  20. /* 标题1 */
  21. .public-second-hand > .title1{
  22.     height: 50px;
  23.     border-bottom: 1px solid #cccccc;
  24.     box-sizing: border-box;
  25. }
  26. .public-second-hand > .title1 > a{
  27.     font-size: 23px;
  28.     margin-right: 20px;
  29. }
  30. .public-second-hand > .title1 > span{
  31.     color: red;
  32. }
  33. /* 标题2 */
  34. .public-second-hand > .title2 {
  35.     height: 55px;
  36. }
  37. .public-second-hand > .title2 > span{
  38.     color: red;
  39.     font-size: 23px;
  40. }
  41. .public-second-hand > .title2 > span ~ a{
  42.     padding-left: 20px;
  43. }
  44. .public-second-hand > .title2 > span ~ a:hover {
  45.     color: lightcoral;
  46. }
  48. /* 商品展示区 */
  49. .public-second-hand > .goods {
  50.     height: 440px;
  51.     /* 转换为弹性布局 */
  52.     display: flex;
  53. }
  54. .public-second-hand > .goods > .goods-list{
  55.     padding: 10px;
  56.     flex-basis: 800px;
  57.     display: flex;
  58.     flex-flow: row wrap;
  59.     justify-content: space-between;
  60. }
  61. .public-second-hand > .goods > .goods-list > .intro{
  62.     width: 178px;
  63.     height: 200px;
  64.     display: flex;
  65.     flex-flow: column nowrap;
  66.     justify-content: space-between;
  67. }
  68. .public-second-hand > .goods > .goods-list > .intro img{
  69.     width: 176px;
  70.     height: 120px;
  71.     border: 1px solid #cccccc;
  72.     border-radius: 5px;
  73. }
  74. .public-second-hand > .goods > .goods-list > .intro span:first-of-type {
  75.     color: red;
  76. }
  77. .public-second-hand > .goods > .goods-list > .intro > div {
  78.     display: flex;
  79. }
  80. .public-second-hand > .goods > .goods-list > .intro span:last-of-type {
  81.     color: white;
  82.     background-color: #55ce9f;
  83.     padding: 0 5px;
  84.     margin-left: auto;
  85. }
  86. /* 功能快速入口区 */
  87. .public-second-hand > .goods > .quick-entry{
  88.     flex-basis: 400px;
  89.     padding: 10px;
  90.     display: flex;
  91.     flex-flow: row wrap;
  92.     justify-content: space-between;
  93. }
  94. .public-second-hand > .goods > .quick-entry img{
  95.     width: 190px;
  96.     height: 130px;
  97. }
  98. .public-second-hand > .goods > .quick-entry > div {
  99.     width: 400px;
  100.     display: flex;
  101.     flex-direction: column;
  102. }
  103. .public-second-hand > .goods > .quick-entry > div img {
  104.     width: 393px;
  105.     height: 60px;
  106. }

second-hand

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="./1226/static/font/iconfont.css">
  8.     <link rel="stylesheet" href="job_2.css">
  9.     <title>评论与回复组件</title>
  10. </head>
  11. <body>
  12.     <div class="public-comment-reply">
  13.         <!-- 评论区 -->
  14.         <div class="comment">
  15.             <h3>我要评论</h3>
  16.             <div>
  17.                 <label for="comment"><img src="./1226/static/images/user.png" alt=""></label>
  18.                 <textarea name="" id="comment"></textarea>
  19.             </div>
  20.             <button>发表评论</button>
  21.         </div>
  22.         <!-- 回复区 -->
  23.         <div class="reply">
  24.             <h3>最新回复</h3>
  25.             <div>
  26.                 <img src="./1226/static/images/user.png" alt="">
  27.                 <div class="detail">
  28.                     <span>用户昵称</span>
  29.                     <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  30.                     <div>
  31.                         <span>2019-12-29 22:03:11发表</span>
  32.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  33.                     </div>
  35.                 </div>
  36.             </div>
  37.             <div>
  38.                 <img src="./1226/static/images/user.png" alt="">
  39.                 <div class="detail"> 
  40.                     <span>用户昵称</span>
  41.                     <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  42.                     <div>
  43.                         <span>2019-12-29 22:03:11发表</span>
  44.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  45.                     </div>
  47.                 </div>
  48.             </div>
  49.             <div>
  50.                 <img src="./1226/static/images/user.png" alt="">
  51.                 <div class="detail">
  52.                     <span>用户昵称</span>
  53.                     <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  54.                     <div>
  55.                         <span>2019-12-29 22:03:11发表</span>
  56.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  57.                     </div>
  59.                 </div>
  60.             </div>
  61.             <div>
  62.                 <img src="./1226/static/images/user.png" alt="">
  63.                 <div class="detail">
  64.                     <span>用户昵称</span>
  65.                     <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  66.                     <div>
  67.                         <span>2019-12-29 22:03:11发表</span>
  68.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  69.                     </div>
  71.                 </div>
  72.             </div>
  73.             <div>
  74.                 <img src="./1226/static/images/user.png" alt="">
  75.                 <div class="detail">
  76.                     <span>用户昵称</span>
  77.                     <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  78.                     <div>
  79.                         <span>2019-12-29 22:03:11发表</span>
  80.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  81.                     </div>
  83.                 </div>
  84.             </div>
  85.             <div>
  86.                 <img src="./1226/static/images/user.png" alt="">
  87.                 <div class="detail">
  88.                     <span>用户昵称</span>
  89.                     <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  90.                     <div>
  91.                         <span>2019-12-29 22:03:11发表</span>
  92.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  93.                     </div>
  95.                 </div>
  96.             </div>
  97.         </div>
  98.     </div>
  99. </body>
  100. </html>
  1. @import url(./job_reset.css);
  3. .public-comment-reply{
  4.     padding: 15px;
  5.     box-sizing: border-box;
  6.     background-color: #fff;
  7.     display: flex;
  8.     flex-direction: column;
  9. }
  10. .public-comment-reply img{
  11.     width: 60px;
  12.     height: 60px;
  13.     border-radius: 5px;
  14.     box-shadow: 1px 1px 3px #cccccc;
  15. }
  16. .public-comment-reply > .comment{
  17.     display: flex;
  18.     flex-direction: column;
  19. }
  20. .public-comment-reply > .comment h3{
  21.     padding: 20px 0;
  22.     border-top: 1px solid #cccccc;
  23. }
  24. .public-comment-reply > .comment > div{
  25.     padding: 15px;
  26.     height: 200px;
  27.     display: flex;
  28.     flex-flow: row nowrap;
  29. }
  30. .public-comment-reply > .comment > div img{
  31.     align-self: flex-start;
  32. }
  33. .public-comment-reply > .comment > div textarea{
  34.     height: 200px;
  35.     margin-left: 20px;
  36.     /* 输入框大小不可以拖动 */
  37.     resize: none;
  38.     flex: auto;
  39. }
  40. .public-comment-reply > .comment > div textarea:hover{
  41.     box-shadow: 0 0 8px #888888;
  42. }
  43. .public-comment-reply > .comment > button{
  44.     font-size: 14px;
  45.     background-color: #f64c59;
  46.     border: none;
  47.     color: white;
  48.     width: 150px;
  49.     height: 40px;
  50.     align-self: flex-end;
  51. }
  52. .public-comment-reply > .comment > button:hover{
  53.     background-color: #178cee;
  54.     box-shadow: 0 0 8px #888888;
  55.     cursor: pointer;
  56. }
  57. /* 回复区 */
  58. .public-comment-reply > .reply{
  59.     display: flex;
  60.     flex-direction: column;
  61.     padding: 15px 0;
  62. }
  63. .public-comment-reply > .reply > h3{
  64.     padding: 20px 0;
  65. }
  66. .public-comment-reply > .reply > div{
  67.     display: flex;
  68.     margin-top: 30px;
  69. }
  70. .public-comment-reply > .reply > div > img{
  71.     align-self: center;
  72. }
  73. .public-comment-reply > .reply > div > .detail{
  74.     flex: auto;
  75.     display: flex;
  76.     flex-direction: column;
  77.     margin-left: 20px;
  78.     height: 90px;
  79.     justify-content: space-between;
  80. }
  81. .public-comment-reply > .reply > div > .detail >div{
  82.     display: flex;
  83.     justify-content: space-between;
  84. }
  85. .public-comment-reply > .reply > div > .detail >div i{
  86.     color: red;
  87.     font-size: 1.2rem;
  88.     margin-right: 5px;
  89. }

comment-reply

总结

拿到界面时先整体规划好思路，画好多少个弹性盒子，怎么布局会更容易让flex发挥他的最优方式

上一条：《CSS基础》2019-12-20作业笔记下一条：composer安装laravel
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多