登录  /  注册
博主信息
博文 26
粉丝 0
评论 2
访问量 33877
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
二手商品交易和评论与回复的组件(1226前端开发学习)
小辰
原创
626人浏览过

1.首先是二手商品组件效果图与代码。

效果图

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>二手交易</title></br>
  5. <meta charset="utf-8">
  6. <link rel="stylesheet" href="css/second_hand.css">
  7. </head>
  8. <body>
  9. <div class="public-second-hand">
  10. <!-- 标题一 -->
  11. <div class="title1">
  12. <a href="">抢好货</a>
  13. <span>低价,便捷,安全,快速</span>
  14. </div>
  15. <!-- 标题二 -->
  16. <div class="title2">
  17. <span>热门分类</span>
  18. <a href="">美女写真</a>
  19. <a href="">日本美女</a>
  20. <a href="">韩国美女</a>
  21. <a href="">欧美美女</a>
  22. <a href="">国内美女</a>
  23. </div>
  24. <!-- 商品展示区 -->
  25. <div class="goods">
  26. <!-- 左侧商品 -->
  27. <div class="goods-list">
  28. <div class="intro">
  29. <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  30. <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  31. <div>
  32. <span>¥ 345</span>
  33. <span>美女</span>
  34. </div></div>
  35. <div class="intro">
  36. <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  37. <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  38. <div>
  39. <span>¥ 345</span>
  40. <span>美女</span>
  41. </div></div>
  42. <div class="intro">
  43. <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  44. <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  45. <div>
  46. <span>¥ 345</span>
  47. <span>美女</span>
  48. </div></div>
  49. <div class="intro">
  50. <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  51. <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  52. <div>
  53. <span>¥ 345</span>
  54. <span>美女</span>
  55. </div></div>
  56. <div class="intro">
  57. <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  58. <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  59. <div>
  60. <span>¥ 345</span>
  61. <span>美女</span>
  62. </div>
  63. </div>
  64. <div class="intro">
  65. <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  66. <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  67. <div>
  68. <span>¥ 345</span>
  69. <span>美女</span>
  70. </div>
  71. </div>
  72. <div class="intro">
  73. <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  74. <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  75. <div>
  76. <span>¥ 345</span>
  77. <span>美女</span>
  78. </div>
  79. </div>
  80. <div class="intro">
  81. <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  82. <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  83. <div>
  84. <span>¥ 345</span>
  85. <span>美女</span>
  86. </div>
  87. </div>
  88. </div>
  89. <!-- 右侧功能 -->
  90. <div class="quick-entry">
  91. <a href=""><img src="img/1.png" alt="" ></a>
  92. <a href=""><img src="img/2.png" alt=""></a>
  93. <a href=""><img src="img/3.png" alt=""></a>
  94. <a href=""><img src="img/4.png" alt=""></a>
  95. <div>
  96. <a href=""><img src="img/ad2.jpg" alt=""></a>
  97. <a href=""><img src="img/image.png" alt=""></a> </div>
  98. </div>
  99. </div>
  100. </body>
  101. </html>

