简体中文（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

博客列表 >2019年12月26日 作业 flex弹性盒子实战：“二手商品交易”+“评论与回复”

2019年12月26日 作业 flex弹性盒子实战：“二手商品交易”+“评论与回复”

L
L原创
2019年12月28日 18:07:58936浏览

作业是根据老师上课布局思路，自行构建写的，重新提交，希望得到老师对作业的肯定

实战思路

先分析效果图，通过flex布局特点（主轴方向，子元素是否换行，子元素扩展与收缩，排列对齐方式等），逐步构建html代码结构，进而通过css中flex实现效果

1.二手商品交易

效果

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8.     <link rel="stylesheet" href="public_second_hand.css" />
  9.     <title>二手商品交易</title>
  10. </head>
  12. <body>
  13.     <div class="public_headline">
  14.         <span>二手交易</span>
  15.     </div>
  16.     <!-- 二手交易区 -->
  17.     <div class="public_second_hand">
  18.         <!-- 标题1 -->
  19.         <div class="title1">
  20.             <a href="">抢好货</a>
  21.             <span>0低价, 便捷,安全,快速</span>
  22.         </div>
  23.         <!-- 标题2 -->
  24.         <div class="title2">
  25.             <span>热门分类</span>
  26.             <a href="">分类1</a>
  27.             <a href="">分类2</a>
  28.             <a href="">分类3</a>
  29.             <a href="">分类4</a>
  30.             <a href="">分类5</a>
  31.         </div>
  32.         <!-- 商品展示区 -->
  33.         <div class="goods">
  34.             <!-- 左侧商品列表 -->
  35.             <div class="goods-list">
  36.                 <!-- 商品简介 -->
  37.                 <div class="intro">
  38.                     <a href="">
  39.                         <img src="../../static/images/shop/shop3.jpg" alt="" width="176" height="120" />
  40.                     </a>
  41.                     <a href="">美女性感写真海报墙艺术装饰画贴画图</a>
  42.                     <div>
  43.                         <span>¥ 888</span>
  44.                         <span>美女</span>
  45.                     </div>
  46.                 </div>
  47.                 <div class="intro">
  48.                     <a href=""><img src="../../static/images/shop/shop2.jpg" alt="" width="176" height="120" /></a>
  49.                     <a href="">美女性感写真海报墙艺术装饰画贴画图</a>
  50.                     <div>
  51.                         <span>¥ 888</span>
  52.                         <span>美女</span>
  53.                     </div>
  54.                 </div>
  55.                 <div class="intro">
  56.                     <a href=""><img src="../../static/images/shop/shop3.jpg" alt="" width="176" height="120" /></a>
  57.                     <a href="">美女性感写真海报墙艺术装饰画贴画图</a>
  58.                     <div>
  59.                         <span>¥ 888</span>
  60.                         <span>美女</span>
  61.                     </div>
  62.                 </div>
  63.                 <div class="intro">
  64.                     <a href=""><img src="../../static/images/shop/shop6.jpg" alt="" width="176" height="120" /></a>
  65.                     <a href="">美女性感写真海报墙艺术装饰画贴画图</a>
  66.                     <div>
  67.                         <span>¥ 888</span>
  68.                         <span>美女</span>
  69.                     </div>
  70.                 </div>
  71.                 <div class="intro">
  72.                     <a href=""><img src="../../static/images/shop/shop3.jpg" alt="" width="176" height="120" /></a>
  73.                     <a href="">美女性感写真海报墙艺术装饰画贴画图</a>
  74.                     <div>
  75.                         <span>¥ 888</span>
  76.                         <span>美女</span>
  77.                     </div>
  78.                 </div>
  79.                 <div class="intro">
  80.                     <a href=""><img src="../../static/images/shop/shop8.jpg" alt="" width="176" height="120" /></a>
  81.                     <a href="">美女性感写真海报墙艺术装饰画贴画图</a>
  82.                     <div>
  83.                         <span>¥ 888</span>
  84.                         <span>美女</span>
  85.                     </div>
  86.                 </div>
  87.                 <div class="intro">
  88.                     <a href=""><img src="../../static/images/shop/shop6.jpg" alt="" width="176" height="120" /></a>
  89.                     <a href="">美女性感写真海报墙艺术装饰画贴画图</a>
  90.                     <div>
  91.                         <span>¥ 888</span>
  92.                         <span>美女</span>
  93.                     </div>
  94.                 </div>
  95.                 <div class="intro">
  96.                     <a href=""><img src="../../static/images/shop/shop7.jpg" alt="" width="176" height="120" /></a>
  97.                     <a href="">美女性感写真海报墙艺术装饰画贴画图</a>
  98.                     <div>
  99.                         <span>¥ 888</span>
  100.                         <span>美女</span>
  101.                     </div>
  102.                 </div>
  103.             </div>
  104.             <!-- 右侧快速入口 -->
  105.             <div class="quick-entry">
  106.                 <a href=""><img src="../../static/images/ad/1.png" alt="" /></a>
  107.                 <a href=""><img src="../../static/images/ad/2.png" alt="" /></a>
  108.                 <a href=""><img src="../../static/images/ad/3.png" alt="" /></a>
  109.                 <a href=""><img src="../../static/images/ad/4.png" alt="" /></a>
  110.                 <div>
  111.                     <a href=""><img src="../../static/images/ad/image.png" alt="" /></a>
  112.                     <a href=""><img src="../../static/images/ad/ad2.jpg" alt="" /></a>
  113.                 </div>
  114.             </div>
  115.         </div>
  116.     </div>
  117. </body>
  119. </html>

