search

博客列表 >12月26日 学号：478291 组件开发实战

12月26日 学号：478291 组件开发实战

Lin__
Lin__原创
2019年12月27日 15:29:29615浏览

二手商品列表开发

  • 划分区域
  • 布局排列方式
  • 实现代码
  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*/
  • 实现效果

    思路总结

  • 首先对组件进行区块的划分，总结大致需要的页面元素
  • 通过分区将页面内容先进行填入
  • 考虑每个区块中项目的排列方式以及对齐方式，先进行设置
  • 细化每个元素的具体样式（字体大小、背景色等等）
上一条：1226作业下一条：补交12.27作业--flex布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多