简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1226作业
Blogger Information
Blog 7
fans 0
comment 0
visits 4317
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
1226作业
建国
Original
633 people have browsed it

培训内容

flex实战

作业

目录结构

  1. |-components_self
  2. |  |-public_comment_reply
  3. |  |  |-public_comment_reply.css
  4. |  |
  5. |  |-public_exercise_1226
  6. |  |  |-public_exercise_1226.css
  7. |  |  |-public_exercise_1226.html
  8. |  |
  9. |  |-public_headline
  10. |  |  |-public_headline.css
  11. |  |
  12. |  |-public_second_hand
  13. |  |  |-public_second_hand.css
  14. |  |
  15. |  |-public_reset.css
  16. |
  17. |-static

代码部分

public_comment_reply.css

  1. @import "../public_reset.css";
  3. .public-comment-reply{
  4.     display: flex;
  5.     flex-direction: column;
  6.     padding: 20px;
  7.     width: 1200px;
  8.     margin: auto;
  9. }
  11. .public-comment-reply > .title {
  12.     border-top:1px solid #cccccc;
  13. }
  15. .public-comment-reply .title {
  16.     line-height: 50px;
  17.     font-size: 20px;
  18.     font-weight: bold;
  19. }
  21. .public-comment-reply > .reply{
  22.     display: flex;
  23.     flex-direction: column;
  24.     margin-bottom: 20px;
  25. }
  27. .public-comment-reply > .reply > div{
  28.     display: flex;
  29.     margin-bottom: 10px;
  30. }
  32. .public-comment-reply > .reply > div > label{
  33.     align-self: flex-start;
  34. }
  36. .public-comment-reply > .reply > div > textarea{
  37.     flex:1;
  38.     height:200px;
  39.     margin-left:20px;
  40.     border:1px solid #cccccc;
  41.     border-radius: 5px;
  42.     padding: 10px;
  43.     resize: none;
  44. }
  46. .public-comment-reply > .reply > div > label > img{
  47.     align-self: center;
  48. }
  50. .public-comment-reply img{
  51.     width: 60px;
  52.     height: 60px;
  53.     border-radius: 5px;
  54.     box-shadow: 0 0 5px #888888;
  55. }
  57. .public-comment-reply > .reply > button {
  58.     width: 150px;
  59.     height: 40px;
  60.     border:none;
  61.     background-color: #f64c59;
  62.     color:white;
  63.     border-radius: 5px;    
  64.     cursor: pointer;
  65. }
  67. .public-comment-reply > .comment > .comment-list > .detail{
  68.     display: flex;
  69.     margin-bottom: 20px;
  70. }
  72. .public-comment-reply > .comment > .comment-list > .detail >img{
  73.     align-self: center;
  74. }
  76. .public-comment-reply > .comment > .comment-list >.detail > div{
  77.     margin-left:20px;
  78.     flex: 1;
  79.     display: flex;
  80.     flex-direction: column;
  81.     justify-content: space-between;
  82.     height: 90px;
  83. }
  85. .public-comment-reply > .comment > .comment-list >.detail > div > div{
  86.     display: flex;
  87.     justify-content: space-between;
  88. }
  90. .public-comment-reply > .comment > .comment-list >.detail > div > div > :first-child{
  91.     color:#888888;
  92. }
  94. .public-comment-reply > .comment > .comment-list >.detail > div > div > :last-child{
  95.     font-size: 14px;
  96. }
  98. .public-comment-reply > .comment > .comment-list >.detail > div > div > :last-child > i{
  99.     color:red;
  100.     margin-right: 10px;
  101.     font-size: 18px;
  102. }

public_exercise_1226.css

  1. /*样式初始化*/
  2. @import "../public_reset.css";
  3. /*引入大标题*/
  4. @import "../public_headline/public_headline.css";
  5. /*引入二手交易区*/
  6. @import "../public_second_hand/public_second_hand.css";
  7. /*引入回复评论区*/
  8. @import "../public_comment_reply/public_comment_reply.css";

