Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1226作业独立完成评论与二手商品
Blogger Information
Blog 30
fans 0
comment 1
visits 21943
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作业独立完成评论与二手商品
Admin
Original
557 people have browsed it
  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字练和写

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