Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 二手商品列表与评论与回复独立开发与总结
Blogger Information
Blog 32
fans 2
comment 2
visits 23330
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
二手商品列表与评论与回复独立开发与总结
暴风战斧
Original
571 people have browsed it

（作业中附上了代码比较长）

思路与方案

二手商品

自己来实现这个效果最关键的一个思路就是，把页面元素划分到一个个<div>里去，一个套一个，然后写css时，从上往下一个个设置样式。
把页面分为两大部分，“大标题”“内容详情”，在“内容详情”里再分为“副标题”“导航”“商品展示”，在写css的时候就是一个个写，从上到下，从父级写到子级别！

评论与回复

先把页面划分，然后思考用哪些标签实现，最后样式如何设置，边写边看效果及时调整。

独立开发总结

这次独立开发比第一次去开发那张效果图图片好了太多了，这一次需要用到的标签都能记住并且运用上，css样式的设置比较清楚。在写“二手商品”和“评论回复”时，最大的感触就是，html布局好了，css写起来很舒服。
这一次不足之处是，二手商品的布局写的不是很好，属性的命名也没有尽可能采用英文单词，写css时左侧商品的样式设置还有问题！
打算，把二手商品参考老师的写一遍，然后再自己写一遍！

1. 二手商品

效果图

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public_second_hand.css">
  6.     <title>公共二手交易区作业</title>
  7. </head>
  8. <body>
  9. <!--大标题-->
  10. <div class="title1">
  11.     <span>二手交易</span>
  12. </div>
  13. <!--内容详情-->
  14. <div class="public-second-detail">
  15.     <!--副标题-->
  16.     <div class="title2">
  17.         <span>抢好货</span>
  18.         <span>0低价，便捷，安全，快速</span>
  19.     </div>
  20.     <!--导航区-->
  21.     <div class="nav">
  22.         <span>热门分类</span>
  23.         <nav>
  24.             <a href="">美女写真</a>
  25.             <a href="">日本美女</a>
  26.             <a href="">美国美女</a>
  27.             <a href="">国内美女</a>
  28.             <a href="">AV美女</a>
  29.         </nav>
  30.     </div>
  31.     <!--商品展示-->
  32.     <div class="goods-list">
  33.         <!--商品列表-->
  34.         <div class="goods">
  35.             <div>
  36.                 <span>
  37.                    <a href=""><img src="../../static/images/shop/shop6.jpg" alt=""></a>
  38.                 </span>
  39.                 <span>
  40.                     <a href="">美女性感写真海报墙艺术装饰画帖画图1</a>
  41.                 </span>
  42.                 <span>
  43.                     <a>¥333</a>
  44.                     <a>美女</a>
  45.                 </span>
  46.             </div>
  47.             <div>
  48.                 <span>
  49.                    <a href=""><img src="../../static/images/shop/shop6.jpg" alt=""></a>
  50.                 </span>
  51.                 <span>
  52.                     <a href="">美女性感写真海报墙艺术装饰画帖画图1</a>
  53.                 </span>
  54.                 <span>
  55.                     <a>¥333</a>
  56.                     <a>美女</a>
  57.                 </span>
  58.             </div>
  59.             <div>
  60.                 <span>
  61.                    <a href=""><img src="../../static/images/shop/shop6.jpg" alt=""></a>
  62.                 </span>
  63.                 <span>
  64.                     <a href="">美女性感写真海报墙艺术装饰画帖画图1</a>
  65.                 </span>
  66.                 <span>
  67.                     <a>¥333</a>
  68.                     <a>美女</a>
  69.                 </span>
  70.             </div>
  71.             <div>
  72.                 <span>
  73.                    <a href=""><img src="../../static/images/shop/shop6.jpg" alt=""></a>
  74.                 </span>
  75.                 <span>
  76.                     <a href="">美女性感写真海报墙艺术装饰画帖画图1</a>
  77.                 </span>
  78.                 <span>
  79.                     <a>¥333</a>
  80.                     <a>美女</a>
  81.                 </span>
  82.             </div>
  83.             <div>
  84.                 <span>
  85.                    <a href=""><img src="../../static/images/shop/shop6.jpg" alt=""></a>
  86.                 </span>
  87.                 <span>
  88.                     <a href="">美女性感写真海报墙艺术装饰画帖画图1</a>
  89.                 </span>
  90.                 <span>
  91.                     <a>¥333</a>
  92.                     <a>美女</a>
  93.                 </span>
  94.             </div>
  95.             <div>
  96.                 <span>
  97.                    <a href=""><img src="../../static/images/shop/shop6.jpg" alt=""></a>
  98.                 </span>
  99.                 <span>
  100.                     <a href="">美女性感写真海报墙艺术装饰画帖画图1</a>
  101.                 </span>
  102.                 <span>
  103.                     <a>¥333</a>
  104.                     <a>美女</a>
  105.                 </span>
  106.             </div>
  107.             <div>
  108.                 <span>
  109.                    <a href=""><img src="../../static/images/shop/shop6.jpg" alt=""></a>
  110.                 </span>
  111.                 <span>
  112.                     <a href="">美女性感写真海报墙艺术装饰画帖画图1</a>
  113.                 </span>
  114.                 <span>
  115.                     <a>¥333</a>
  116.                     <a>美女</a>
  117.                 </span>
  118.             </div>
  119.             <div>
  120.                 <span>
  121.                    <a href=""><img src="../../static/images/shop/shop6.jpg" alt=""></a>
  122.                 </span>
  123.                 <span>
  124.                     <a href="">美女性感写真海报墙艺术装饰画帖画图1</a>
  125.                 </span>
  126.                 <span>
  127.                     <a>¥333</a>
  128.                     <a>美女</a>
  129.                 </span>
  130.             </div>
  131.         </div>
  132.         <div class="ad">
  133.             <a href=""><img src="../../static/images/ad/1.png" alt=""></a>
  134.             <a href=""><img src="../../static/images/ad/2.png" alt=""></a>
  135.             <a href=""><img src="../../static/images/ad/3.png" alt=""></a>
  136.             <a href=""><img src="../../static/images/ad/4.png" alt=""></a>
  137.             <div>
  138.                 <a href=""><img src="../../static/images/ad/image.png" alt=""></a>
  139.                 <a href=""><img src="../../static/images/ad/ad2.jpg" alt=""></a>
  140.             </div>
  141.         </div>
  142.     </div>
  143. </div>
  144. </body>
  145. </html>

