Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1226-二手商品列表与评论与回复
Blogger Information
Blog 13
fans 0
comment 0
visits 10287
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
1226-二手商品列表与评论与回复
Original
641 people have browsed it

二手商品列表

HTML

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="public-headline-demo.css">
  8.     <title>标题组件</title>
  9. </head>
  10. <body>
  11.     <div class="public-headline">
  12.         <span>素材交易</span>
  13.     </div>
  15.     <!-- 标题组件 -->
  16.     <div class="public-headline-demo">
  17.         <!-- 标题 -->
  18.         <div class="title1">
  19.             <a href="">图库</a>
  20.             <span>便宜 方便 安全</span>
  21.         </div>
  22.         <div class="title2">
  23.             <span>热门图库</span>
  24.             <a href="">明星</a>
  25.             <a href="">动图</a>
  26.             <a href="">搞笑</a>
  27.             <a href="">表情包</a>
  28.             <a href="">风景</a>
  29.             <a href="">插画</a>
  30.             <a href="">手绘</a>
  31.             <a href="">名画</a>
  32.         </div>
  33.         <div class="pic">
  34.             <!-- 左侧 -->
  35.             <div class="pic-list">
  36.                 <!-- 图片预览 -->
  37.                 <div class="intro">
  38.                     <a href=""><img src="../../../static/images/11.jpg" alt="" width="180px" height="150px"></a>
  39.                     <a href="">明星</a>
  40.                     <div>
  41.                         <span>&yen;998</span>
  42.                         <span>明星</span>
  43.                     </div>
  44.                 </div>
  45.                 <div class="intro">
  46.                     <a href=""><img src="../../../static/images/11.jpg" alt="" width="180px" height="150px"></a>
  47.                     <a href="">动图</a>
  48.                     <div>
  49.                         <span>&yen;998</span>
  50.                         <span>动图</span>
  51.                     </div>
  52.                 </div>
  53.                 <div class="intro">
  54.                     <a href=""><img src="../../../static/images/11.jpg" alt="" width="180px" height="150px"></a>
  55.                     <a href="">搞笑</a>
  56.                     <div>
  57.                         <span>&yen;998</span>
  58.                         <span>搞笑</span>
  59.                     </div>
  60.                 </div>
  61.                 <div class="intro">
  62.                     <a href=""><img src="../../../static/images/11.jpg" alt="" width="180px" height="150px"></a>
  63.                     <a href="">表情包</a>
  64.                     <div>
  65.                         <span>&yen;998</span>
  66.                         <span>表情包</span>
  67.                     </div>
  68.                 </div>
  69.                 <div class="intro">
  70.                     <a href=""><img src="../../../static/images/11.jpg" alt="" width="180px" height="150px"></a>
  71.                     <a href="">风景</a>
  72.                     <div>
  73.                         <span>&yen;998</span>
  74.                         <span>风景</span>
  75.                     </div>
  76.                 </div>
  77.                 <div class="intro">
  78.                     <a href=""><img src="../../../static/images/11.jpg" alt="" width="180px" height="150px"></a>
  79.                     <a href="">插画</a>
  80.                     <div>
  81.                         <span>&yen;998</span>
  82.                         <span>插画</span>
  83.                     </div>
  84.                 </div>
  85.                 <div class="intro">
  86.                     <a href=""><img src="../../../static/images/11.jpg" alt="" width="180px" height="150px"></a>
  87.                     <a href="">手绘</a>
  88.                     <div>
  89.                         <span>&yen;998</span>
  90.                         <span>手绘</span>
  91.                     </div>
  92.                 </div>
  93.                 <div class="intro">
  94.                     <a href=""><img src="../../../static/images/11.jpg" alt="" width="180px" height="150px"></a>
  95.                     <a href="">名画</a>
  96.                     <div>
  97.                         <span>&yen;998</span>
  98.                         <span>名画</span>
  99.                     </div>
  100.                 </div>
  102.             </div>
  103.             <!-- 右侧 -->
  104.             <div class="ad-list">
  105.                 <a href=""><img src="../../../static/images/ad/1.png" alt=""></a>
  106.                 <a href=""><img src="../../../static/images/ad/2.png" alt=""></a>
  107.                 <a href=""><img src="../../../static/images/ad/3.png" alt=""></a>
  108.                 <a href=""><img src="../../../static/images/ad/4.png" alt=""></a>
  109.                 <div>
  110.                     <a href=""><img src="../../../static/images/ad/image.png" alt=""></a>
  111.                     <a href=""><img src="../../../static/images/ad/ad2.jpg" alt=""></a>
  112.                 </div>
  113.             </div>
  114.         </div>
  115.     </div>
  116. </body>
  117. </html>

