Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex实战-Php第十期线上班
Blogger Information
Blog 22
fans 0
comment 0
visits 11785
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
438 people have browsed it

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结构，再写出样式结构，页面元素的大小修改是最麻烦的一道程序，需要耐心调整。这节课学到了网页编写的思想，对接下来的编写有了一个明确的思路和一个方法步骤。

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