search

博客列表 >1226作业独立完成评论与二手商品

1226作业独立完成评论与二手商品

Admin
Admin原创
2019年12月27日 19:53:59558浏览
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <link rel="stylesheet" type="text/css" href="../public-reset.css">
  7.     <link rel="stylesheet" type="text/css" href="public_second_hand.css">
  8. </head>
  9. <body>
  10.     <div class="public-second-hand">
  11.         <div class="title1">
  12.             <a href="#">抢好货</a>
  13.             <span>0低价,便捷,安全,快速</span>
  14.         </div>
  15.         <div class="title2">
  16.             <span>热门分类</span>
  17.             <a href="#">美女写真</a>
  18.             <a href="#">日本美女</a>
  19.             <a href="#">美国美女</a>
  20.             <a href="#">国内美女</a>
  21.             <a href="#">Av美女</a>
  22.         </div>
  23.         <div class="goods">
  24.             <div class="goods-list">
  25.                 <div class="intro">
  26.                     <a href="#"><img src="../../static/images/shop/shop8.jpg" width="176" height="120"></a>
  27.                     <a href="#">别看了反正这里放的都是同一个美女</a>
  28.                     <div>
  29.                         <span>&yen;333</span>
  30.                         <span>美女</span>
  31.                     </div>
  32.                 </div>
  33.                 <div class="intro">
  34.                     <a href="#"><img src="../../static/images/shop/shop8.jpg" width="176" height="120"></a>
  35.                     <a href="#">别看了反正这里放的都是同一个美女</a>
  36.                     <div>
  37.                         <span>&yen;333</span>
  38.                         <span>美女</span>
  39.                     </div>
  40.                 </div>
  41.                 <div class="intro">
  42.                     <a href="#"><img src="../../static/images/shop/shop8.jpg" width="176" height="120"></a>
  43.                     <a href="#">别看了反正这里放的都是同一个美女</a>
  44.                     <div>
  45.                         <span>&yen;333</span>
  46.                         <span>美女</span>
  47.                     </div>
  48.                 </div>
  49.                 <div class="intro">
  50.                     <a href="#"><img src="../../static/images/shop/shop8.jpg" width="176" height="120"></a>
  51.                     <a href="#">别看了反正这里放的都是同一个美女</a>
  52.                     <div>
  53.                         <span>&yen;333</span>
  54.                         <span>美女</span>
  55.                     </div>
  56.                 </div>
  57.                 <div class="intro">
  58.                     <a href="#"><img src="../../static/images/shop/shop8.jpg" width="176" height="120"></a>
  59.                     <a href="#">别看了反正这里放的都是同一个美女</a>
  60.                     <div>
  61.                         <span>&yen;333</span>
  62.                         <span>美女</span>
  63.                     </div>
  64.                 </div>
  65.                 <div class="intro">
  66.                     <a href="#"><img src="../../static/images/shop/shop8.jpg" width="176" height="120"></a>
  67.                     <a href="#">别看了反正这里放的都是同一个美女</a>
  68.                     <div>
  69.                         <span>&yen;333</span>
  70.                         <span>美女</span>
  71.                     </div>
  72.                 </div>
  73.                 <div class="intro">
  74.                     <a href="#"><img src="../../static/images/shop/shop8.jpg" width="176" height="120"></a>
  75.                     <a href="#">别看了反正这里放的都是同一个美女</a>
  76.                     <div>
  77.                         <span>&yen;333</span>
  78.                         <span>美女</span>
  79.                     </div>
  80.                 </div>
  81.                 <div class="intro">
  82.                     <a href="#"><img src="../../static/images/shop/shop8.jpg" width="176" height="120"></a>
  83.                     <a href="#">别看了反正这里放的都是同一个美女</a>
  84.                     <div>
  85.                         <span>&yen;333</span>
  86.                         <span>美女</span>
  87.                     </div>
  88.                 </div>
  89.             </div>
  90.             <div class="quick-entry">
  91.                 <a href="#"><img src="../../static/images/ad/1.png" alt=""></a>
  92.                 <a href="#"><img src="../../static/images/ad/2.png" alt=""></a>
  93.                 <a href="#"><img src="../../static/images/ad/3.png" alt=""></a>
  94.                 <a href="#"><img src="../../static/images/ad/4.png" alt=""></a>
  95.                 <div>
  96.                     <a href="#"><img src="../../static/images/ad/image.png" alt=""></a>
  97.                     <a href="#"><img src="../../static/images/ad/ad2.jpg" alt=""></a>
  98.                 </div>
  99.             </div>
  100.         </div>
  101.     </div>
  102. </body>
  103. </html>
  1. .public-second-hand{
  2.     width: 1200px;
  3.     padding: 10px;
  4.     box-sizing: border-box;
  5.     border-radius: 5px;
  6.     margin: auto;
  7. }
  8. .public-second-hand:hover{
  9.     box-shadow: 0 0 8px #888888;
  10. }
  11. /*开始安排第一个标题*/
  12. .public-second-hand > .title1{
  13.     height: 46px;
  14.     border-bottom: 1px solid gray;
  15.     box-sizing: border-box;
  16. }
  17. .public-second-hand > .title1 > a{
  18.     font:28px/1 '微软雅黑';
  19.     font-weight: bold;
  20.     padding-right: 20px;
  21.     color: #888888;
  22. }
  23. .public-second-hand > .title1 > span{
  24.     font:16px/1 '微软雅黑';
  25.     color: red;
  26. }
  27. .public-second-hand > .title2{
  28.     height: 46px;
  29.     border-bottom: 1px solid #efefef;
  30.     box-sizing: border-box;
  31. }
  32. .public-second-hand > .title2 > span{
  33.     font:30px/46px '微软雅黑';
  34.     padding-right: 20px;
  35.     color: red;
  36. }
  37. .public-second-hand > .title2 > a{
  38.     font:16px/46px '微软雅黑';
  39. }
  40. .public-second-hand > .goods{
  41.     height: 440px;
  42.     display: flex;
  43. }
  44. .public-second-hand > .goods > .goods-list{
  45.     flex-basis: 800px;
  46.     padding: 10px;
  47.     box-sizing: border-box;
  48.     display: flex;
  49.     flex-flow: row wrap;
  50.     justify-content: space-between;
  51. }
  52. .public-second-hand > .goods > .goods-list > .intro{
  53.     width: 178px;
  54.     height: 200px;
  55.     display: flex;
  56.     flex-flow:column nowrap;
  57.     justify-content:space-between;
  58. }
  59. .public-second-hand > .goods > .goods-list >.intro > div{
  60.     display: flex;
  61. }
  62. .public-second-hand > .goods > .goods-list > .intro > div span:first-child{
  63.     color: red;
  64. }
  65. .public-second-hand > .goods > .goods-list > .intro > div span:last-child{
  66.     color: white;
  67.     padding:0 5px;
  68.     background: rgba(85, 206, 159);
  69.     /*让标签右边的方法一*/
  70.     /*方法2再60行处使用justify-content*/
  71.     margin-left: auto;
  72. }
  73. /*快速入口*/
  74. .public-second-hand > .goods > .quick-entry{
  75.     flex-basis: 400px;
  76.     padding: 10px;
  77.     box-sizing: border-box;
  78.     display: flex;
  79.     justify-content: space-between;
  80.     flex-flow: row wrap;
  81. }
  82. .public-second-hand > .goods > .quick-entry > div{
  83.     display: flex;
  84.     flex-direction: column;
  85.     justify-content: space-between;
  86. }

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" type="text/css" href="../public-reset.css">
  7.     <link rel="stylesheet" type="text/css" href="public_comment_reply.css">
  8. </head>
  9. <body>
  10.     <div class="public-comment-reply">
  11.         <div class="comment">
  12.             <h3>我要评论</h3>
  13.             <div>
  14.                 <label for="pl"><img src="../../static/images/user.png"></label>
  15.                 <textarea id="pl"></textarea>
  16.             </div>
  17.             <button>提交评论</button>
  18.         </div>
  19.         <div class="reply">
  20.             <h3>最新回复</h3>
  21.             <div>
  22.                 <img src="../../static/images/user.png">
  23.                 <div class="detail">
  24.                     <span>用户昵称</span>
  25.                     <span>留言内容噢你知不知道呢？</span>
  26.                     <div>
  27.                         <time>2019年12月27日18点16分</time>
  28.                         <span><i></i>回复</span>
  29.                     </div>
  30.                 </div>
  31.             </div>
  32.             <div>
  33.                 <img src="../../static/images/user.png">
  34.                 <div class="detail">
  35.                     <span>用户昵称</span>
  36.                     <span>留言内容噢你知不知道呢？</span>
  37.                     <div>
  38.                         <time>2019年12月27日18点16分</time>
  39.                         <span><i></i>回复</span>
  40.                     </div>
  41.                 </div>
  42.             </div>
  43.             <div>
  44.                 <img src="../../static/images/user.png">
  45.                 <div class="detail">
  46.                     <span>用户昵称</span>
  47.                     <span>留言内容噢你知不知道呢？</span>
  48.                     <div>
  49.                         <time>2019年12月27日18点16分</time>
  50.                         <span><i></i>回复</span>
  51.                     </div>
  52.                 </div>
  53.             </div>
  54.             <div>
  55.                 <img src="../../static/images/user.png">
  56.                 <div class="detail">
  57.                     <span>用户昵称</span>
  58.                     <span>留言内容噢你知不知道呢？</span>
  59.                     <div>
  60.                         <time>2019年12月27日18点16分</time>
  61.                         <span><i></i>回复</span>
  62.                     </div>
  63.                 </div>
  64.             </div>
  65.         </div>
  66.     </div>
  67. </body>
  68. </html>
  1. .public-comment-reply{
  2.     padding:15px;
  3.     border-top: 1px solid #888888;
  4.     box-sizing: border-box;
  5.     display: flex;
  6.     flex-direction: column;
  7. }
  8. .public-comment-reply > .comment > h3{
  9.     border-top: 1px solid #888888;
  10.     color: #888888;
  11.     height: 60px;
  12.     line-height: 60px;
  13. }
  14. .public-comment-reply img{
  15.     width: 75px;
  16.     height: 75px;
  17.     box-shadow: 3px 3px 4px #888888;
  18.     border-radius: 5px;
  19. }
  20. .public-comment-reply > .comment > div{
  21.     display: flex;
  22.     padding: 15px;
  23.     height: 200px;
  24. }
  25. .public-comment-reply > .comment > div > textarea{
  26.     height: 200px;
  27.     margin-left: 20px;
  28.     resize: none;
  29.     flex: auto;
  30. }
  31. .public-comment-reply > .comment > div > textarea:hover{
  32.         box-shadow: 0 0 5px #888888;
  33. }
  34. .public-comment-reply > .comment > button{
  35.     display: block;
  36.     padding: 10px 48px;
  37.     margin-left: auto;
  38.     background: rgb(246, 76, 89);
  39.     border:none;
  40.     color: white;
  41. }
  42. .public-comment-reply > .comment > button:hover{
  43.     background: rgb(23, 140, 238);
  44.     box-shadow: 0 0 5px #888888;
  45. }
  46. .public-comment-reply > .reply{
  47.     display: flex;
  48.     flex-direction: column;
  49.     padding:15px 0;
  50. }
  51. .public-comment-reply > .reply > h3{
  52.     color: #888888;
  53.     height: 60px;
  54.     line-height: 60px;
  55. }
  56. .public-comment-reply > .reply > div{
  57.     display: flex;
  58.     margin-top: 20px;
  59. }
  60. .public-comment-reply > .reply > div > .detail{
  61.     flex:auto;
  62.     margin-left: 20px;
  63.     height: 90px;
  64.     display: flex;
  65.     flex-direction: column;
  66.     justify-content: space-between;
  67. }
  68. .public-comment-reply > .reply > div > .detail > div{
  69.     display: flex;
  70.     justify-content: space-between;
  71. }


思路还是很简单的你可以理解为切豆腐一样，画一下就知道要怎么布局了！


画完思路图后，你就可以更具所学的知识先填充内容，再写样式。你可以和老师有出入，毕竟完成任务的方法不止一种，但你必须去写！前端就2字练和写

上一条：2019-12-26 二手商品列表与评论与回复开发思路及实现-PHP培训十期下一条：2019年12月26日 作业 flex弹性盒子实战：“二手商品交易”+“评论与回复”
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多