CSS

  1. /* 通用样式 */
  2. @import "../public-reset.css";
  3. /* 大标题样式 */
  4. @import "../public-headline/public-headline.css";
  7. .public-headline-demo{
  8.     width: 1200px;
  9.     padding: 10px;
  10.     box-sizing: border-box;
  11.     margin: auto;
  12.     border-radius: 5px;
  13.     border-color: #fff;
  14. }
  16. .public-headline-demo:hover{
  17.     box-shadow: 0 0 5px #888;
  18. }
  20. /* 图库 */
  21. .public-headline-demo > .title1{
  22.     height: 50px;
  23.     border-bottom: 1px solid #ccc;
  24.     box-sizing: border-box;
  25. }
  27. .public-headline-demo > .title1 >a{
  28.     font-size: 23px;
  29.     margin-right: 20px;
  30. }
  32. .public-headline-demo>.title1>span{
  33.     color: red;
  34. }
  36. /* 热门图库 */
  37. .public-headline-demo > .title2{
  38.     height: 55px;
  39.     border-bottom: 1px solid #cdcdcd;
  40.     line-height: 55px;
  41. }
  43. .public-headline-demo>.title2>span{
  44.     color: red;
  45.     font-size: 23px;
  46. }
  47. .public-headline-demo>.title2>span ~a{
  48.     padding-left: 20px;
  49. }
  50. .public-headline-demo>.title2>span ~a:hover{
  51.     color: royalblue;
  52. }
  54. /* 图片展示区 */
  55. .public-headline-demo>.pic{
  56.     height: 440px;
  57.     display: flex;
  58. }
  60. .public-headline-demo>.pic>.pic-list{
  61.     padding: 10px;
  62.     flex-basis: 800px;
  63.     display: flex;
  64.     flex-flow: row wrap;
  65.     justify-content: space-between;
  66. }
  67. .public-headline-demo>.pic>.pic-list>.intro{
  68.     width: 178px;
  69.     height: 200px;
  70.     display: flex;
  71.     flex-flow: column nowrap;
  72.     justify-content: space-between;
  73. }
  74. .public-headline-demo>.pic>.pic-list>.intro img{
  75.     border: 1px solid #ccc;
  76.     border-radius: 5px;
  78. }
  79. .public-headline-demo>.pic>.pic-list>.intro span:first-of-type{
  80.     color: red;
  81. }
  82. .public-headline-demo>.pic>.pic-list>.intro >div{
  83.     display: flex; 
  84. }
  85. .public-headline-demo>.pic>.pic-list>.intro span:last-of-type{
  86. color: white;
  87. background-color: #55ce9f;
  88. padding: 0 5px;
  89. margin-left: auto;
  90. }
  91. /* 广告 */
  92. .public-headline-demo > .pic > .ad-list {
  93.     flex-basis: 400px;
  94.     padding: 10px;
  95.     display: flex;
  96.     flex-flow: row wrap;
  97.     justify-content: space-between;
  98. }
  99. .public-headline-demo > .pic > .ad-list img {
  100.     width: 190px;
  101.     height: 130px;
  102. }
  103. .public-headline-demo > .pic > .ad-list > div {
  104.     width: 400px;
  105.     display: flex;
  106.     flex-direction: column;
  107. }
  108. .public-headline-demo > .pic > .ad-list > div img {
  109.     width: 393px;
  110.     height: 60px;
  111. }

效果图

在这里分享一个坑，原本我右边在谷歌浏览器是不显示图片的（如下图），Edge浏览器就可以，就觉得很神奇，研究发现右边图片放别的路径的就显示，放广告图片就不显示，左边同样不显示广告图片，谷歌浏览器也报错无法加载图片，最后发现是谷歌浏览器的广告拦截插件把ad文件夹的内容直接屏蔽掉了，关闭插件就出现了


评论与回复

