Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12月26日 学号：478291 组件开发实战
Blogger Information
Blog 24
fans 4
comment 0
visits 20129
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
12月26日 学号：478291 组件开发实战
Lin__
Original
616 people have browsed it

二手商品列表开发

  • 划分区域
  • 布局排列方式
  • 实现代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>二手商品组件</title>
  6.     <link rel="stylesheet" href="second-goods.css">
  7. </head>
  8. <body>
  9.     <!--二手交易组件整体-->
  10.     <div class="second-goods">
  11.         <!--二手交易标题-->
  12.         <div class="second-goods-title">
  13.             <span>抢好货</span><!--二手交易标题-左侧文字-->
  14.             <span>0低价, 便捷,安全,快速</span><!--二手交易标题 -右侧文字-->
  15.         </div>
  16.         <!--二手交易标题  end-->
  17.         <!--二手交易分类导航-->
  18.         <div class="second-goods-class">
  19.             <span>热门分类</span><!--二手交易分类导航-左侧文字-->
  20.             <!--二手交易分类导航--右侧链接-->
  21.             <span>
  22.                 <a href="#">箱包</a>
  23.                 <a href="#">服饰</a>
  24.                 <a href="#">化妆</a>
  25.                 <a href="#">数码</a>
  26.                 <a href="#">书籍</a>
  27.             </span>
  28.         </div>
  29.         <!--二手交易分类导航 end-->
  30.         <!--二手交易列表-->
  31.         <div class="second-goods-div">
  32.             <!--二手交易商品列表-->
  33.             <div class="second-goods-list">
  34.                 <!--二手交易商品列表-商品项-->
  35.                 <div class="second-goods-list-item">
  36.                     <img src="../../../images/4b18efd7c19db04e.jpg" alt="女装"><!-- 二手交易商品列表-商品项 图片 -->
  37.                     <span>颜域女装百搭气质雪纺衬衫秋装2019年新款</span><!-- 二手交易商品列表-商品项 商品名 -->
  38.                     <div>
  39.                         <span>￥219</span><!-- 二手交易商品列表-商品项 价格 -->
  40.                         <span>女装</span><!-- 二手交易商品列表-商品项 标签 -->
  41.                     </div>
  42.                 </div>
  43.                 <!--二手交易商品列表-商品项 end-->
  44.                 <!--二手交易商品列表-商品项-->
  45.                 <div class="second-goods-list-item">
  46.                     <img src="../../../images/4b18efd7c19db04e.jpg" alt="女装"><!-- 二手交易商品列表-商品项 图片 -->
  47.                     <span>颜域女装百搭气质雪纺衬衫秋装2019年新款</span><!-- 二手交易商品列表-商品项 商品名 -->
  48.                     <div>
  49.                         <span>￥219</span><!-- 二手交易商品列表-商品项 价格 -->
  50.                         <span>女装</span><!-- 二手交易商品列表-商品项 标签 -->
  51.                     </div>
  52.                 </div>
  53.                 <!--二手交易商品列表-商品项 end-->
  54.                 <!--二手交易商品列表-商品项-->
  55.                 <div class="second-goods-list-item">
  56.                     <img src="../../../images/4b18efd7c19db04e.jpg" alt="女装"><!-- 二手交易商品列表-商品项 图片 -->
  57.                     <span>颜域女装百搭气质雪纺衬衫秋装2019年新款</span><!-- 二手交易商品列表-商品项 商品名 -->
  58.                     <div>
  59.                         <span>￥219</span><!-- 二手交易商品列表-商品项 价格 -->
  60.                         <span>女装</span><!-- 二手交易商品列表-商品项 标签 -->
  61.                     </div>
  62.                 </div>
  63.                 <!--二手交易商品列表-商品项 end-->
  64.                 <!--二手交易商品列表-商品项-->
  65.                 <div class="second-goods-list-item">
  66.                     <img src="../../../images/4b18efd7c19db04e.jpg" alt="女装"><!-- 二手交易商品列表-商品项 图片 -->
  67.                     <span>颜域女装百搭气质雪纺衬衫秋装2019年新款</span><!-- 二手交易商品列表-商品项 商品名 -->
  68.                     <div>
  69.                         <span>￥219</span><!-- 二手交易商品列表-商品项 价格 -->
  70.                         <span>女装</span><!-- 二手交易商品列表-商品项 标签 -->
  71.                     </div>
  72.                 </div>
  73.                 <!--二手交易商品列表-商品项 end-->
  74.                 <!--二手交易商品列表-商品项-->
  75.                 <div class="second-goods-list-item">
  76.                     <img src="../../../images/4b18efd7c19db04e.jpg" alt="女装"><!-- 二手交易商品列表-商品项 图片 -->
  77.                     <span>颜域女装百搭气质雪纺衬衫秋装2019年新款</span><!-- 二手交易商品列表-商品项 商品名 -->
  78.                     <div>
  79.                         <span>￥219</span><!-- 二手交易商品列表-商品项 价格 -->
  80.                         <span>女装</span><!-- 二手交易商品列表-商品项 标签 -->
  81.                     </div>
  82.                 </div>
  83.                 <!--二手交易商品列表-商品项 end-->
  84.                 <!--二手交易商品列表-商品项-->
  85.                 <div class="second-goods-list-item">
  86.                     <img src="../../../images/4b18efd7c19db04e.jpg" alt="女装"><!-- 二手交易商品列表-商品项 图片 -->
  87.                     <span>颜域女装百搭气质雪纺衬衫秋装2019年新款</span><!-- 二手交易商品列表-商品项 商品名 -->
  88.                     <div>
  89.                         <span>￥219</span><!-- 二手交易商品列表-商品项 价格 -->
  90.                         <span>女装</span><!-- 二手交易商品列表-商品项 标签 -->
  91.                     </div>
  92.                 </div>
  93.                 <!--二手交易商品列表-商品项 end-->
  94.                 <!--二手交易商品列表-商品项-->
  95.                 <div class="second-goods-list-item">
  96.                     <img src="../../../images/4b18efd7c19db04e.jpg" alt="女装"><!-- 二手交易商品列表-商品项 图片 -->
  97.                     <span>颜域女装百搭气质雪纺衬衫秋装2019年新款</span><!-- 二手交易商品列表-商品项 商品名 -->
  98.                     <div>
  99.                         <span>￥219</span><!-- 二手交易商品列表-商品项 价格 -->
  100.                         <span>女装</span><!-- 二手交易商品列表-商品项 标签 -->
  101.                     </div>
  102.                 </div>
  103.                 <!--二手交易商品列表-商品项 end-->
  104.                 <!--二手交易商品列表-商品项-->
  105.                 <div class="second-goods-list-item">
  106.                     <img src="../../../images/4b18efd7c19db04e.jpg" alt="女装"><!-- 二手交易商品列表-商品项 图片 -->
  107.                     <span>颜域女装百搭气质雪纺衬衫秋装2019年新款</span><!-- 二手交易商品列表-商品项 商品名 -->
  108.                     <div>
  109.                         <span>￥219</span><!-- 二手交易商品列表-商品项 价格 -->
  110.                         <span>女装</span><!-- 二手交易商品列表-商品项 标签 -->
  111.                     </div>
  112.                 </div>
  113.                 <!--二手交易商品列表-商品项 end-->
  114.             </div>
  115.             <!--二手交易商品列表 end-->
  116.             <!-- 二手广告列表 -->
  117.             <div class="second-goods-ad">
  118.                 <!-- 二手广告列表 功能-->
  119.                 <a href=""><img src="../../../images/1.png" alt=""></a><!-- 二手广告列表 功能-图片-->
  120.                 <a href=""><img src="../../../images/2.png" alt=""></a><!-- 二手广告列表 功能-图片-->
  121.                 <a href=""><img src="../../../images/3.png" alt=""></a><!-- 二手广告列表 功能-图片-->
  122.                 <a href=""><img src="../../../images/4.png" alt=""></a><!-- 二手广告列表 功能-图片-->
  123.                 <!-- 二手广告列表 功能 end-->
  124.                 <!-- 二手广告列表 广告-->
  125.                 <div class="second-goods-ad-item">
  126.                     <img src="../../../images/ad2.jpg" alt=""><!-- 二手广告列表 列表-图片-->
  127.                     <img src="../../../images/image.png" alt=""><!-- 二手广告列表 列表-图片-->
  128.                 </div>
  129.                 <!-- 二手广告列表 广告 end-->
  130.             </div>
  131.             <!-- 二手广告列表 end-->
  132.         </div>
  133.         <!--二手交易列表 end-->
  134.     </div>
  135. </body>
  136. </html>
  1. @import url(../public_style.css);
  2. /*二手交易组件整体*/
  3. .second-goods{
  4.     width:1200px;
  5.     border:1px solid #cccccc;
  6.     border-radius: 5px;
  7.     margin: auto;
  8.     padding: 0 10px;
  9. }
  10. .second-goods:hover{
  11.     box-shadow: 0 0 8px #ccc;
  12. }
  13. /*二手交易标题*/
  14. .second-goods > .second-goods-title{
  15.     height: 50px;
  16.     box-sizing: border-box;
  17.     line-height: 50px;
  18.     border-bottom: 1px solid #ccc;
  19. }
  20. /*二手交易标题-左侧文字*/
  21. .second-goods > .second-goods-title > span:first-of-type{
  22.     font-size: 23px;
  23.     margin-right: 15px;
  24. }
  25. /*二手交易标题 -右侧文字*/
  26. .second-goods > .second-goods-title > span:last-child{
  27.     color:red;
  28. }
  29. /*二手交易标题  end*/
  30. /*二手交易分类导航*/
  31. .second-goods > .second-goods-class{
  32.     height: 55px;
  33. }
  34. /*二手交易分类导航-左侧文字*/
  35. .second-goods > .second-goods-class > span:first-of-type{
  36.     font-size: 23px;
  37.     margin-right: 15px;
  38.     color: red;
  39. }
  40. /*二手交易分类导航-右侧链接*/
  41. .second-goods > .second-goods-class > span:last-child a{
  42.     padding-left: 10px;
  43.     color: black;
  44.     font-size: 13px;
  45. }
  46. /*二手交易分类导航 end*/
  47. /*二手交易列表*/
  48. .second-goods > .second-goods-div{
  49.     display: flex;
  50.     flex-flow: row nowrap;
  51.     justify-content: space-between;
  52. }
  53. /*二手交易商品列表*/
  54. .second-goods > .second-goods-div > .second-goods-list{
  55.     display: flex;
  56.     flex-flow: row wrap;
  57.     justify-content: space-between;
  58.     flex-basis: 800px;
  59. }
  60. /*二手交易商品列表-商品项*/
  61. .second-goods > .second-goods-div > .second-goods-list > .second-goods-list-item{
  62.     display: flex;
  63.     flex-flow: column wrap;
  64.     width: 178px;
  65.     height: 200px;
  66. }
  67. /*二手交易商品列表-商品项 图片*/
  68. .second-goods > .second-goods-div > .second-goods-list > .second-goods-list-item > img{
  69.     width:176px;
  70.     height: 120px;
  71.     border: 1px solid #ccc;
  72.     border-radius: 5px;
  73.     cursor: pointer;
  74. }
  75. /*二手交易商品列表-商品项 图片 end*/
  76. /*二手交易商品列表-商品项 商品名*/
  77. .second-goods > .second-goods-div > .second-goods-list > .second-goods-list-item > span{
  78.     font-size: 13px;
  79.     cursor: pointer;
  80. }
  81. /*二手交易商品列表-商品项 商品名 end*/
  82. /*二手交易商品列表-商品项 价格标签*/
  83. .second-goods > .second-goods-div > .second-goods-list > .second-goods-list-item > div{
  84.     display: flex;
  85.     flex-flow:row nowrap;
  86.     justify-content: space-between;
  87.     font-size: 13px;
  88.     margin-top: 10px;
  89. }
  90. /*二手交易商品列表-商品项 价格*/
  91. .second-goods > .second-goods-div > .second-goods-list > .second-goods-list-item > div > span:first-of-type{
  92.     color: red;
  93. }
  94. /*二手交易商品列表-商品项 标签*/
  95. .second-goods > .second-goods-div > .second-goods-list > .second-goods-list-item > div > span:last-child{
  96.     color: #fff;
  97.     background-color: aquamarine;
  98.     padding: 0 5px;
  99. }
  100. /*二手交易商品列表-商品项 价格标签 end*/
  101. /*二手交易商品列表-商品项 end*/
  102. /*二手交易商品列表 end*/
  103. /*二手广告列表*/
  104. .second-goods > .second-goods-div > .second-goods-ad{
  105.     display: flex;
  106.     flex-flow: row wrap;
  107.     justify-content: space-between;
  108.     flex-basis: 400px;
  109.     padding:0 10px;
  110. }
  111. /*二手广告列表 功能-图片*/
  112. .second-goods > .second-goods-div > .second-goods-ad > a{
  113.     margin-bottom: 10px;
  114. }
  115. /*二手广告列表 列表-图片*/
  116. .second-goods > .second-goods-div > .second-goods-ad > .second-goods-ad-item{
  117.     display: flex;
  118.     flex-direction: column;
  119. }
  120. /*二手广告列表 end*/
  121. /*二手交易列表 end*/
  • 实现效果

