Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex实战2（12.26作业）+ PHP培训十期线上班
Blogger Information
Blog 9
fans 0
comment 0
visits 6197
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
flex实战2（12.26作业）+ PHP培训十期线上班
弃
Original
741 people have browsed it

商品列表展示

html代码展示

  1. <!--
  2.  * @Descripttion: 
  3.  * @version: 
  4.  * @Author: pengpeng
  5.  * @Date: 2019-12-27 13:31:35
  6.  * @LastEditors  : pengpeng
  7.  * @LastEditTime : 2019-12-27 17:59:29
  8.  -->
  9. <!DOCTYPE html>
  10. <html lang="en">
  11. <head>
  12.     <meta charset="UTF-8">
  13.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  15.     <link rel="stylesheet" href="./demo.css">
  16.     <title>二手交易</title>
  17. </head>
  18. <body>
  20.     <div class="public-shop">
  21.         <div class="public-shop-title1">
  22.             <a href="javascript:;">抢好货</a>
  23.             <span>0低价、便捷安全、快速</span>
  24.         </div>
  26.         <div class="public-shop-title2">
  27.             <span>热门分类</span>
  28.             <a href="javascript:;">美女写真</a>
  29.             <a href="javascript:;">美女写真</a>
  30.             <a href="javascript:;">美女写真</a>
  31.             <a href="javascript:;">美女写真</a>
  32.             <a href="javascript:;">美女写真</a>
  33.         </div>
  34.         <div class="public-shop-list">
  35.             <div class="public-shop-list-show">
  36.                 <div class="shop-img">
  37.                     <a href=""><img src="/public/static/images/img7.jpg" alt=""></a>
  38.                     <a>美女性感写真海报艺术装饰滴滴滴滴滴滴滴....</a>
  39.                     <div>
  40.                         <span>&yen;</span>
  41.                         <span>美女</span>
  42.                     </div>
  43.                 </div>
  44.                 <div class="shop-img">
  45.                     <a href=""><img src="/public/static/images/img7.jpg" alt=""></a>
  46.                     <a>美女性感写真海报艺术装饰滴滴滴滴滴滴滴....</a>
  47.                     <div>
  48.                         <span>&yen;</span>
  49.                         <span>美女</span>
  50.                     </div>
  51.                 </div>
  52.                 <div class="shop-img">
  53.                     <a href=""><img src="/public/static/images/img7.jpg" alt=""></a>
  54.                     <a>美女性感写真海报艺术装饰滴滴滴滴滴滴滴....</a>
  55.                     <div>
  56.                         <span>&yen;</span>
  57.                         <span>美女</span>
  58.                     </div>
  59.                 </div>
  60.                 <div class="shop-img">
  61.                     <a href=""><img src="/public/static/images/img7.jpg" alt=""></a>
  62.                     <a>美女性感写真海报艺术装饰滴滴滴滴滴滴滴....</a>
  63.                     <div>
  64.                         <span>&yen;</span>
  65.                         <span>美女</span>
  66.                     </div>
  67.                 </div>
  68.                 <div class="shop-img">
  69.                     <a href=""><img src="/public/static/images/img7.jpg" alt=""></a>
  70.                     <a>美女性感写真海报艺术装饰滴滴滴滴滴滴滴....</a>
  71.                     <div>
  72.                         <span>&yen;</span>
  73.                         <span>美女</span>
  74.                     </div>
  75.                 </div>
  76.                 <div class="shop-img">
  77.                     <a href=""><img src="/public/static/images/img7.jpg" alt=""></a>
  78.                     <a>美女性感写真海报艺术装饰滴滴滴滴滴滴滴....</a>
  79.                     <div>
  80.                         <span>&yen;</span>
  81.                         <span>美女</span>
  82.                     </div>
  83.                 </div>
  84.                 <div class="shop-img">
  85.                     <a href=""><img src="/public/static/images/img7.jpg" alt=""></a>
  86.                     <a>美女性感写真海报艺术装饰滴滴滴滴滴滴滴....</a>
  87.                     <div>
  88.                         <span>&yen;</span>
  89.                         <span>美女</span>
  90.                     </div>
  91.                 </div>
  92.                 <div class="shop-img">
  93.                     <a href=""><img src="/public/static/images/img7.jpg" alt=""></a>
  94.                     <a>美女性感写真海报艺术装饰滴滴滴滴滴滴滴....</a>
  95.                     <div>
  96.                         <span>&yen;</span>
  97.                         <span>美女</span>
  98.                     </div>
  99.                 </div>
  101.             </div>
  102.             <div class="shop-list-money">
  103.                 <div>
  104.                     <a href=""><img src="/public/static/images/ad/1.png" alt=""></a>
  105.                     <a href=""><img src="/public/static/images/ad/1.png" alt=""></a>
  106.                     <a href=""><img src="/public/static/images/ad/1.png" alt=""></a>
  107.                     <a href=""><img src="/public/static/images/ad/1.png" alt=""></a>
  108.                 </div>
  109.                 <a href=""><img src="/public/static/images/ad/image.png" alt=""></a>
  110.                 <a href=""><img src="/public/static/images/ad/ad2.jpg" alt=""></a>
  112.             </div>
  113.         </div>
  114.     </div>
  115. </body>
  116. </html>

