search

博客列表 >flex组件实战--PHP培训第十期

flex组件实战--PHP培训第十期

孔小帅
孔小帅原创
2019年12月26日 23:56:18619浏览

组件实战1—二手交易组件

代码如下：

  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. <!--引入大标题组件-->
  10. <div class="public-headline">
  11.     <span>二手交易</span>
  12. </div>
  13. <!--二手交易专区-->
  14. <div class="public_second_hand">
  15.     <!--标题1-->
  16.     <div class="title1">
  17.         <a href="">抢好货</a>
  18.         <span> 0低价, 便捷,安全,快速</span>
  19.     </div>
  20.     <!--标题2-->
  21. <div class="title2">
  22.     <span>热门分类</span>
  23.     <a href="">美女写真</a>
  24.     <a href="">日本美女</a>
  25.     <a href="">国内美女</a>
  26.     <a href="">美国美女</a>
  27.     <a href="">AV美女</a>
  28. </div>
  29.     <!--商品展示区-->
  30.     <div class="goods">
  31.         <!--left-商品列表-->
  32.         <div class="left-goods-list">
  33.             <!--商品介绍-->
  34.             <div class="intro">
  35.                 <a href=""><img src="../../../static/images/shop/shop1.jpg" alt="" ></a>
  36.                 <a href=""> 美女性感写真海报墙艺术装饰画贴画图1</a>
  37.                 <div>
  38.                     <span>&yen;333</span>
  39.                     <span>美女</span>
  40.                 </div>
  41.             </div>
  42.             <div class="intro">
  43.                 <a href=""><img src="../../../static/images/shop/shop1.jpg" alt=""></a>
  44.                 <a href=""> 美女性感写真海报墙艺术装饰画贴画图1</a>
  45.                 <div>
  46.                     <span>&yen;333</span>
  47.                     <span>美女</span>
  48.                 </div>
  49.             </div>
  50.             <div class="intro">
  51.                 <a href=""><img src="../../../static/images/shop/shop1.jpg" alt=""></a>
  52.                 <a href=""> 美女性感写真海报墙艺术装饰画贴画图1</a>
  53.                 <div>
  54.                     <span>&yen;333</span>
  55.                     <span>美女</span>
  56.                 </div>
  57.             </div>
  58.             <div class="intro">
  59.                 <a href=""><img src="../../../static/images/shop/shop1.jpg" alt=""></a>
  60.                 <a href=""> 美女性感写真海报墙艺术装饰画贴画图1</a>
  61.                 <div>
  62.                     <span>&yen;333</span>
  63.                     <span>美女</span>
  64.                 </div>
  65.             </div>
  66.             <div class="intro">
  67.                 <a href=""><img src="../../../static/images/shop/shop1.jpg" alt=""></a>
  68.                 <a href=""> 美女性感写真海报墙艺术装饰画贴画图1</a>
  69.                 <div>
  70.                     <span>&yen;333</span>
  71.                     <span>美女</span>
  72.                 </div>
  73.             </div>
  74.             <div class="intro">
  75.                 <a href=""><img src="../../../static/images/shop/shop1.jpg" alt=""></a>
  76.                 <a href=""> 美女性感写真海报墙艺术装饰画贴画图1</a>
  77.                 <div>
  78.                     <span>&yen;333</span>
  79.                     <span>美女</span>
  80.                 </div>
  81.             </div>
  82.             <div class="intro">
  83.                 <a href=""><img src="../../../static/images/shop/shop1.jpg" alt=""></a>
  84.                 <a href=""> 美女性感写真海报墙艺术装饰画贴画图1</a>
  85.                 <div>
  86.                     <span>&yen;333</span>
  87.                     <span>美女</span>
  88.                 </div>
  89.             </div>
  90.             <div class="intro">
  91.                 <a href=""><img src="../../../static/images/shop/shop1.jpg" alt=""></a>
  92.                 <a href=""> 美女性感写真海报墙艺术装饰画贴画图1</a>
  93.                 <div>
  94.                     <span>&yen;333</span>
  95.                     <span>美女</span>
  96.                 </div>
  97.             </div>
  98.         </div>
  99. <!--right-快速功能入口-->
  101.         <div class="right-quick-entry">
  102.             <a href=""><img src="../../../static/images/ad/1.png" alt="">1</a>
  103.             <a href=""><img src="../../../static/images/ad/2.png" alt="">2</a>
  104.             <a href=""><img src="../../../static/images/ad/3.png"alt="">3</a>
  105.             <a href=""><img src="../../../static/images/ad/4.png" alt="">4</a>
  106.             <div>
  107.                 <a href=""><img src="../../../static/images/ad/image.png" alt=""></a>
  108.                 <a href=""><img src="../../../static/images/ad/ad2.jpg" alt=""></a>
  109.             </div>
  110.         </div>
  111.     </div>
  112. </div>
  113. </body>
  114. </html>

