简体中文（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实战-Php第十期线上班

flex实战-Php第十期线上班

迫
迫原创
2020年01月02日 16:35:27432浏览

2019.12.26作业

先分析网页有哪些元素，创建html文档写出dom结构，再在css文档中写出dom结构的样式，这样就完成一个完整的组件。

二手交易页面


这个页面分为上下两部分，上面是页面标题，已在2019.12.25课堂上完成，现将在下面商品展示部分完成。
商品展示分为上面的广告标题，中间的分类依据下面的图片展示，其中图片展示又分为左右两个部分。
这里面需要运用到flex容器中再添加flex容器完成下面图片部分的布局。

代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public_second_hand.css">
  6. <!--    <link rel="stylesheet" href="../public_headline/public_headline.css">-->
  7.     <title>public_second_hand</title>
  8. </head>
  9. <body>
  10. <!--    大标题-->
  11.     <div class="public_headline">
  12.         <span>二手交易</span>
  13.     </div>
  15. <!--二手交易区-->
  16.     <div class="public_second_hand">
  17. <!--        标题1-->
  18.         <div class="title1">
  19.             <a href="">抢好货</a>
  20.             <span>0低价,便捷,安全,快速</span>
  21.         </div>
  22. <!--        标题2-->
  23.         <div class="title2">
  24.             <span>热门分类</span>
  25.             <a href="">写真</a>
  26.             <a href="">America</a>
  27.             <a href="">Japan</a>
  28.             <a href="">China</a>
  29.             <a href="">Video</a>
  30.         </div>
  31. <!--        商品展示区-->
  32.         <div class="goods">
  33. <!--            1.左侧商品列表-->
  35.             <div class="goods_list">
  36. <!--                商品简介-->
  37.                 <div class="intro">
  38.                     <a href=""><img src="../../../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  39.                     <a href="">写真</a>
  40.                     <div class="price">
  41.                         <span>&yen; 333</span>
  42.                         <span>beauty</span>
  43.                     </div>
  45.                 </div>
  46.                 <div class="intro">
  47.                     <a href=""><img src="../../../../static/images/shop/shop2.jpg" alt="" width="176" height="120"></a>
  48.                     <a href="">写真1</a>
  49.                     <div class="price">
  50.                         <span>&yen; 333</span>
  51.                         <span>beauty</span>
  52.                     </div>
  54.                 </div>
  55.                 <div class="intro">
  56.                     <a href=""><img src="../../../../static/images/shop/shop3.jpg" alt="" width="176" height="120"></a>
  57.                     <a href="">写真1</a>
  58.                     <div class="price">
  59.                         <span>&yen; 333</span>
  60.                         <span>beauty</span>
  61.                     </div>
  63.                 </div>
  64.                 <div class="intro">
  65.                     <a href=""><img src="../../../../static/images/shop/shop4.jpg" alt="" width="176" height="120"></a>
  66.                     <a href="">写真1</a>
  67.                     <div class="price">
  68.                         <span>&yen; 333</span>
  69.                         <span>beauty</span>
  70.                     </div>
  72.                 </div>
  73.                 <div class="intro">
  74.                     <a href=""><img src="../../../../static/images/shop/shop5.jpg" alt="" width="176" height="120"></a>
  75.                     <a href="">写真1</a>
  76.                     <div class="price">
  77.                         <span>&yen; 333</span>
  78.                         <span>beauty</span>
  79.                     </div>
  81.                 </div>
  82.                 <div class="intro">
  83.                     <a href=""><img src="../../../../static/images/shop/shop6.jpg" alt="" width="176" height="120"></a>
  84.                     <a href="">写真1</a>
  85.                     <div class="price">
  86.                         <span>&yen; 333</span>
  87.                         <span>beauty</span>
  88.                     </div>
  90.                 </div>
  91.                 <div class="intro">
  92.                     <a href=""><img src="../../../../static/images/shop/shop7.jpg" alt="" width="176" height="120"></a>
  93.                     <a href="">写真1</a>
  94.                     <div class="price">
  95.                         <span>&yen; 333</span>
  96.                         <span>beauty</span>
  97.                     </div>
  99.                 </div>
  100.                 <div class="intro">
  101.                     <a href=""><img src="../../../../static/images/shop/shop8.jpg" alt="" width="176" height="120"></a>
  102.                     <a href="">写真1</a>
  103.                     <div class="price">
  104.                         <span>&yen; 333</span>
  105.                         <span>beauty</span>
  106.                     </div>
  108.                 </div>
  109.             </div>
  110. <!--            2.右侧功能快速入口-->
  111.             <div class="quick_entry">
  112.                 <a href=""><img src="../../../../static/images/ad/1.png" alt=""></a>
  113.                 <a href=""><img src="../../../../static/images/ad/2.png" alt=""></a>
  114.                 <a href=""><img src="../../../../static/images/ad/3.png" alt=""></a>
  115.                 <a href=""><img src="../../../../static/images/ad/4.png" alt=""></a>
  116.                 <div>
  117.                     <a href=""><img src="../../../../static/images/ad/image.png" alt=""></a>
  118.                     <a href=""><img src="../../../../static/images/ad/ad2.jpg" alt=""></a>
  119.                 </div>
  120.             </div>
  122.         </div>
  126.     </div>
  127. </body>
  128. </html>
  1. @import "../pubilc_reset.css";
  2. @import "../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: 5px;
  10.     background-color: #fff;
  11. }
  13. .public_second_hand:hover{
  14.         box-shadow: 0 0 8px #888;
  15. }
  17. /*标题1*/
  18. .public_second_hand > .title1{
  19.     height: 40px;
  20.     border-bottom: 1px solid #cccccc;
  21.     box-sizing: border-box;
  22. }
  23. .public_second_hand > .title1 >a{
  24.     font-size: 25px;
  25.     margin-right: 20px;
  26. }
  27. .public_second_hand > .title1 >span{
  28.     color: red;
  29. }
  31. /*标题2*/
  32. .public_second_hand > .title2 {
  33.     margin-top: 20px;
  34.     height: 30px;
  35. }
  36. .public_second_hand >.title2 >span{
  37.     color: red;
  38.     font-size: 23px;
  39. }
  40. .public_second_hand >.title2 >span ~ a{
  41.     padding-left: 20px;
  42.     font-size: 15px;
  43. }
  44. .public_second_hand >.title2 >span~a:hover{
  45.     color: lightcoral;
  46. }
  48. /*商品展示区*/
  49. .public_second_hand >.goods{
  50.     display: flex;
  51.     height: 440px;
  52.     /*flex-flow: row nowrap;*/
  53. }
  54. .public_second_hand >.goods>.goods_list{
  55.     padding: 10px;
  56.     flex-basis: 800px;
  57.     display: flex;
  58.     flex-flow: row wrap;
  59.     justify-content: space-between;
  60. }
  61. .public_second_hand >.goods>.goods_list>.intro{
  62.     width: 178px;
  63.     height: 200px;
  64.     display: flex;
  65.     flex-flow: column nowrap;
  66.     justify-content: space-between;
  67. }
  68. .public_second_hand >.goods>.goods_list>.intro img{
  69.     border-bottom: 1px solid #cccccc;
  70.     padding-top: 10px;
  71.     border-radius:5px
  72. }
  73. .public_second_hand >.goods>.goods_list>.intro>a{
  74.     font-size: 15px;
  75.     font-family: "Microsoft YaHei UI";
  76. }
  77. .public_second_hand >.goods>.goods_list>.intro span:first-of-type{
  78.     color: red;
  79. }
  80. .public_second_hand >.goods>.goods_list>.intro >div{
  81.     display: flex;
  82.     padding-top: 10px;
  83. }
  84. .public_second_hand >.goods>.goods_list>.intro span:last-of-type{
  85.     color: red;
  86.     background-color: #55ce9f;
  87.     padding: 0 2px;
  88.     margin-left: auto;
  89. }
  90. /* 功能快速入口区*/
  91. .public_second_hand >.goods>.quick_entry{
  92.     flex-basis: 400px;
  93.     padding: 10px;
  94.     display: flex;
  95.     flex-flow: row wrap;
  96.     justify-content: space-between;
  97. }
  98. .public_second_hand >.goods>.quick_entry >a img{
  99.     width: 190px;
  100.     height: 130px;
  101. }
  102. .public_second_hand >.goods>.quick_entry>div{
  103.     width: 400px;
  104.     display: flex;
  105.     flex-direction: column;
  106. }
  107. .public_second_hand >.goods>.quick_entry>div img{
  108.     width: 393px;
  109.     height: 60px;
  110. }

