Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2019-12-26作业，商品交易区和评论回复组件
Blogger Information
Blog 9
fans 3
comment 0
visits 11054
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
2019-12-26作业，商品交易区和评论回复组件
十年一梦
Original
670 people have browsed it

2019-12-26作业 flex实战

一、结构分析思路

  • 1、拿到一个页面之后，首先拆分组合，把整个页面拆成每个小组件；
  • 2、拆开之后把相似并且相近的元素组合一个大一点的元素；
  • 3、然后就可以根据结构把各个大一点的元素的尺寸量好；
  • 4、再把所需要的素材全部准备好之后就可以根据分拆组合的结构写html代码
  • 5、写好代码，把大概的css写出来，在根据原图对比微调；

二、作业代码提交

  • 公共商品交易区public_second_hand.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>公共花卉交易区</title>
  6.     <link rel="stylesheet" href="public_second_hand.css">
  7. </head>
  8. <body>
  9. <!--引入大标题-->
  10. <div class="public-headline">
  11.     <span>花卉交易</span>
  12. </div>
  13. <!--花卉交易区-->
  14. <div class="public-second-hand">
  15. <!--    标题一-->
  16.     <div class="title-first">
  17.         <a href="">抢好货</a>
  18.         <span> 0低价, 便捷,安全,快速</span>
  19.     </div>
  20. <!--    标题二-->
  21.     <div class="title-second">
  22.         <span>热门分类</span>
  23.         <a href="">蓝紫色</a>
  24.         <a href="">紫红色</a>
  25.         <a href="">白色</a>
  26.         <a href="">粉红色</a>
  27.         <a href="">红色</a>
  28.         <a href="">绿色</a>
  29.     </div>
  30.     <div class="goods">
  31.         <div class="goods-list">
  33.             <div class="intro">
  34.                 <a href=""><img src="../../../static/images/shop/shop1.jpg" alt=""></a>
  35.                 <a href="">桃红色颜色大丽花花孤立孤芳自赏的美丽花</a>
  36.                 <div>
  37.                     <span>&yen; 389</span>
  38.                     <span>红色花</span>
  39.                 </div>
  40.             </div>
  41.             <div class="intro">
  42.                 <a href=""><img src="../../../static/images/shop/shop2.jpg" alt=""></a>
  43.                 <a href="">桃红色颜色大丽花花孤立孤芳自赏的美丽花</a>
  44.                 <div>
  45.                     <span>&yen; 389</span>
  46.                     <span>红色花</span>
  47.                 </div>
  48.             </div>
  49.             <div class="intro">
  50.                 <a href=""><img src="../../../static/images/shop/shop3.jpg" alt=""></a>
  51.                 <a href="">桃红色颜色大丽花花孤立孤芳自赏的美丽花</a>
  52.                 <div>
  53.                     <span>&yen; 389</span>
  54.                     <span>红色花</span>
  55.                 </div>
  56.             </div>
  57.             <div class="intro">
  58.                 <a href=""><img src="../../../static/images/shop/shop4.jpg" alt=""></a>
  59.                 <a href="">桃红色颜色大丽花花孤立孤芳自赏的美丽花</a>
  60.                 <div>
  61.                     <span>&yen; 389</span>
  62.                     <span>红色花</span>
  63.                 </div>
  64.             </div>
  65.             <div class="intro">
  66.                 <a href=""><img src="../../../static/images/shop/shop5.jpg" alt=""></a>
  67.                 <a href="">桃红色颜色大丽花花孤立孤芳自赏的美丽花</a>
  68.                 <div>
  69.                     <span>&yen; 389</span>
  70.                     <span>红色花</span>
  71.                 </div>
  72.             </div>
  73.             <div class="intro">
  74.                 <a href=""><img src="../../../static/images/shop/shop6.jpg" alt=""></a>
  75.                 <a href="">桃红色颜色大丽花花孤立孤芳自赏的美丽花</a>
  76.                 <div>
  77.                     <span>&yen; 389</span>
  78.                     <span>红色花</span>
  79.                 </div>
  80.             </div>
  81.             <div class="intro">
  82.                 <a href=""><img src="../../../static/images/shop/shop7.jpg" alt=""></a>
  83.                 <a href="">桃红色颜色大丽花花孤立孤芳自赏的美丽花</a>
  84.                 <div>
  85.                     <span>&yen; 389</span>
  86.                     <span>红色花</span>
  87.                 </div>
  88.             </div>
  89.             <div class="intro">
  90.                 <a href=""><img src="../../../static/images/shop/shop8.jpg" alt=""></a>
  91.                 <a href="">桃红色颜色大丽花花孤立孤芳自赏的美丽花</a>
  92.                 <div>
  93.                     <span>&yen; 389</span>
  94.                     <span>红色花</span>
  95.                 </div>
  96.             </div>
  97.         </div>
  98.       <div class="quick-entry">
  99.           <a href=""><img src="../../../static/images/ad/1.png" alt=""></a>
  100.           <a href=""><img src="../../../static/images/ad/2.png" alt=""></a>
  101.           <a href=""><img src="../../../static/images/ad/3.png" alt=""></a>
  102.           <a href=""><img src="../../../static/images/ad/4.png" alt=""></a>
  103.           <div>
  104.               <a href=""><img src="../../../static/images/ad/image.png" alt=""></a>
  105.               <a href=""><img src="../../../static/images/ad/ad2.jpg" alt=""></a>
  106.           </div>
  107.       </div>
  108.     </div>
  109. </div>
  110. </body>
  111. </html>
  • 公共商品交易区样式表public_second_hand.css
    1. @import "../public_reset.css";
    2. @import "../public_headline/public_headline.css";
    3. .public-second-hand {
    4.   width: 1200px;
    5.   padding: 10px;
    6.   box-sizing: border-box;
    7.   margin: auto;
    8.   background-color: #ffffff;
    9. }
    10. .public-second-hand:hover {
    11.   box-shadow: 0 0 8px #888888;
    12. }
    13. .public-second-hand > .title-first {
    14.   height: 50px;
    15.   border-bottom: 1px solid #cccccc;
    16.   box-sizing: border-box;
    17. }
    18. .public-second-hand > .title-first > a{
    19.   font-size: 23px;
    20.   margin-right: 20px;
    21. }
    22. .public-second-hand > .title-first > span {
    23.   color: red;
    24. }
    25. .public-second-hand > .title-second {
    26.   height: 55px;
    27. }
    28. .public-second-hand > .title-second > span {
    29.   font-size: 23px;
    30.   color: red;
    31. }
    32. .public-second-hand > .title-second > span ~ a {
    33.   margin-left: 20px;
    34. }
    35. .public-second-hand > .goods {
    36.   height: 440px;
    37.   display: flex;
    38. }
    39. .public-second-hand > .goods > .goods-list {
    40.   flex-basis: 800px;
    41.   padding: 10px;
    42.   display: flex;
    43.   flex-flow: row wrap;
    44.   justify-content: space-between;
    45. }
    46. .public-second-hand > .goods > .goods-list > .intro {
    47.   width: 178px;
    48.   height: 200px;
    49.   display: flex;
    50.   flex-flow: column nowrap;
    51.   justify-content: space-between;
    52. }
    53. .public-second-hand > .goods > .goods-list > .intro  img {
    54.   width: 176px;
    55.   height: 120px;
    56.   border: 1px solid #cccccc;
    57.   border-radius: 5px;
    58. }
    59. .public-second-hand > .goods > .goods-list > .intro div {
    60.   display: flex;
    61. }
    62. .public-second-hand > .goods > .goods-list > .intro span:first-of-type {
    63.   color: red;
    64. }
    65. .public-second-hand > .goods > .goods-list > .intro span:last-of-type {
    66.   color: white;
    67.   padding: 0 5px;
    68.   background-color: #55ce9f;
    69.   margin-left: auto;
    70. }
    71. .public-second-hand > .goods > .quick-entry {
    72.   flex-basis: 400px;
    73.   padding: 10px;
    74.   display: flex;
    75.   flex-flow: row wrap;
    76.   justify-content: space-between;
    77. }
    78. .public-second-hand > .goods > .quick-entry img {
    79.   width: 190px;
    80.   height: 130px;
    81. }
    82. .public-second-hand > .goods > .quick-entry > div {
    83.   flex-basis: 400px;
    84.   display: flex;
    85.   flex-direction: column;
    86. }
    87. .public-second-hand > .goods > .quick-entry > div img {
    88.   width: 393px;
    89.   height: 60px;
    90. }
  • 完成效果图；