css代码展示

  1. /* 初始化 */
  2. @import url(../public/_public.css);
  4. .public-shop{
  5.     width: 1200px;
  6.     border: 1px solid #978b8b;
  7.     box-sizing: border-box;
  8.     border-radius: 5px;
  9.     margin: auto;
  10.     background-color: #fff;
  11.     padding: 10px;
  12. }
  13. .public-shop:hover{
  15.     box-shadow: 0 0 8px #888;
  16. }
  18. .public-shop > .public-shop-title1{
  19.     height: 50px;
  20.     border-bottom: 1px solid #cccccc;
  21. }
  23. .public-shop > .public-shop-title1 > a{
  24.     font-size: 23px;
  25.     font-weight: bolder;
  26.     margin-right: 20px;
  27. }
  29. .public-shop > .public-shop-title1 > span{
  30.     color: red;
  31. }
  33. .public-shop > .public-shop-title2{
  34.     height: 55px;
  35. }
  36. .public-shop > .public-shop-title2 > span{
  37.     color: red;
  38.     font-size: 25px;
  39. }
  41. .public-shop > .public-shop-title2 > span ~ a{
  42.     padding-left: 10px;
  43. }
  45. .public-shop > .public-shop-title2 > span ~ a:hover{
  46.     color: chocolate;
  47. }
  49. .public-shop > .public-shop-list{
  50.     height: 440px;
  51.     display: flex;
  52.     flex-flow: row nowrap;
  53. }
  55. .public-shop > .public-shop-list > .public-shop-list-show{
  56.     flex-basis: 800px;
  57.     padding: 10px;
  58.     flex-flow: row wrap;
  59.     display: flex;
  60.     justify-content: space-between;
  61. }
  63. .public-shop > .public-shop-list > .public-shop-list-show > .shop-img{
  64.     width: 178px;
  65.     height: 200px;
  66.     flex-flow: column nowrap;
  67.     display: flex;
  68.     justify-content: space-between;
  71. }
  72. .public-shop > .public-shop-list > .public-shop-list-show > .shop-img img{
  73.     width: 176px;
  74.     height: 120px;
  75.     border-radius: 5px;
  76. }
  78. .public-shop > .public-shop-list > .public-shop-list-show > .shop-img div{
  79.     display:flex;
  80. }
  82. .public-shop > .public-shop-list > .public-shop-list-show > .shop-img div > span:first-of-type{
  83.     color:red;
  84. }
  86. .public-shop > .public-shop-list > .public-shop-list-show > .shop-img div > span:last-of-type{
  87.     background-color: cyan;
  88.     color: white;
  89.     margin-left: auto;
  90.     padding: 0 5px;
  91. }
  93. .public-shop > .public-shop-list > .shop-list-money{
  94.     flex-basis: 400px;
  95.     padding: 10px ;
  96.     /* box-sizing: border-box; */
  97.     display: flex;
  98.     flex-flow: row wrap;
  99.     justify-content: space-between;
  100. }
  102. .public-shop > .public-shop-list > .shop-list-money > div img{
  103.     width: 190px;
  104.     height: 130px;
  105. }
  107. .public-shop > .public-shop-list > .shop-list-money > div{
  108.     display:flex;
  109.     flex-flow: row wrap;
  110.     justify-content: space-around;
  111. }
  113. .public-shop > .public-shop-list > .shop-list-money > a > img{
  114.     width: 393px;
  115.     height: 60px;
  116. }