public_exercise_1226.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="./public_exercise_1226.css">
  6.     <link rel="stylesheet" href="../../static/font/iconfont.css">
  7.     <title>12月26日作业</title>
  8. </head>
  9. <body>
  10. <!--大标题-->
  11. <div class="public_headline">
  12.     <span>二手交易</span>
  13. </div>
  14. <!--二手交易区-->
  15. <div class="public-second-hand">
  16. <!--    标题-->
  17.     <div class="title">
  18.         <a href="">抢好货</a>
  19.         <span>0低价, 便捷,安全,快速</span>
  20.     </div>
  21. <!--标题2-->
  22.     <div class="title2">
  23.         <span>热门分类</span>
  24.         <div>
  25.             <li>美女写真</li>
  26.             <li>日本美女</li>
  27.             <li>美国美女</li>
  28.             <li>国内美女</li>
  29.             <li>AV美女</li>
  30.         </div>
  31.     </div>
  32. <!--    商品展示-->
  33.     <div class="goods">
  34.         <div class="list">
  35.             <div class="detail">
  36.             <a href=""><img src="../../static/images/shop/shop1.jpg" alt=""></a>
  37.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  38.             <div>
  39.                 <span>&yen;333</span>
  40.                 <span>美女</span>
  41.             </div>
  42.         </div>
  43.             <div class="detail">
  44.                 <a href=""><img src="../../static/images/shop/shop2.jpg" alt=""></a>
  45.                 <a href="">美女性感写真海报墙艺术装饰画贴画图2</a>
  46.                 <div>
  47.                     <span>&yen;333</span>
  48.                     <span>美女</span>
  49.                 </div>
  50.             </div>
  51.             <div class="detail">
  52.                 <a href=""><img src="../../static/images/shop/shop3.jpg" alt=""></a>
  53.                 <a href="">美女性感写真海报墙艺术装饰画贴画图3</a>
  54.                 <div>
  55.                     <span>&yen;333</span>
  56.                     <span>美女</span>
  57.                 </div>
  58.             </div>
  59.             <div class="detail">
  60.                 <a href=""><img src="../../static/images/shop/shop4.jpg" alt=""></a>
  61.                 <a href="">美女性感写真海报墙艺术装饰画贴画图4</a>
  62.                 <div>
  63.                     <span>&yen;333</span>
  64.                     <span>美女</span>
  65.                 </div>
  66.             </div>
  67.             <div class="detail">
  68.                 <a href=""><img src="../../static/images/shop/shop5.jpg" alt=""></a>
  69.                 <a href="">美女性感写真海报墙艺术装饰画贴画图5</a>
  70.                 <div>
  71.                     <span>&yen;333</span>
  72.                     <span>美女</span>
  73.                 </div>
  74.             </div>
  75.             <div class="detail">
  76.                 <a href=""><img src="../../static/images/shop/shop6.jpg" alt=""></a>
  77.                 <a href="">美女性感写真海报墙艺术装饰画贴画图6</a>
  78.                 <div>
  79.                     <span>&yen;333</span>
  80.                     <span>美女</span>
  81.                 </div>
  82.             </div>
  83.             <div class="detail">
  84.                 <a href=""><img src="../../static/images/shop/shop7.jpg" alt=""></a>
  85.                 <a href="">美女性感写真海报墙艺术装饰画贴画图7</a>
  86.                 <div>
  87.                     <span>&yen;333</span>
  88.                     <span>美女</span>
  89.                 </div>
  90.             </div>
  91.             <div class="detail">
  92.                 <a href=""><img src="../../static/images/shop/shop8.jpg" alt=""></a>
  93.                 <a href="">美女性感写真海报墙艺术装饰画贴画图8</a>
  94.                 <div>
  95.                     <span>&yen;333</span>
  96.                     <span>美女</span>
  97.                 </div>
  98.             </div>
  101.         </div>
  102.         <div class="quick-entry">
  103.             <a><img src="../../static/images/ad/1.png" alt=""></a>
  104.             <a><img src="../../static/images/ad/2.png" alt=""></a>
  105.             <a><img src="../../static/images/ad/3.png" alt=""></a>
  106.             <a><img src="../../static/images/ad/4.png" alt=""></a>
  107.             <div>
  108.                 <img src="../../static/images/ad/image.png" alt="">
  109.                 <img src="../../static/images/ad/ad2.jpg" alt="">
  110.             </div>
  111.         </div>
  112.     </div>
  113. </div>
  115. <!--回复评论区-->
  116. <div class="public-comment-reply">
  117.     <div class="title">我要评论</div>
  118.     <div class="reply">
  119.         <div>
  120.         <label for="reply"><img src="../../static/images/user.png" alt=""></label>
  121.         <textarea name="" id="reply"></textarea>
  122.         </div>
  123.         <button>发表评论</button>
  124.     </div>
  125.     <div class="comment">
  126.         <div class="title">最新回复</div>
  127.         <div class="comment-list">
  128.             <div class="detail">
  129.                 <img src="../../static/images/user.png" alt="">
  130.                 <div>
  131.                     <span>用户昵称</span>
  132.                     <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  133.                     <div>
  134.                         <span>2019-12-12 15:34:23发表</span>
  135.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  136.                     </div>
  137.                 </div>
  138.             </div>
  139.             <div class="detail">
  140.                 <img src="../../static/images/user.png" alt="">
  141.                 <div>
  142.                     <span>用户昵称</span>
  143.                     <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  144.                     <div>
  145.                         <span>2019-12-12 15:34:23发表</span>
  146.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  147.                     </div>
  148.                 </div>
  149.             </div>
  150.             <div class="detail">
  151.                 <img src="../../static/images/user.png" alt="">
  152.                 <div>
  153.                     <span>用户昵称</span>
  154.                     <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  155.                     <div>
  156.                         <span>2019-12-12 15:34:23发表</span>
  157.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  158.                     </div>
  159.                 </div>
  160.             </div>
  161.             <div class="detail">
  162.                 <img src="../../static/images/user.png" alt="">
  163.                 <div>
  164.                     <span>用户昵称</span>
  165.                     <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  166.                     <div>
  167.                         <span>2019-12-12 15:34:23发表</span>
  168.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  169.                     </div>
  170.                 </div>
  171.             </div>
  172.         </div>
  173.     </div>
  174. </div>
  175. </body>
  176. </html>