*公共评论回复区public_comment_reply.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>公共评论回复</title>
  6.     <link rel="stylesheet" href="public_comment_reply.css">
  7.     <link rel="stylesheet" href="../../../static/font/iconfont.css">
  8. </head>
  9. <body>
  10. <div class="public-comment-reply">
  11. <!--    评论输入框-->
  12.    <div class="comment">
  13.        <h3>我要评论</h3>
  14.        <div>
  15.            <label for="comment"><img src="../../../static/images/user/user1.gif" alt=""></label>
  16.            <textarea name="" id="comment"></textarea>
  17.        </div>
  18.        <button>提交评论</button>
  19.    </div>
  20. <!--    评论列表-->
  21.     <div class="reply">
  22.         <h3>最新回复</h3>
  23.         <div>
  24.         <img src="../../../static/images/user/user2.gif" alt="">
  25.         <div class="detail">
  26.             <span>用户昵称</span>
  27.             <span>留言内容：你家的花很漂亮，很喜欢哦！</span>
  28.             <div>
  29.                 <span>2019-12-27-14:45 发表</span>
  30.                 <span><i class="iconfont icon-dianzan"></i>回复</span>
  31.             </div>
  32.         </div>
  34.     </div>
  35.         <div>
  36.             <img src="../../../static/images/user/user3.gif" alt="">
  37.             <div class="detail">
  38.                 <span>用户昵称</span>
  39.                 <span>留言内容：你家的花很漂亮，很喜欢哦！</span>
  40.                 <div>
  41.                     <span>2019-12-27-14:45 发表</span>
  42.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  43.                 </div>
  44.             </div>
  46.         </div>
  47.         <div>
  48.             <img src="../../../static/images/user/user4.gif" alt="">
  49.             <div class="detail">
  50.                 <span>用户昵称</span>
  51.                 <span>留言内容：你家的花很漂亮，很喜欢哦！</span>
  52.                 <div>
  53.                     <span>2019-12-27-14:45 发表</span>
  54.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  55.                 </div>
  56.             </div>
  58.         </div>
  59.         <div>
  60.             <img src="../../../static/images/user/user5.gif" alt="">
  61.             <div class="detail">
  62.                 <span>用户昵称</span>
  63.                 <span>留言内容：你家的花很漂亮，很喜欢哦！</span>
  64.                 <div>
  65.                     <span>2019-12-27-14:45 发表</span>
  66.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  67.                 </div>
  68.             </div>
  70.         </div>
  71.     </div>
  73. </div>
  74. </body>
  75. </html>
  • 公共评论区样式表public_comment_reply.css
    ```css
    @import “../public_reset.css”;

.public-comment-reply {
padding: 15px;
box-sizing: border-box;
background-color: #ffffff;
display: flex;
flex-direction: column;
}
.public-comment-reply > .comment {
display: flex;
flex-direction: column;
}
.public-comment-reply > .comment h3 {
padding: 20px;
border-top: 1px solid #cccccc;
}
.public-comment-reply > .comment > div {
padding: 15px;
height: 200px;
display: flex;
flex-flow: row nowrap;
}
.public-comment-reply > .comment > div img {
align-self: start;
}
.public-comment-reply img {
width: 60px;
height: 60px;
box-shadow: 1px 1px 3px #cccccc;
border-radius: 5px;
}

.public-comment-reply > .comment > div textarea {
height: 200px;
margin-left: 20px;
resize: none;
flex: auto;
}
.public-comment-reply > .comment > button {
font-size: 14px;
color: white;
background-color: red;
border: none;
width: 150px;
height: 40px;
align-self: flex-end;
}
.public-comment-reply > .reply {
padding: 15px 0;
display: flex;
flex-direction: column;
}
.public-comment-reply > .reply > h3 {
padding: 20px 0;
}
.public-comment-reply > .reply > div {
display: flex;
margin-top: 30px;
}
.public-comment-reply > .reply > div > img {
align-self: center;
}
.public-comment-reply > .reply > div > .detail {
flex: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 90px;
margin-left: 20px;
}
.public-comment-reply > .reply > div > .detail > div {
display: flex;
justify-content: space-between;
}
.public-comment-reply > .reply > div > .detail > div i{
color: red;
font-size: 16px;
margin-right: 5px;
}
```

  • 完成效果图

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