评论与回复

html代码展示

  1. <!--
  2.  * @Descripttion: 
  3.  * @version: 
  4.  * @Author: pengpeng
  5.  * @Date: 2019-12-27 23:59:20
  6.  * @LastEditors  : pengpeng
  7.  * @LastEditTime : 2019-12-28 00:58:09
  8.  -->
  9. <!DOCTYPE html>
  10. <html lang="en">
  11. <head>
  12.     <meta charset="UTF-8">
  13.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  15.     <link rel="stylesheet" href="./demo1.css">
  16.     <link rel="stylesheet" href="/public/static/font/iconfont.css">
  17.     <title>Document</title>
  18. </head>
  19. <body>
  20.     <div class="public-comment">
  22.         <div class="public-comment-write">
  23.             <span>我要评论</span>
  24.             <div>
  25.                 <label for="write"><img src="/public/static/images/user.png" alt=""></label>
  26.                 <textarea name="" id="write" cols="30" rows="10"></textarea>
  27.             </div>
  28.             <button>发表评论</button>
  29.         </div>
  31.         <div class="public-comment-read">
  32.             <span>最新回复</span>
  33.             <div>
  34.                 <img src="/public/static/images/user.png" alt="">
  35.                 <div class="read-comment">
  36.                     <span>用户昵称</span>
  37.                     <span>好多酱油好多好多酱油好多酱油</span>
  38.                     <div>
  39.                         <span>xxxx-xx-xx xx:xx:xx发表</span>
  40.                         <span><em class="iconfont icon-dianzan"></em>回复</span>
  41.                     </div>
  42.                 </div>
  43.             </div>
  44.             <div>
  45.                 <img src="/public/static/images/user.png" alt="">
  46.                 <div class="read-comment">
  47.                     <span>用户昵称</span>
  48.                     <span>好多酱油好多好多酱油好多酱油</span>
  49.                     <div>
  50.                         <span>xxxx-xx-xx xx:xx:xx发表</span>
  51.                         <span><em class="iconfont icon-dianzan"></em>回复</span>
  52.                     </div>
  53.                 </div>
  54.             </div>
  55.             <div>
  56.                 <img src="/public/static/images/user.png" alt="">
  57.                 <div class="read-comment">
  58.                     <span>用户昵称</span>
  59.                     <span>好多酱油好多好多酱油好多酱油</span>
  60.                     <div>
  61.                         <span>xxxx-xx-xx xx:xx:xx发表</span>
  62.                         <span><em class="iconfont icon-dianzan"></em>回复</span>
  63.                     </div>
  64.                 </div>
  65.             </div>
  66.             <div>
  67.                 <img src="/public/static/images/user.png" alt="">
  68.                 <div class="read-comment">
  69.                     <span>用户昵称</span>
  70.                     <span>好多酱油好多好多酱油好多酱油</span>
  71.                     <div>
  72.                         <span>xxxx-xx-xx xx:xx:xx发表</span>
  73.                         <span><em class="iconfont icon-dianzan"></em>回复</span>
  74.                     </div>
  75.                 </div>
  76.             </div>
  77.             <div>
  78.                 <img src="/public/static/images/user.png" alt="">
  79.                 <div class="read-comment">
  80.                     <span>用户昵称</span>
  81.                     <span>好多酱油好多好多酱油好多酱油</span>
  82.                     <div>
  83.                         <span>xxxx-xx-xx xx:xx:xx发表</span>
  84.                         <span><em class="iconfont icon-dianzan"></em>回复</span>
  85.                     </div>
  86.                 </div>
  87.             </div>
  88.             <div>
  89.                 <img src="/public/static/images/user.png" alt="">
  90.                 <div class="read-comment">
  91.                     <span>用户昵称</span>
  92.                     <span>好多酱油好多好多酱油好多酱油</span>
  93.                     <div>
  94.                         <span>xxxx-xx-xx xx:xx:xx发表</span>
  95.                         <span><em class="iconfont icon-dianzan"></em>回复</span>
  96.                     </div>
  97.                 </div>
  98.             </div>
  99.             <div>
  100.                 <img src="/public/static/images/user.png" alt="">
  101.                 <div class="read-comment">
  102.                     <span>用户昵称</span>
  103.                     <span>好多酱油好多好多酱油好多酱油</span>
  104.                     <div>
  105.                         <span>xxxx-xx-xx xx:xx:xx发表</span>
  106.                         <span><em class="iconfont icon-dianzan"></em>回复</span>
  107.                     </div>
  108.                 </div>
  109.             </div>
  111.         </div>
  112.     </div>
  113. </body>
  114. </html>

