Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12月26日作业：flex实战案例
Blogger Information
Blog 145
fans 7
comment 7
visits 164511
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
12月26日作业：flex实战案例
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
1000 people have browsed it

作业一：
二手商品列表代码：
1、html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public_second_hand.css">
  6.     <title>公共商品区</title>
  7. </head>
  8. <body>
  9. <div class="public-headline">
  10.     <span>二手交易</span>
  11. </div>
  12. <div class="public-second-hand">
  13.     <div class="title">
  14.         <div class="title1">
  15.             <a href=""><span>抢好货</span></a>
  16.             <span>0低价，便捷，安全，快速</span>
  17.         </div>
  18.         <div class="title2">
  19.             <span>热门分类</span>
  20.             <a href=""><span>美女写真</span></a>
  21.             <a href=""><span>日本美女</span></a>
  22.             <a href=""><span>美国美女</span></a>
  23.             <a href=""><span>国内美女</span></a>
  24.             <a href=""><span>AV美女</span></a>
  25.         </div>
  26.     </div>
  27.     <div class="shops">
  28.         <div class="shop-left">
  29.             <div class="details">
  30.                 <a href=""><img src="../../../static/images/shop/shop1.jpg" alt=""></a>
  31.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  32.                 <div>
  33.                     <span>¥333</span>
  34.                     <span>美女</span>
  35.                 </div>
  36.             </div>
  37.             <div class="details">
  38.                 <a href=""><img src="../../../static/images/shop/shop2.jpg" alt=""></a>
  39.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  40.                 <div>
  41.                     <span>¥333</span>
  42.                     <span>美女</span>
  43.                 </div>
  44.             </div>
  45.             <div class="details">
  46.                 <a href=""><img src="../../../static/images/shop/shop3.jpg" alt=""></a>
  47.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  48.                 <div>
  49.                     <span>¥333</span>
  50.                     <span>美女</span>
  51.                 </div>
  52.             </div>
  53.             <div class="details">
  54.                 <a href=""><img src="../../../static/images/shop/shop4.jpg" alt=""></a>
  55.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  56.                 <div>
  57.                     <span>¥333</span>
  58.                     <span>美女</span>
  59.                 </div>
  60.             </div>
  61.             <div class="details">
  62.                 <a href=""><img src="../../../static/images/shop/shop5.jpg" alt=""></a>
  63.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  64.                 <div>
  65.                     <span>¥333</span>
  66.                     <span>美女</span>
  67.                 </div>
  68.             </div>
  69.             <div class="details">
  70.                 <a href=""><img src="../../../static/images/shop/shop6.jpg" alt=""></a>
  71.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  72.                 <div>
  73.                     <span>¥333</span>
  74.                     <span>美女</span>
  75.                 </div>
  76.             </div>
  77.             <div class="details">
  78.                 <a href=""><img src="../../../static/images/shop/shop7.jpg" alt=""></a>
  79.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  80.                 <div>
  81.                     <span>¥333</span>
  82.                     <span>美女</span>
  83.                 </div>
  84.             </div>
  85.             <div class="details">
  86.                 <a href=""><img src="../../../static/images/shop/shop8.jpg" alt=""></a>
  87.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  88.                 <div>
  89.                     <span>¥333</span>
  90.                     <span>美女</span>
  91.                 </div>
  92.             </div>
  93.         </div>
  94.         <div class="shop-right">
  95.             <div class="up">
  96.                 <a href=""><img src="../../../static/images/ad/1.png" alt=""></a>
  97.                 <a href=""><img src="../../../static/images/ad/2.png" alt=""></a>
  98.                 <a href=""><img src="../../../static/images/ad/3.png" alt=""></a>
  99.                 <a href=""><img src="../../../static/images/ad/4.png" alt=""></a>
  100.             </div>
  101.             <div class="down">
  102.                 <a href=""><img src="../../../static/images/ad/image.png" alt=""></a>
  103.                 <a href=""><img src="../../../static/images/ad/ad2.jpg" alt=""></a>
  104.             </div>
  105.         </div>
  106.     </div>
  107. </div>
  108. </body>
  109. </html>