css代码

  1. @import "reset.css";
  2. .public-second-hand {
  3. width: 1200px;
  4. padding: 10px;
  5. box-sizing: border-box;
  6. margin: auto;
  7. border-radius: 5px;
  8. background-color: #fff;
  9. }
  10. .public-second-hand:hover {
  11. box-shadow: 0 0 8px #888;
  12. }
  13. /*标题1*/
  14. .public-second-hand > .title1 {
  15. height: 50px;
  16. border-bottom: 1px solid #cccccc;
  17. box-sizing: border-box;
  18. }
  19. .public-second-hand > .title1 > a {
  20. font-size: 23px;
  21. margin-right: 20px;
  22. }
  23. .public-second-hand > .title1 > span {
  24. color: red;
  25. }
  26. /*标题2*/
  27. .public-second-hand > .title2 {
  28. height: 55px;
  29. }
  30. .public-second-hand > .title2 > span {
  31. color: red;
  32. font-size: 23px;
  33. }
  34. .public-second-hand > .title2 > span ~ a {
  35. padding-left: 20px;
  36. }
  37. .public-second-hand > .title2 > span ~ a:hover {
  38. color: lightcoral;
  39. }
  40. /*商品展示区*/
  41. .public-second-hand > .goods {
  42. height: 440px;
  43. /*转为flex*/
  44. display: flex;
  45. /*flex-flow: row nowrap;*/
  46. }
  47. .public-second-hand > .goods > .goods-list {
  48. padding: 10px;
  49. flex-basis: 800px;
  50. display: flex;
  51. flex-flow: row wrap;
  52. justify-content: space-between;
  53. }
  54. .public-second-hand > .goods > .goods-list > .intro{
  55. width: 178px;
  56. height: 200px;
  57. display: flex;
  58. flex-flow: column nowrap;
  59. justify-content: space-between;
  60. }
  61. .public-second-hand > .goods > .goods-list > .intro img {
  62. border: 1px solid #cccccc;
  63. border-radius: 16px;
  64. }
  65. .public-second-hand > .goods > .goods-list > .intro span:first-of-type {
  66. color: red;
  67. }
  68. .public-second-hand > .goods > .goods-list > .intro > div {
  69. display: flex;
  70. }
  71. .public-second-hand > .goods > .goods-list > .intro span:last-of-type {
  72. color: white;
  73. background-color: #55ce9f;
  74. padding: 0 5px;
  75. margin-left: auto;
  76. }
  77. /*功能快速入口区*/
  78. .public-second-hand > .goods > .quick-entry {
  79. flex-basis: 400px;
  80. padding: 10px;
  81. display: flex;
  82. flex-flow: row wrap;
  83. justify-content: space-between;
  84. }
  85. .public-second-hand > .goods > .quick-entry img {
  86. width: 190px;
  87. height: 130px;
  88. }
  89. .public-second-hand > .goods > .quick-entry > div {
  90. width: 400px;
  91. display:flex;
  92. flex-direction:column;
  93. }
  94. .public-second-hand > .goods > .quick-entry > div img {
  95. width: 393px;
  96. height: 60px;
  97. }

2.下面是评论与回复效果图与代码

效果图

reply

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="stylesheet" href="font/iconfont.css">
  6. <link rel="stylesheet" href="css/public_reply.css">
  7. <title>评论回复</title>
  8. </head>
  9. <body>
  10. <div class="public-reply">
  11. <!-- 评论 -->
  12. <div class="comment">
  13. <h4>我要评论</h4>
  14. <div>
  15. <label for="comment">
  16. <img src="img/user.png" alt="">
  17. </label>
  18. <textarea name="" id="comment">
  19. </textarea>
  20. </div>
  21. <button>发表评论</button>
  22. </div>
  23. <!-- 回复 -->
  24. <div class="reply">
  25. <h3>最新回复</h3>
  26. <div>
  27. <img src="img/user.png" alt="">
  28. <div class="detail">
  29. <span>ad1</span>
  30. <span>留言内容:
  31. php中文网,是一个有温度,有思想的学习平台</span>
  32. <div>
  33. <span>发布于:2019-12-31</span>
  34. <span><i class="iconfont icon-dianzan"></i>回复</span>
  35. </div>
  36. </div>
  37. </div>
  38. <div>
  39. <img src="img/user.png" alt="">
  40. <div class="detail">
  41. <span>ad2</span>
  42. <span>留言内容:
  43. php中文网,是一个有温度,有思想的学习平台</span>
  44. <div>
  45. <span>发表于:2019-12-31</span>
  46. <span><i class="iconfont icon-dianzan"></i>回复</span>
  47. </div>
  48. </div>
  49. </div>
  50. <div>
  51. <img src="img/user.png" alt="">
  52. <div class="detail">
  53. <span>ad23</span>
  54. <span>留言内容:
  55. php中文网,是一个有温度,有思想的学习平台</span>
  56. <div>
  57. <span>发表于:2019-12-31</span>
  58. <span><i class="iconfont icon-dianzan"></i>回复</span>
  59. </div>
  60. </div>
  61. </div>
  62. <div>
  63. <img src="img/user.png" alt="">
  64. <div class="detail">
  65. <span>ad24</span>
  66. <span>留言内容:
  67. php中文网,是一个有温度,有思想的学习平台</span>
  68. <div>
  69. <span>发表于:2019-12-31</span>
  70. <span><i class="iconfont icon-dianzan"></i>回复</span>
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. </body>
  77. </html>