css样式

public_second_hand.css

  1. /* 导入公共初始化样式 */
  2. @import "../public_reset.css";
  4. .public_headline {
  5.     padding: 20px;
  6.     text-align: center;
  7. }
  8. .public_headline span {
  9.     font-size: 24px;
  10.     font-weight: bold;
  11.     margin-bottom: 10px;
  12.     border-bottom: 4px solid red;
  13. }
  15. /* 商品 */
  16. .public_second_hand {
  17.     width: 1200px;
  18.     padding: 10px;
  19.     box-sizing: border-box;
  20.     margin: auto;
  21.     border: 1px solid #cccccc;
  22.     border-radius: 5px;
  23. }
  24. .public_second_hand:hover {
  25.     box-shadow: 0 0 10px #cccccc;
  26. }
  27. .public_second_hand > .title1 {
  28.     height: 50px;
  29.     border-bottom: 1px solid #cccccc;
  30. }
  31. /* 标题1 */
  32. .public_second_hand > .title1 > a {
  33.     font-size: 24px;
  34.     margin-right: 15px;
  35. }
  36. .public_second_hand > .title1 > span {
  37.     color: red;
  38. }
  39. /* 标题2 */
  40. .public_second_hand > .title2 {
  41.     height: 50px;
  42. }
  43. .public_second_hand > .title2 > span {
  44.     font-size: 24px;
  45.     color: red;
  46. }
  47. .public_second_hand > .title2 > a {
  48.     padding-left: 15px;
  49. }
  51. /* 商品列表 */
  52. .public_second_hand > .goods {
  53.     height: 440px;
  54.     display: flex;
  55. }
  56. .public_second_hand > .goods > .goods-list {
  57.     padding: 10px;
  58.     flex-basis: 800px;
  59.     display: flex;
  60.     flex-flow: row wrap;
  61.     justify-content: space-between;
  62. }
  63. .public_second_hand > .goods > .goods-list > .intro {
  64.     width: 178px;
  65.     height: 200px;
  66.     display: flex;
  67.     flex-flow: column nowrap;
  68.     justify-content: space-between;
  69. }
  70. .public_second_hand > .goods > .goods-list > .intro img {
  71.     border: 1px solid #cccccc;
  72.     border-radius: 5px;
  73. }
  74. .public_second_hand > .goods > .goods-list > .intro > div {
  75.     display: flex;
  76. }
  77. .public_second_hand > .goods > .goods-list > .intro > div > span:first-child {
  78.     color: red;
  79. }
  80. .public_second_hand > .goods > .goods-list > .intro > div > span:last-child {
  81.     color: #ffffff;
  82.     background-color: #55ce9f;
  83.     padding: 0 5px;
  84.     margin-left: auto;
  85. }
  86. .public_second_hand > .goods > .quick-entry {
  87.     padding: 10px;
  88.     flex-basis: 400px;
  89.     display: flex;
  90.     flex-flow: row wrap;
  91.     justify-content: space-between;
  92. }
  93. .public_second_hand > .goods > .quick-entry img {
  94.     width: 190px;
  95.     height: 130px;
  96. }
  97. .public_second_hand > .goods > .quick-entry > div {
  98.     width: 400px;
  99.     display: flex;
  100.     flex-direction: column;
  101. }
  102. .public_second_hand > .goods > .quick-entry > div img {
  103.     width: 393px;
  104.     height: 60px;
  105. }