二手交易页面


二手交易页面主要分为上面的评论输入区域和下面的已评论区域两部分，大致需要运用到的技术和二手商品页面差不多，首先先写好dom结构，再写css样式文档

代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public_comment_reply.css">
  6.     <link rel="stylesheet" href="../../../../static/font/iconfont.css">
  7.     <title>public_comment_reply</title>
  8. </head>
  9. <body>
  10.     <div class="public_comment_reply">
  11. <!--        评论-->
  12.         <div class="comment">
  13.             <h3>我要评论</h3>
  14.             <div>
  15.                 <label for="comment">
  16.                     <img src="../../../../static/images/user.png" alt="">
  17.                 </label>
  18.                 <textarea name="" id="comment"></textarea>
  19.             </div>
  20.             <button>发表评论</button>
  21.         </div>
  22. <!--        回复-->
  23.         <div class="reply">
  24.             <h3>最新回复</h3>
  25.             <div>
  26.                 <img src="../../../../static/images/user.png" width="60"  alt="">
  27.                 <div class="detail">
  28.                     <span>用户昵称</span>
  29.                     <span>留言内容：Php.cn</span>
  30.                     <div>
  31.                         <span>2019-12-12 15:53:45发表</span>
  32.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  33.                     </div>
  34.                 </div>
  35.             </div>
  36.             <div>
  37.                 <img src="../../../../static/images/user.png" width="60"  alt="">
  38.                 <div class="detail">
  39.                     <span>用户昵称</span>
  40.                     <span>留言内容：Php.cn</span>
  41.                     <div>
  42.                         <span>2019-12-12 15:53:45发表</span>
  43.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  44.                     </div>
  45.                 </div>
  46.             </div>
  47.             <div>
  48.                 <img src="../../../../static/images/user.png" width="60"  alt="">
  49.                 <div class="detail">
  50.                     <span>用户昵称</span>
  51.                     <span>留言内容：Php.cn</span>
  52.                     <div>
  53.                         <span>2019-12-12 15:53:45发表</span>
  54.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  55.                     </div>
  56.                 </div>
  57.             </div>
  58.             <div>
  59.                 <img src="../../../../static/images/user.png" width="60"  alt="">
  60.                 <div class="detail">
  61.                     <span>用户昵称</span>
  62.                     <span>留言内容：Php.cn</span>
  63.                     <div>
  64.                         <span>2019-12-12 15:53:45发表</span>
  65.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  66.                     </div>
  67.                 </div>
  68.             </div>
  69.         </div>
  70.     </div>
  72. </body>
  73. </html>
  1. @import "../pubilc_reset.css";
  3. *{
  4.     /*outline: 1px dashed red;*/
  5. }
  7. .public_comment_reply{
  9.     padding: 20px;
  10.     box-sizing: border-box;
  11.     background-color: #fff;
  12.     display: flex;
  13.     flex-direction: column;
  14. }
  16. .public_comment_reply>.comment img{
  17.     width: 60px;
  18.     height: 60px;
  19.     border-radius: 5px;
  20.     box-shadow: 1px 1px 3px #cccccc;
  21. }
  23. .public_comment_reply>.comment{
  24.     display: flex;
  25.     flex-direction: column;
  26. }
  28. .public_comment_reply>.comment>h3{
  29.     padding: 20px 0;
  30.     border-top: 1px solid #cccccc;
  31. }
  33. .public_comment_reply>.comment >div{
  34.     padding: 15px;
  35.     height: 200px;
  36.     display: flex;
  37.     flex-flow: row nowrap;
  38. }
  40. .public_comment_reply>.comment >div img{
  41.     align-self: center;
  42. }
  44. .public_comment_reply>.comment>div textarea{
  45.     height: 200px;
  46.     margin-left: 30px;
  47.     flex: 1;
  48.     resize: none;
  49. }
  51. .public_comment_reply>.comment>div textarea:hover{
  52.     box-shadow: 0 0 8px #888888;
  53. }
  55. .public_comment_reply>.comment>button{
  56.     width: 150px;
  57.     height: 40px;
  58.     font-size: 14px;
  59.     background-color: #f64c59;
  60.     border: none;
  61.     color: white;
  62.     align-self: end;
  63. }
  64. .public_comment_reply>.comment>button:hover{
  65.     background-color: #178cee;
  66.     box-shadow: 0 0 8px #888888;
  67.     cursor: pointer;
  68. }
  70. .public_comment_reply>.reply{
  71.     display: flex;
  72.     flex-direction: column;
  73.     padding: 15px;
  74. }
  75. .public_comment_reply>.reply>h3 {
  76.     padding: 20px 0;
  77. }
  79. .public_comment_reply>.reply > div{
  80.     display: flex;
  81.     margin-top: 30px;
  82. }
  83. .public_comment_reply>.reply > div >img{
  84.     align-self: center;
  85. }
  86. .public_comment_reply>.reply > div >.detail{
  87.     flex: auto;
  89.     display: flex;
  90.     flex-direction: column;
  91.     margin-left: 20px;
  92.     height: 90px;
  93.     justify-content: space-between;
  94. }
  95. .public_comment_reply>.reply > div >.detail > div{
  96.     display: flex;
  97.     justify-content: space-between;
  98. }
  99. .public_comment_reply>.reply > div >.detail > div i{
  100.     color: red;
  101.     font-size: 1.2rem;
  102.     margin-right: 5px;
  103. }

小结：网页的设计要首先确定页面的结构，再确定结构中的元素，最后确定元素的样式，编写组件的时候要首先写出html的dom结构，再写出样式结构，页面元素的大小修改是最麻烦的一道程序，需要耐心调整。这节课学到了网页编写的思想，对接下来的编写有了一个明确的思路和一个方法步骤。

上一条：购物车与结算下一条：12月25日_ JQuery里的ajax提交 - 九期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多