2、css代码：

  1. @import url(../../public_reset.css);
  2. @import url(../publice_headline/public_headline.css);
  3. /*主体设置*/
  4. .public-second-hand {
  5.     width: 1200px;
  6.     margin:auto;
  7.     background-color: #ffffff;
  8.     /*border:1px solid #404040;*/
  9. }
  10. .public-second-hand:hover {
  11.     box-shadow: 0 0 3px #404040;
  12. }
  13. /*标题设置*/
  14. .public-second-hand > .title  > .title1 {
  15.     border-bottom: 1px solid #CCCCCC;
  16.     padding: 10px;
  17.     box-sizing: content-box;
  18. }
  19. .public-second-hand > .title > .title1 > a > span {
  20.     font-size: 30px;
  21.     /*color:red;*/
  22. }
  23. .public-second-hand > .title > .title1 > span {
  24.     color:#ff0000;
  25.     margin-left:20px;
  27. }
  28. .public-second-hand > .title  > .title2 >span {
  29.     font-size: 20px;
  30.     color:#ff0000;
  31.     margin-left:10px;
  32. }
  33. .public-second-hand > .title  > .title2 > a {
  34.     margin-left:20px;
  35. }
  36. .public-second-hand > .title  > .title2 > a:hover {
  37.     color:#DD4A68;
  38. }
  40. /*商品区设置*/
  41. .public-second-hand > .shops {
  42.     /*height: 600px;*/
  43.     margin-top: 10px;
  44.     padding-bottom: 10px;
  46.     display: flex;
  47.     flex-flow:row nowrap;
  49. }
  50. .public-second-hand > .shops > * {
  51.     flex:0 1 auto;
  52.     justify-content: space-evenly;
  53. }
  54. .public-second-hand > .shops > .shop-left {
  55.     width: 800px;
  56.     padding-left:10px;
  57.     display:flex;
  58.     flex-flow:row wrap;
  60. }
  61. .public-second-hand > .shops > .shop-left > .details {
  62.     width: 180px;
  63.     margin-right: 10px;
  64.     margin-top: 10px;
  65.     display:flex;
  66.     flex-flow:column nowrap;
  67.     justify-content: space-between;
  68. }
  69. .public-second-hand > .shops > .shop-left > .details  img {
  70.     width: 176px;
  71.     height: 120px;
  72.     border:1px solid #666666;
  73.     border-radius: 3px;
  74.     flex:0 1 auto;
  75. }
  76. .public-second-hand > .shops > .shop-left > .details > div {
  77.     display:flex;
  78.     justify-content: space-between;
  79. }
  80. .public-second-hand > .shops > .shop-left > .details > div > :first-child {
  81.     font-size: 16px;
  82.     color: #ff0000;
  83. }
  84. .public-second-hand > .shops > .shop-left > .details > div > :last-child {
  85.     border-radius: 5px;
  86.     padding:2px;
  87.     color: #ffffff;
  88.     background-color: green;
  89. }
  90. /*商品右边*/
  91. .public-second-hand > .shops > .shop-right {
  92.     width: 400px;
  93. }
  94. .public-second-hand > .shops > .shop-right img {
  95.     width: 176px;
  96.     height: 120px;
  97.     border:1px solid #666666;
  98.     border-radius: 3px;
  99. }
  100. .public-second-hand > .shops > .shop-right > .up {
  101.     margin-top: 10px;
  102.     display: flex;
  103.     flex-flow:row wrap;
  104.     justify-content: space-around;
  105. }
  106. .public-second-hand > .shops > .shop-right >.down {
  107.     display:flex;
  108.     flex-flow:column nowrap;
  109. }
  110. .public-second-hand > .shops > .shop-right >.down img {
  111.     width: 393px;
  112.     height: 60px;
  113. }

3、效果图如下：