css代码

  1. @import "../../componets/public/public_reset.css";
  2. /*大标题*/
  3. .title1 {
  4.     display: flex;
  5.     flex: 1;
  6. }
  8. .title1 span {
  9.     font-size: 30px;
  10.     font-weight: bold;
  11.     border-bottom: 3px solid red;
  12.     margin: 20px auto;
  13. }
  15. /*内容详情*/
  16. .public-second-detail {
  17.     display: flex;
  18.     width: 1200px;
  19.     height: auto;
  20.     background-color: #fff;
  21.     border-radius: 10px;
  22.     margin: auto;
  24.     flex-direction: column;
  25. }
  27. .public-second-detail:hover {
  28.     box-shadow: 0 0 10px #cccccc;
  29. }
  31. /*副标题*/
  32. .public-second-detail > .title2 {
  33.     display: flex;
  34.     margin: 10px;
  35. }
  37. .public-second-detail > .title2 > span:first-of-type {
  38.     font-size: 24px;
  39. }
  41. .public-second-detail > .title2 > span:last-of-type {
  42.     margin-left: 20px;
  43.     align-self: flex-end;
  44.     color: red;
  45. }
  47. /*导航区*/
  48. .public-second-detail > .nav {
  49.     display: flex;
  50.     margin: 10px;
  51.     border-top: 1px solid #cccccc;
  52. }
  54. .public-second-detail > .nav > span {
  55.     font-size: 24px;
  56.     color: red;
  57.     margin-right: 10px;
  58. }
  60. .public-second-detail > .nav > nav {
  61.     display: flex;
  62. }
  64. .public-second-detail > .nav > nav a {
  65.     margin: 0 10px;
  66.     align-self: flex-end;
  67. }
  69. .public-second-detail > .nav > nav a:hover {
  70.     color: lightcoral;
  71. }
  73. /*商品展示*/
  74. .public-second-detail > .goods-list {
  75.     display: flex;
  76.     justify-content: space-between;
  77. }
  79. .public-second-detail > .goods-list > .goods {
  80.     display: flex;
  81.     flex-basis: 800px;
  82.     height: 440px;
  83.     padding: 10px;
  84.     justify-content: space-between;
  85.     flex-flow: row wrap;
  86. }
  88. .public-second-detail > .goods-list > .goods > div {
  89.     display: flex;
  90.     width: 178px;
  91.     height: 200px;
  92.     flex-flow: column nowrap;
  93. }
  95. .public-second-detail > .goods-list > .goods > div span {
  96.     margin: 5px;
  97. }
  98. .public-second-detail > .goods-list > .goods > div img {
  99.     width: 178px;
  100.     border: 1px solid #cccccc;
  101.     border-radius: 5px;
  102. }
  104. .public-second-detail > .goods-list > .goods > div span:last-of-type {
  105.     display: flex;
  106.     justify-content: space-between;
  107. }
  109. .public-second-detail > .goods-list > .goods > div > span:last-of-type > a:first-of-type {
  110.     color: red;
  111. }
  113. .public-second-detail > .goods-list > .goods > div > span:last-of-type > a:last-of-type {
  114.     color: white;
  115.     background-color: lightseagreen;
  116.     padding: 0 5px;
  117.     margin-left: auto;
  118. }
  120. /*右侧图片*/
  121. .public-second-detail > .goods-list > .ad {
  122.     display: flex;
  123.     padding: 15px 15px;
  124.     flex-basis: 400px;
  125.     flex-flow: row wrap;
  126.     justify-content: space-between;
  127. }
  129. .public-second-detail > .goods-list > .ad img {
  130.     width: 190px;
  131.     height: 130px;
  132. }
  134. .public-second-detail > .goods-list > .ad > div {
  135.     width: 400px;
  136.     display: flex;
  137.     flex-direction: column;
  138. }
  140. .public-second-detail > .goods-list > .ad > div img {
  141.     width: 393px;
  142.     height: 60px;
  143. }

2. 评论与回复

效果图

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. <!--评论区-->
  11. <div class="public-comment">
  12.     <h3>我要评论</h3>
  13.     <div class="comment">
  14.         <label for="comment"><img src="../../static/images/user.png" alt=""></label>
  15.         <textarea name="" id="comment">
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