Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex组件实战--PHP培训第十期
Blogger Information
Blog 4
fans 0
comment 1
visits 2697
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组件实战--PHP培训第十期
孔小帅
Original
620 people have browsed it

组件实战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、在模仿的过程中找到思路，同时也加强了各个元素控件的认识和应用。

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