css代码

  1. @import "../public_reset.css";
  2. /*1. 评论区域的样式*/
  3. .public-reply {
  4. /*宽度和高度主它自适应的父元素,这里不要设置*/
  5. padding: 15px;
  6. box-sizing: border-box;
  7. background-color: #fff;
  8. /*弹性布局, 整体垂直排列*/
  9. display: flex;
  10. flex-direction: column;
  11. }
  12. .public-reply img {
  13. box-shadow: 1px 1px 3px #cccccc;
  14. border-radius: 5px;
  15. }
  16. /*评论区整体样式*/
  17. .public-reply > .comment {
  18. display: flex;
  19. flex-direction: column;
  20. }
  21. /*用户头像大小*/
  22. .public-reply img {
  23. width: 60px;
  24. height: 60px;
  25. }
  26. .public-reply > .comment h3 {
  27. padding: 20px 0;
  28. border-top: 1px solid #cccccc;
  29. }
  30. /*设置评论发布区: 头像与按钮的样式*/
  31. .public-reply .comment > div {
  32. padding: 15px;
  33. height: 200px;
  34. /*头像与按钮应该水平排列,转为弹性盒子*/
  35. display: flex;
  36. flex-flow: row nowrap;
  37. }
  38. .public-reply .comment > div img {
  39. /*垂直方向从起始位置显示,这也是默认值,可省略*/
  40. align-self: start;
  41. }
  42. /*设置文本域样式*/
  43. .public-reply .comment > div textarea {
  44. height: 200px;
  45. margin-left: 20px;
  46. resize: none;
  47. /*占据剩余全部空间, flex: 1*/
  48. flex: auto;
  49. }
  50. .publi-reply .comment > div textarea:hover {
  51. box-shadow: 0 0 8px #888;
  52. }
  53. /*自定义发表评论的按钮样式*/
  54. .public-reply .comment > button {
  55. font-size: 14px;
  56. background-color: #f64c59;
  57. border: none;
  58. color: white;
  59. width: 150px;
  60. height: 40px;
  61. /*按钮居右显示,即交叉轴上对齐到结束框*/
  62. align-self: end;
  63. }
  64. .public-reply .comment > button:hover {
  65. background-color: #178cee;
  66. box-shadow: 0 0 5px #888;
  67. }
  68. /*2. 回复区域的样式*/
  69. .publi-reply > .reply {
  70. /*弹性盒子,垂直排列*/
  71. display: flex;
  72. flex-direction: column;
  73. padding: 15px 0;
  74. }
  75. .public-reply > .reply > h3 {
  76. padding: 20px 0;
  77. }
  78. /*回复区整体水平排列(默认值): 头像与回复详情*/
  79. .public-reply > .reply > div {
  80. display: flex;
  81. /*让每条回复之间有一定的间隙*/
  82. margin-top: 30px;
  83. }
  84. /*用户头像垂直居中*/
  85. .public-reply > .reply > div > img {
  86. align-self: center;
  87. }
  88. /*回复详情垂直排列三行*/
  89. .public-reply > .reply > div .detail {
  90. /*回复详情占据水平剩余全部空间*/
  91. flex:auto;
  92. /*转为弹性盒子,且垂直排列*/
  93. display: flex;
  94. flex-direction: column;
  95. margin-left: 20px;
  96. /*必须设置高度, 否则主轴无法产生剩余空间*/
  97. height: 90px;
  98. /*三行文本二端对齐*/
  99. justify-content: space-between;
  100. }
  101. /*将回复点赞按钮,放在最右边*/
  102. .public-reply > .reply > div .detail > div {
  103. /*将发表时间和回复点赞所在容器设置为flex容器,以简化代码*/
  104. display: flex;
  105. flex-direction: row;
  106. /*二端对齐, 实现最终效果*/
  107. justify-content: space-between;
  108. }
  109. .public-reply > .reply > div .detail > div i {
  110. color: red;
  111. font-size: 1.2rem;
  112. margin-right: 5px;
  113. }

3.总结

做这些页面css样式的时候,感觉用了flex布局方便一点,比传统的方便许多,但做的时候我还是遇到问题,主要是样式加不上去,检查才发现问题出在html的div上,感觉布局的时候,太粗心了,以后还要注意一下。

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:近期咱们写了不少页面, 相信以后看到一个页面, 让你快速仿写, 应该不怕了吧
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学