简体中文（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

博客列表 >2019-12-26作业，商品交易区和评论回复组件

2019-12-26作业，商品交易区和评论回复组件

十年一梦
十年一梦原创
2019年12月27日 16:30:37660浏览

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;
}
```

  • 完成效果图

上一条：二手商品列表+回复组件（2019年12月26日）--PHP培训第十期线上班下一条：1226作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多