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

博客列表 >flex实战2（12.26作业）+ PHP培训十期线上班

flex实战2（12.26作业）+ PHP培训十期线上班

弃
弃原创
2019年12月28日 01:19:40736浏览

商品列表展示

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. 没有写注释，请老师指点一下。
上一条：利用Flex弹性盒子仿 m.php.cn首页模板下一条：tp 框架如何自定义公共方法，如何在模板中使用函数
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多