评论列表开发

  • 划分区域
  • 布局排列方式
  • 实现代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>用户评论组件</title>
  6.     <link rel="stylesheet" href="user-reply.css">
  7.     <link rel="stylesheet" href="../../../css/iconfont.css">
  8. </head>
  9. <body>
  10. <!--用户评论组件主体-->
  11. <div class="user-reply">
  12.     <!--用户评论 评论区-->
  13.     <div class="user-reply-enter">
  14.         <p class="user-reply-title">我要评论</p><!--评论区 标题 -->
  15.         <div class="user-reply-enter-input"><!--评论区 用户填写区域 -->
  16.             <img src="../../../images/user.png" alt="用户头像"><!--评论区 用户填写区域 用户头像 -->
  17.             <textarea name="reply_str" id="" ></textarea><!--评论区 用户填写区域 输入框 -->
  18.         </div>
  19.         <button>发表评论</button><!--评论区 提交按钮 -->
  20.     </div>
  21.     <!--用户评论 评论区 end-->
  22.     <!--用户评论 回复区-->
  23.     <div class="user-reply-comment">
  24.         <p class="user-reply-title">最新回复</p><!--回复区 标题 -->
  25.         <!--回复区 回复列表 -->
  26.         <div class="user-reply-comment-list">
  27.             <!--回复区 回复列表 列表项 -->
  28.             <div class="user-reply-comment-item">
  29.                 <img src="../../../images/user.png" alt="用户头像"><!--回复区 回复列表 用户头像 -->
  30.                 <!--回复区 回复列表 内容区域 -->
  31.                 <div class="user-reply-comment-item-detail">
  32.                     <span>用户昵称</span><!--回复区 回复列表 内容区域 用户昵称-->
  33.                     <span>回复内容</span><!--回复区 回复列表 内容区域 评论内容-->
  34.                     <!--回复区 回复列表 内容区域 时间操作-->
  35.                     <div>
  36.                         <span>2019-12-26 20:00:00发表</span><!--回复区 回复列表 内容区域 评论时间-->
  37.                         <span><i class="iconfont icon-dianzan"></i>点赞</span><!--回复区 回复列表 内容区域 点赞按钮-->
  38.                     </div>
  39.                     <!--回复区 回复列表 内容区域 时间操作 end-->
  40.                 </div>
  41.                 <!--回复区 回复列表 内容区域 end -->
  42.             </div>
  43.             <!--回复区 回复列表 列表项 end -->
  44.             <!--回复区 回复列表 列表项 -->
  45.             <div class="user-reply-comment-item">
  46.                 <img src="../../../images/user.png" alt="用户头像"><!--回复区 回复列表 用户头像 -->
  47.                 <!--回复区 回复列表 内容区域 -->
  48.                 <div class="user-reply-comment-item-detail">
  49.                     <span>用户昵称</span><!--回复区 回复列表 内容区域 用户昵称-->
  50.                     <span>回复内容</span><!--回复区 回复列表 内容区域 评论内容-->
  51.                     <!--回复区 回复列表 内容区域 时间操作-->
  52.                     <div>
  53.                         <span>2019-12-26 20:00:00发表</span><!--回复区 回复列表 内容区域 评论时间-->
  54.                         <span><i class="iconfont icon-dianzan"></i>点赞</span><!--回复区 回复列表 内容区域 点赞按钮-->
  55.                     </div>
  56.                     <!--回复区 回复列表 内容区域 时间操作 end-->
  57.                 </div>
  58.                 <!--回复区 回复列表 内容区域 end -->
  59.             </div>
  60.             <!--回复区 回复列表 列表项 end -->
  61.         </div>
  62.         <!--回复区 回复列表 end -->
  63.     </div>
  64.     <!--用户评论 回复区 end-->
  65. </div>
  66. <!--用户评论组件主体 end-->
  67. </body>
  68. </html>
  1. @import url(../public_style.css);
  2. /*用户评论组件主体*/
  3. .user-reply{
  4.     margin: auto;
  5.     width:1200px;
  6.     margin-top: 10px;
  7. }
  8. /*标题*/
  9. .user-reply-title{
  10.     font-weight: bold;
  11.     padding: 10px 0;
  12. }
  13. /*用户评论 评论区*/
  14. .user-reply-enter{
  15.     display:flex;
  16.     flex-direction:column;
  17.     justify-content:space-between;
  18.     border-top:1px solid #ccc;
  19. }
  20. /*评论区 用户填写区域*/
  21. .user-reply > .user-reply-enter > .user-reply-enter-input{
  22.     display: flex;
  23.     flex-flow: row nowrap;
  24.     align-items: stretch;
  25. }
  26. /*评论区 用户填写区域 用户头像*/
  27. .user-reply > .user-reply-enter > .user-reply-enter-input > img{
  28.     width: 50px;
  29.     height:50px;
  30.     margin-right: 20px;
  31. }
  32. /*评论区 用户填写区域 输入框*/
  33. .user-reply > .user-reply-enter > .user-reply-enter-input > textarea{
  34.     height: 200px;
  35.     margin-left: 20px;
  36.     resize: none;
  37.     flex: auto;
  38. }
  39. /*评论区 提交按钮*/
  40. .user-reply > .user-reply-enter > button{
  41.     width:100px;
  42.     height:40px;
  43.     background-color: #953629;
  44.     margin-left: auto;
  45.     border:none;
  46.     color:#fff;
  47.     margin-top:10px;
  48. }
  49. .user-reply > .user-reply-enter > button:hover{
  50.     background-color: #0a6aa1;
  51.     cursor: pointer;
  52. }
  53. /*评论区 用户填写区域 end*/
  54. /*用户评论 评论区 end*/
  55. /*用户评论 回复区*/
  56. .user-reply > .user-reply-comment{
  57.     display: flex;
  58.     flex-flow: column wrap;
  59. }
  60. /*回复区 回复列表*/
  61. .user-reply > .user-reply-comment > .user-reply-comment-list{
  62.     display: flex;
  63.     flex-flow: column wrap;
  64. }
  65. /*回复区 回复列表 列表项*/
  66. .user-reply > .user-reply-comment > .user-reply-comment-list > .user-reply-comment-item{
  67.     display: flex;
  68.     flex-flow: row nowrap;
  69.     height:100px;
  70.     margin-top: 30px;
  71.     width: 1200px;
  72. }
  73. /*回复区 回复列表 用户头像*/
  74. .user-reply > .user-reply-comment > .user-reply-comment-list > .user-reply-comment-item > img{
  75.     width: 50px;
  76.     height:50px;
  77.     margin-right: 20px;
  78. }
  79. /*回复区 回复列表 内容区域*/
  80. .user-reply > .user-reply-comment > .user-reply-comment-list > .user-reply-comment-item > .user-reply-comment-item-detail{
  81.     display: flex;
  82.     flex-flow: column wrap;
  83.     justify-content: space-between;
  84.     width:1160px;
  85. }
  86. /*-回复区 回复列表 内容区域 时间操作*/
  87. .user-reply > .user-reply-comment > .user-reply-comment-list > .user-reply-comment-item > .user-reply-comment-item-detail > div{
  88.     display: flex;
  89.     flex-direction: row;
  90.     justify-content: space-between;
  91. }
  92. /*回复区 回复列表 内容区域 点赞按钮*/
  93. .user-reply > .user-reply-comment > .user-reply-comment-list > .user-reply-comment-item > .user-reply-comment-item-detail > div > span:last-child > i{
  94.     color:red;
  95. }
  96. /*回复区 回复列表 内容区域 end*/
  97. /*回复区 回复列表 列表项 end*/
  98. /*回复区 回复列表 end*/
  99. /*用户评论 回复区 end*/
  100. /*用户评论组件主体 end*/
  • 实现效果

    思路总结

  • 首先对组件进行区块的划分，总结大致需要的页面元素
  • 通过分区将页面内容先进行填入
  • 考虑每个区块中项目的排列方式以及对齐方式，先进行设置
  • 细化每个元素的具体样式（字体大小、背景色等等）
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