HTML

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="../../../static/font/iconfont.css">
  8.     <link rel="stylesheet" href="public-message.css">
  9.     <title>评论回复</title>
  10. </head>
  11. <body>
  12.     <div class="public-message">
  13.         <!-- 评论 -->
  14.         <div class="comment">
  15.             <h4>我要评论</h4>
  16.             <div>
  17.                 <label for="comment">
  18.                     <img src="../../../static/images/user.png" alt="">
  19.                 </label>
  20.                 <textarea name="" id="comment">
  21.                 </textarea>
  22.             </div>
  23.             <button>发表评论</button>
  24.         </div>
  25.         <!-- 回复 -->
  26.         <div class="reply">
  27.             <h3>最新回复</h3>
  28.             <div>
  29.                 <img src="../../../static/images/user.png" alt="">
  30.                 <div class="detail">
  31.                     <span>昵称:<span>admin1</span></span>
  32.                     <span>留言: 这是一条留言内容</span>
  33.                     <div>
  34.                         <span>发布于：2019-12-30</span>
  35.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  36.                     </div>
  37.                 </div>
  38.             </div>
  39.             <div>
  40.                 <img src="../../../static/images/user.png" alt="">
  41.                 <div class="detail">
  42.                     <span>昵称：路人甲</span>
  43.                     <span>留言：这是一条留言内容</span>
  44.                     <div>
  45.                         <span>发表于：2019-12-30</span>
  46.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  47.                     </div>
  48.                 </div>
  49.             </div>
  50.         </div>
  51.     </div>
  52. </body>
  53. </html>

CSS

  1. /* 导入公共样式表 */
  2. @import "../../public/public-reset.css";
  4. .public-message{
  5.     padding: 15px;
  6.     box-sizing: border-box;
  7.     background-color: #eeeeee;
  8.     display: flex;
  9.     flex-direction: column;
  10. }
  12. .public-message img{
  13.     width: 60px;
  14.     height: 60px;
  15.     border-radius: 4px;
  16.     box-shadow: 1px 1px 2px #ccc;
  17. }
  19. .public-message>.comment{
  20.     display: flex;
  21.     flex-direction: column;
  22. }
  23. .public-message>.comment h3{
  24.     padding: 20px 0;
  25.     border-top: 1px solid #ccc;
  26. }
  28. .public-message>.comment>div{
  29.     padding: 15px;
  30.     height: 200px;
  31.     display: flex;
  32.     flex-flow: row nowrap;
  33. }
  34. .public-message>.comment>div img{
  35.     align-self: flex-start;
  36. }
  38. .public-message > .comment > div textarea {
  39.     height: 200px;
  40.     margin-left: 20px;
  41.     resize: none;
  42.     flex: auto;
  43. }
  44. .public-message > .comment > div textarea:hover {
  45.     box-shadow: 0 0 8px #888888;
  46. }
  47. .public-message > .comment > button {
  48.     font-size: 14px;
  49.     background-color: #f64c59;
  50.     border: none;
  51.     color: white;
  52.     width: 150px;
  53.     height: 40px;
  55.     align-self:  end;
  56. }
  58. .public-message > .comment > button:hover {
  59.     background-color: #178cee;
  60.     box-shadow: 0 0 8px #888888;
  61.     cursor: pointer;
  62. }
  64. /*回复区*/
  65. .public-message > .reply {
  66.     display: flex;
  67.     flex-direction: column;
  68.     padding: 15px 0;
  69. }
  71. .public-message > .reply > h3 {
  72.     padding: 20px 0;
  73. }
  75. .public-message > .reply > div {
  76.     display: flex;
  77.     margin-top: 30px;
  78. }
  80. .public-message > .reply > div > img {
  81.     align-self: center;
  82. }
  83. .public-message > .reply > div > .detail {
  84.     flex: auto;
  85.     display: flex;
  86.     flex-direction: column;
  87.     margin-left: 20px;
  88.     height: 90px;
  89.     justify-content: space-between;
  90. }
  91. .public-message > .reply > div > .detail >span >span{
  92.     color: red;
  93. }
  95. .public-message > .reply > div > .detail > div {
  96.     display: flex;
  97.     justify-content: space-between;
  98. }
  100. .public-message > .reply > div > .detail > div i {
  101.     color: red;
  102.     font-size: 1.2rem;
  103.     margin-right: 5px;
  104. }

效果图

思路方法

对组件进行区块的划分
考虑区块中项目的排列方式以及对齐方式
逐步细化元素的样式

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