css代码展示

  1. /* 初始化 */
  2. @import url(../public/_public.css);
  4. .public-comment{
  5.     margin: 20px;
  6.     border-top: 1px solid #cccccc;
  7. }
  9. .public-comment > .public-comment-write{
  10.     padding: 10px;
  11.     box-sizing: border-box;
  12.     display:flex;
  13.     flex-flow: column nowrap;
  14. }
  16. .public-comment > .public-comment-write > span{
  17.     font-size: 20px;
  18.     font-weight: bolder;
  19.     padding: 5px 0;
  20. }
  22. .public-comment > .public-comment-write > div{
  23.     margin-top: 20px;
  24.     display: flex;
  25. }
  26. .public-comment > .public-comment-write > div > label{
  27.     padding-left: 20px;
  28. }
  30. .public-comment > .public-comment-write > div img{
  31.     width: 70px;
  32. }
  34. .public-comment > .public-comment-write > div textarea{
  35.     height: 200px;
  36.     padding: 10px;
  37.     box-sizing: border-box;
  38.     font-size: 20px;
  39.     color: saddlebrown;
  40.     margin-left: 20px;
  41.     border: none;
  42.     border-radius: 10px;
  43.     resize: none;
  44.     flex: 1;
  45. }
  47. .public-comment > .public-comment-write > div textarea:hover{
  48.     box-shadow: 0 0 8px lightpink;
  49. }
  50. .public-comment > .public-comment-write > button{
  51.     border: none;
  52.     width: 100px;
  53.     height: 50px;
  54.     font-size: 17px;
  55.     border-radius: 10px;
  56.     align-self: flex-end;
  57.     background-color: yellow;
  58.     margin-top: 10px;
  59. }
  60. .public-comment > .public-comment-write > button:hover{
  62.     background-color: red;
  63. }
  65. .public-comment > .public-comment-read{
  66.     margin-top: 20px;
  67.     display: flex;
  68.     flex-flow: column;
  69. }
  71. .public-comment > .public-comment-read > span{
  72.     font-size: 20px;
  73.     font-weight: bolder;
  74.     padding: 10px;
  75. }
  76. .public-comment > .public-comment-read > div{
  77.     display: flex;
  78.     margin: 10px 0;
  80. }
  81. .public-comment > .public-comment-read > div > img{
  82.     width: 60px;
  83.     padding: 20px 10px;
  85. }
  86. .public-comment > .public-comment-read > div > div{
  87.     flex: 1;
  88.     display: flex;
  89.     flex-flow: column nowrap;
  90.     justify-content: space-between;
  91.     padding: 5px;
  92. }
  93. .public-comment > .public-comment-read > div > div > div{
  94.     display: flex;
  95.     justify-content: space-between;
  96. }
  97. .public-comment > .public-comment-read > div > div > div:last-of-type em{
  98.     color: red;
  99.     margin-right: 5px;
  100. }

思路总结

  1. 首先先看一遍视频，知道页面的大致逻辑
  2. 把整个页面划分成小块，规划哪些地方能用到flex
  3. 将小块结合成大块，就形成页面

布局中遇到的问题

  1. 不知道页面元素的大小，每次都要翻视频去看
  2. 虽然页面看上去是差不多了，但是相比对与老师的代码，有些地方就是不同，反正就是看上去怪怪的。
  3. 没有写注释，请老师指点一下。
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