search

博客列表 >1226-二手商品列表与评论与回复

1226-二手商品列表与评论与回复


原创
2019年12月30日 23:07:48655浏览

二手商品列表

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. }

效果图

思路方法

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

上一条：学号:572616 -12月27日前端学习总结-用Flex布局写的手机端页面下一条：1227作业-用Flex布局实现m.php.cn移动端页面布局-php培训十期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多