作业二：
公共评论回复代码：
1、html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public_comment_reply.css">
  6.     <link rel="stylesheet" href="../../../static/font/iconfont.css">
  7.     <title>公共评论回复</title>
  8. </head>
  9. <body>
  10. <div class="public-comment-reply">
  11.     <div class="comment">
  12.         <h3>我要评论</h3>
  13.         <div>
  14.             <label for="comment"><img src="../../../static/images/user.png" alt=""></label>
  15.             <textarea name="" id="comment" ></textarea>
  16.         </div>
  17.         <button>发表评论</button>
  18.     </div>
  19.     <div class="reply">
  20.         <h3>最新回复</h3>
  21.         <div>
  22.             <img src="../../../static/images/user.png" alt="">
  23.             <div class="reply-detail">
  24.                 <span>用户昵称</span>
  25.                 <span>留言内容：种业圈是一个有温度，有思想的交流平台</span>
  26.                 <div>
  27.                     <span>2019-12-27 12：05：22发表</span>
  28.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  29.                 </div>
  30.             </div>
  31.         </div>
  32.         <div>
  33.             <img src="../../../static/images/user.png" alt="">
  34.             <div class="reply-detail">
  35.                 <span>用户昵称</span>
  36.                 <span>留言内容：种业圈是一个有温度，有思想的交流平台</span>
  37.                 <div>
  38.                     <span>2019-12-27 12：05：22发表</span>
  39.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  40.                 </div>
  41.             </div>
  42.         </div>
  43.         <div>
  44.             <img src="../../../static/images/user.png" alt="">
  45.             <div class="reply-detail">
  46.                 <span>用户昵称</span>
  47.                 <span>留言内容：种业圈是一个有温度，有思想的交流平台</span>
  48.                 <div>
  49.                     <span>2019-12-27 12：05：22发表</span>
  50.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  51.                 </div>
  52.             </div>
  53.         </div>
  54.         <div>
  55.             <img src="../../../static/images/user.png" alt="">
  56.             <div class="reply-detail">
  57.                 <span>用户昵称</span>
  58.                 <span>留言内容：种业圈是一个有温度，有思想的交流平台</span>
  59.                 <div>
  60.                     <span>2019-12-27 12：05：22发表</span>
  61.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  62.                 </div>
  63.             </div>
  64.         </div>
  65.     </div>
  66. </div>
  67. </body>
  68. </html>

2、css代码：

  1. @import url(../../public_reset.css);
  3. .public-comment-reply {
  4.     /*width: 1200px;*/
  5.     margin:20px auto;
  6.     background-color: #fff;
  7.     display: flex;
  8.     flex-flow:column nowrap;
  9. }
  10. .public-comment-reply >.comment {
  11.     margin: 15px;
  12.     display: flex;
  13.     flex-flow:column nowrap;
  14. }
  15. .public-comment-reply >.comment img {
  16.     width: 60px;
  17.     height: 60px;
  18.     box-shadow: 0 0 3px #404040;
  19. }
  20. .public-comment-reply >.comment > * {
  21.     flex:1 1 auto;
  22. }
  23. .public-comment-reply > .comment > div {
  24.     /*width: 800px;*/
  25.     margin-top:10px;
  26.     display: flex;
  27.     flex-flow:row nowrap;
  28.     /*flex:0 1 auto;*/
  29. }
  30. .public-comment-reply > .comment > div > textarea {
  31.     margin-left: 20px;
  32.     height: 200px;
  33.     width: 900px;
  34.     resize:none;
  35.     font-size: 18px;
  36.     /*flex:0 1 auto;*/
  38. }
  39. .public-comment-reply > .comment > div > textarea:hover {
  40.     box-shadow: 0 0 3px #666666 inset;
  41. }
  42. .public-comment-reply > .comment > button {
  43.     width: 150px;
  44.     height: 40px;
  45.     margin-top: 10px;
  46.     align-self: flex-end;
  47.     border-style: none;
  48.     background-color: #F64C59;
  49.     color:white;
  50. }
  51. .public-comment-reply > .comment > button:hover {
  52.     background-color: #178CEE;
  53. }
  54. .public-comment-reply >.reply {
  55.     margin:10px;
  56.     flex-flow:column nowrap;
  58. }
  59. .public-comment-reply > .reply >div {
  60.     margin-top:10px;
  61.     height: 90px;
  62.     display: flex;
  63.     justify-content: flex-start;
  65. }
  66. .public-comment-reply > .reply > div >img {
  67.     width: 60px;
  68.     height: 60px;
  69.     box-shadow: 0 0 3px #404040;
  70.     align-self: center;
  71. }
  72. .public-comment-reply > .reply > div > .reply-detail {
  73.     margin-left:15px;
  74.     display: flex;
  75.     flex-flow:column nowrap;
  76.     justify-content: space-around;
  77.     flex:1 1 auto;
  78. }
  79. .public-comment-reply > .reply >div > .reply-detail > div {
  80.     display: flex;
  81.     justify-content: space-between;
  82. }
  84. .public-comment-reply > .reply >div > .reply-detail > div > :last-child > i{
  85.     color:red;
  86.     font-size: 1.2rem;
  87.     margin-right: 5px;
  88. }

3、效果图：

总结：布局规划和网页组件规划，以及页面布局的细节调整
知识点：
textarea文本域：resize:none 取消拖拉伸缩属性
font-size:属性值单位rem 是当前字体的倍数显示

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