public_headline.css

  1. @import "../public_reset.css";
  3. .public_headline{
  4.     width: 1200px;
  5.     margin:auto;
  6.     display: flex;
  7.     justify-content: center;
  8. }
  9. .public_headline > span{
  10.     font-size: 30px;
  11.     font-weight: bold;
  12.     line-height: 50px;
  13.     border-bottom: 3px solid red;
  14. }

public_second_hand.css

  1. @import "../public_reset.css";
  3. .public-second-hand{
  4.     width: 1200px;
  5.     display: flex;
  6.     flex-direction: column;
  7.     background-color: #fff;
  8.     border-radius: 5px;
  9.     box-shadow: 0 0 8px #888888;
  10.     margin:20px auto;
  11.     padding: 20px;
  12.     box-sizing: border-box;
  13. }
  15. .public-second-hand > .title{
  16.     display: flex;
  17.     border-bottom: 1px solid #cccccc;
  18.     padding-bottom: 20px;
  19. }
  21. .public-second-hand > .title > a{
  22.     font-size: 24px;
  23. }
  25. .public-second-hand > .title > a:hover{
  26.     color:red;
  27. }
  29. .public-second-hand >.title>span{
  30.     color:red;
  31.     margin-left:20px;
  32.     align-self: flex-end;
  33. }
  35. .public-second-hand > .title2{
  36.     display: flex;
  37.     padding-top: 10px;
  38.     margin-bottom: 20px;
  39. }
  41. .public-second-hand > .title2 > span{
  42.     font-size: 24px;
  43.     color:red;
  44. }
  46. .public-second-hand > .title2 > div{
  47.     display: flex;
  48.     align-self: flex-end;
  49. }
  51. .public-second-hand > .title2 > div > li{
  52.     margin:0 10px;
  53.     font-size: 16px;
  54. }
  56. .public-second-hand > .goods{
  57.     display: flex;
  58.     flex-direction:row;
  59.     height: 440px;
  60. }
  62. .public-second-hand > .goods > .list{
  63.     flex-basis: 800px;
  64.     display: flex;
  65.     flex-flow: row wrap;
  66.     justify-content: space-between;
  67.     padding-right: 5px;
  68.     align-content: space-between;
  69. }
  71. .public-second-hand > .goods > .list > .detail{
  72.     flex-basis: 178px;
  73.     display: flex;
  74.     flex-direction: column;
  75.     align-items: center;
  76.     justify-content: space-between;
  77.     height: 200px;
  78. }
  80. .public-second-hand > .goods > .list > .detail img{
  81.     width: 176px;
  82.     height: 120px;
  83.     border-radius: 5px;
  84. }
  86. .public-second-hand > .goods > .list > .detail > div{
  87.     display: flex;
  88.     justify-content: space-between;
  89.     width: 100%;
  90. }
  92. .public-second-hand > .goods > .list > .detail > div > :first-child{
  93.     color:red;
  94. }
  96. .public-second-hand > .goods > .list > .detail > div > :last-child{
  97.     background-color: #55ce9f;
  98.     padding:0 3px;
  99.     border-radius: 2px;
  100.     color:white;
  101. }
  103. .public-second-hand > .goods > .quick-entry{
  104.     display: flex;
  105.     flex-basis: 400px;
  106.     padding-left: 5px;
  107.     flex-flow: row wrap;
  108.     justify-content: space-between;
  109. }
  111. .public-second-hand > .goods > .quick-entry > a >img{
  112.     width: 190px;
  113.     height: 130px;
  114. }
  116. .public-second-hand > .goods > .quick-entry > div{
  117.     display: flex;
  118.     flex-direction: column;
  119.     justify-content: space-between;
  120. }
  122. .public-second-hand > .goods > .quick-entry > div > img{
  123.     width: 393px;
  124.     height: 60px;
  125.     border-radius: 5px;
  126. }

public_reset.css

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. /*参考线    */
  5. /*    outline: 1px dashed red;*/
  6. }
  8. body {
  9.     font-size: 13px;
  10.     color: #555555;
  11.     background-color: #efefef;
  12. }
  14. a {
  15.     color: #404040;
  17.     text-decoration: none;
  18.     font-size: 13px;
  19. }
  21. li {
  22.     list-style: none;
  23. }

总结

  1. 尺寸参考老师的尺寸，大部分布局也参考了老师的布局，只有评论列表区考虑到内容多少不固定、条数也不一定是固定的，所以直接采用了原始的布局方式，直接排下来了
  2. 因为要上班（平时使用tp做后端开发，刚从tp3转到tp6，还在连学习边开发中），所以空余时间比较少，所以很多细节没有仔细琢磨，并没有对老师不尊重，希望老师不要见怪
  3. 最后说一句：flex确实挺好用

效果图

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：完成的不错, 下次注意二点: 1. 作业标题要体现内容 2. 代码要有注释
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！