公共初始化样式public_reset.css

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body {
  6.     color: #333;
  7.     background-color: #ffffff;
  8. }
  9. a {
  10.     color: #333;
  11.     text-decoration: none;
  12. }
  13. li {
  14.     list-style: none;
  15. }

2.评论回复

效果

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8.     <link rel="stylesheet" href="../../static/font/iconfont.css" />
  9.     <link rel="stylesheet" href="public-comment-reply.css" />
  10.     <title>评论回复</title>
  11. </head>
  13. <body>
  14.     <div class="public-comment-reply">
  15.         <!-- 评论 -->
  16.         <div class="comment">
  17.             <h3>我要评论</h3>
  18.             <div>
  19.                 <label for="comment">
  20.                     <img src="../../static/images/user.png" alt="" />
  21.                 </label>
  22.                 <textarea name="comment" id="comment"></textarea>
  23.             </div>
  24.             <button>发表评论</button>
  25.         </div>
  26.         <!-- 回复 -->
  27.         <div class="reply">
  28.             <h3>最新回复</h3>
  29.             <div>
  30.                 <img src="../../static/images/user.png" alt="" />
  31.                 <div>
  32.                     <span>用户昵称</span>
  33.                     <span>留言内容: Run Albania hacking</span>
  34.                     <div>
  35.                         <span>2019-12-12 15:34:23发表</span>
  36.                         <span>
  37.                             <i class="icon iconfont icon-dianzan"></i>
  38.                             回复
  39.                         </span>
  40.                     </div>
  41.                 </div>
  42.             </div>
  43.             <div>
  44.                 <img src="../../static/images/user.png" alt="" />
  45.                 <div>
  46.                     <span>用户昵称</span>
  47.                     <span>留言内容: Run Albania hacking</span>
  48.                     <div>
  49.                         <span>2019-12-12 15:34:23发表</span>
  50.                         <span>
  51.                             <i class="icon iconfont icon-dianzan"></i>
  52.                             回复
  53.                         </span>
  54.                     </div>
  55.                 </div>
  56.             </div>
  57.             <div>
  58.                 <img src="../../static/images/user.png" alt="" />
  59.                 <div>
  60.                     <span>用户昵称</span>
  61.                     <span>留言内容: Run Albania hacking</span>
  62.                     <div>
  63.                         <span>2019-12-12 15:34:23发表</span>
  64.                         <span>
  65.                             <i class="icon iconfont icon-dianzan"></i>
  66.                             回复
  67.                         </span>
  68.                     </div>
  69.                 </div>
  70.             </div>
  71.             <div>
  72.                 <img src="../../static/images/user.png" alt="" />
  73.                 <div>
  74.                     <span>用户昵称</span>
  75.                     <span>留言内容: Run Albania hacking</span>
  76.                     <div>
  77.                         <span>2019-12-12 15:34:23发表</span>
  78.                         <span>
  79.                             <i class="icon iconfont icon-dianzan"></i>
  80.                             回复
  81.                         </span>
  82.                     </div>
  83.                 </div>
  84.             </div>
  85.             <div>
  86.                 <img src="../../static/images/user.png" alt="" />
  87.                 <div>
  88.                     <span>用户昵称</span>
  89.                     <span>留言内容: Run Albania hacking</span>
  90.                     <div>
  91.                         <span>2019-12-12 15:34:23发表</span>
  92.                         <span>
  93.                             <i class="icon iconfont icon-dianzan"></i>
  94.                             回复
  95.                         </span>
  96.                     </div>
  97.                 </div>
  98.             </div>
  99.         </div>
  100.     </div>
  101. </body>
  103. </html>