样式代码如下：

  1. /*引入公共样式库*/
  2. @import "../../public_reset.css";
  3. @import url("../public_headline/public_headline.css");
  4. .public_second_hand{
  5.     width: 1200px;
  6.     padding: 10px;
  7.     box-sizing:border-box;
  8.     margin:auto;
  9.     border-radius:15px;
  10.     background-color: #fff;
  11. }
  12. .public_second_hand:hover{
  13.     box-shadow:0 0 8px #333333;
  14. }
  15. /*title1*/
  16. .public_second_hand>.title1{
  17.     height: 50px;
  18.     border-bottom:2px solid #cccccc;
  20. }
  21. .public_second_hand>.title1>a{
  22.     font-size:23px;
  23.     /*color: red;*/
  24. }
  25. .public_second_hand>.title1>span{
  26.     color: red;
  27.     margin-left: 6px;
  28. }
  29. .public_second_hand>.title2{
  30.     height: 50px;
  31. }
  32. .public_second_hand>.title2>span{
  33.     font-size:23px;
  34.     color: red;
  35. }
  36. .public_second_hand>.title2>a{
  37.     padding:20px;
  38. }
  39. .public_second_hand>.title2>a:hover{
  40.     color: #DD4A68;
  41.     cursor: pointer;
  42. }
  43. .public_second_hand>.goods{
  44.     height: 440px;
  45.     display:flex;
  46. }
  47. /*.public_second_hand>.goods>.left-goods-list{*/
  48.     /*padding: 10px;*/
  49.     /*flex-basis: 800px;*/
  50.     /*display: flex;*/
  51.     /*flex-flow: row nowrap;*/
  52.     /*justify-content: space-between;*/
  53. /*}*/
  54. /*.public_second_hand>.goods>.left-goods-list>.intro>a>img{*/
  55.     /*width: 176px;*/
  56.     /*height: 120px;*/
  57. /*}*/
  58. .public_second_hand>.goods>.left-goods-list>.intro img{
  59.     width: 176px;
  60.     height: 120px;
  61.     border: 1px solid #cccccc;
  62.     border-radius:5px;
  63. }
  64. .public_second_hand>.goods>.left-goods-list{
  65.     /*width: 800px;*/
  66.     padding:10px;
  67.     flex-basis: 800px;
  68.     display: flex;
  69.     /*flex布局，水平方向，wrap换行，nowrap不换行*/
  70.     flex-flow: row wrap;
  71.     justify-content: space-between;
  72. }
  73. .public_second_hand>.goods>.left-goods-list>.intro{
  74.     width: 178px;
  75.     height: 200px;
  76.     display: flex;
  77.     flex-flow: column nowrap;
  78.     justify-content: space-between;
  80. }
  81. .public_second_hand>.goods>.left-goods-list>.intro span:first-of-type{
  82.     color:red;
  83. }
  84. .public_second_hand>.goods>.left-goods-list>.intro>div{
  85.     display: flex;
  86. }
  87. .public_second_hand>.goods>.left-goods-list>.intro span:last-of-type{
  88.     margin-left: auto;
  89.     background-color: #669900;
  90.     color: white;
  91. }
  92. .public_second_hand>.goods>.right-quick-entry{
  93.     flex-basis: 400px;
  94.     display: flex;
  95.     flex-flow: row wrap;
  96.     justify-content: space-between;
  97. }
  98. .public_second_hand>.goods>.right-quick-entry div{
  99.     /*width: 300px;*/
  100.     display: flex;
  101.     flex-flow: column;
  102.     justify-content: space-between;
  103. }
  104. /*.public_second_hand>.goods>.right-quick-entry img{*/
  105.     /*width: 160px;*/
  106.     /*height: 130px;*/
  107. /*}*/

运行结果

二手交易组件

思路及实现过程

1、关于css的应用还是有些薄弱，看老师进行演示的时候还能弄明白，自己实际操作的时候就不知道怎么进行分析了，只能参考老师的代码一步一步分析，回想当时怎么分析的，为什么要使用这样设置；
2、在模仿的过程中找到思路，同时也加强了各个元素控件的认识和应用。

上一条：1225作业下一条：第十期FLEX项目六大属性+组件开发思路分析总结（2019-12-25）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多