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

博客列表 >1226作业

1226作业

建国
建国原创
2019年12月27日 15:07:05628浏览

培训内容

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确实挺好用

效果图

上一条：总结PHP中那些易混淆的函数用法下一条：flex容器的6个属性练习总结
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多