css样式public-comment-reply.css

  1. /* 导入公共初始化样式 */
  2. @import "../public_reset.css";
  3. .public-comment-reply {
  4.     padding: 20px;
  5.     box-sizing: border-box;
  6.     display: flex;
  7.     flex-direction: column;
  8. }
  9. /* 评论 */
  10. .public-comment-reply > .comment {
  11.     display: flex;
  12.     flex-direction: column;
  13. }
  14. .public-comment-reply > .comment h3 {
  15.     border-top: 1px solid #cccccc;
  16.     padding-top: 20px;
  17. }
  18. .public-comment-reply > .comment > div {
  19.     height: 200px;
  20.     padding: 15px;
  21.     display: flex;
  22. }
  23. .public-comment-reply > .comment > div img {
  24.     width: 60px;
  25.     height: 60px;
  26. }
  27. .public-comment-reply > .comment > div textarea {
  28.     height: 200px;
  29.     margin-left: 20px;
  30.     padding: 10px;
  31.     box-sizing: border-box;
  32.     flex: auto;
  33. }
  34. .public-comment-reply > .comment > div textarea:hover {
  35.     box-shadow: 0 0 8px #cccccc;
  36. }
  37. .public-comment-reply > .comment > button {
  38.     width: 120px;
  39.     height: 40px;
  40.     align-self: flex-end;
  41.     margin-right: 15px;
  42.     border: none;
  43.     background-color: #f64c59;
  44.     color: #ffffff;
  45.     cursor: pointer;
  46. }
  47. .public-comment-reply > .comment > button:hover {
  48.     background-color: #178cee;
  49.     box-shadow: 0 0 8px #cccccc;
  50. }
  51. .public-comment-reply > .reply {
  52.     display: flex;
  53.     flex-direction: column;
  54. }
  55. .public-comment-reply > .reply h3 {
  56.     padding: 20px 0;
  57. }
  58. .public-comment-reply > .reply > div {
  59.     display: flex;
  60. }
  61. .public-comment-reply > .reply > div > img {
  62.     width: 60px;
  63.     height: 60px;
  64.     align-self: center;
  65. }
  66. .public-comment-reply > .reply > div > div {
  67.     height: 100px;
  68.     margin-left: 20px;
  69.     flex: auto;
  70.     display: flex;
  71.     flex-direction: column;
  72.     justify-content: space-between;
  73. }
  74. .public-comment-reply > .reply > div > div > div {
  75.     display: flex;
  76.     justify-content: space-between;
  77. }
  78. .public-comment-reply > .reply > div > div > div i {
  79.     color: red;
  80.     font-size: 1.2rem;
  81.     margin-right: 5px;
  82. }
上一条：1226作业独立完成评论与二手商品下一条：flex容器的6个属性练习总结-PHP培训十期线上班-20191223
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
李**¹⁸⁰³⁹⁵⁴⁰¹²⁰2019-12-28 15:01:012楼
如果实在介意，你可以重新编辑一下作业，在提交，作业就会变成为批改状态，咱们的作业提交时间不一样，有的人晚，有的早，所以，老师还会再次批改
L2019-12-28 14:22:371楼
我是自己写的

相关文章

查看更多