Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1226作业+二手交易信息、评论与回复完成+10期线上班
Blogger Information
Blog 25
fans 1
comment 1
visits 17351
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作业+二手交易信息、评论与回复完成+10期线上班
江川林
Original
759 people have browsed it

朱老师好，作业完成的比较慢，现在才交1226的作业

以下二手交易完成图片

细节上没有处理好，但是后面我下来会慢慢完善好的

以下是二手交易信息代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>公共二手交易区组件</title>
  6.     <link rel="stylesheet" href="dome1.css">
  7. </head>
  8. <body>
  9. <!--整体-->
  10. <div class="public-head">
  11. <!--    公共二手交易分为两块：①标题、②交易内容-->
  12. <!--    标题块-->
  13.     <div class="public-option">
  14.         <span>二手交易</span>
  15.     </div>
  16. <!--    交易内容块：①广告通知、②分类、③商品列表、④快速入口-->
  17.     <div class="public-comment">
  18. <!--        广告通知-->
  19.         <div class="public-comment-ads">
  20.             <a href="">抢好货</a>
  21.             <span>0低价，便捷，安全，快速</span>
  22.         </div>
  23.         <!--            热门分类-->
  24.         <div class="public-comment-sort">
  25.             <span>热门分类</span>
  26.             <a href="">美女写真</a>
  27.             <a href="">日本美女</a>
  28.             <a href="">国内美女</a>
  29.             <a href="">美国美女</a>
  30.             <a href="">AV美女</a>
  31.         </div>
  32.         <div class="public-comment-picture">
  33.             <div class="public-list">
  34.                 <div class="public-list2">
  35.                         <div class="public-comment-picture-list">
  36.                             <img src="1225/static/images/shop/shop1.jpg" alt=""  >
  37.                             <a href="">美女性感写真海报艺术装饰</a>
  38.                                 <div>
  39.                             <span class="public-comment-picture-lis-money">&yen;333</span>
  40.                             <span class="public-comment-picture-lis-beautiful">美女</span>
  41.                                 </div>
  42.                         </div>
  43.                         <div class="public-comment-picture-list">
  44.                             <img src="1225/static/images/shop/shop1.jpg" alt=""  >
  45.                             <a href="">美女性感写真海报艺术装饰</a>
  46.                             <div>
  47.                                 <span class="public-comment-picture-lis-money">&yen;333</span>
  48.                                 <span class="public-comment-picture-lis-beautiful">美女</span>
  49.                             </div>
  50.                         </div>
  51.                         <div class="public-comment-picture-list">
  52.                             <img src="1225/static/images/shop/shop1.jpg" alt=""  >
  53.                             <a href="">美女性感写真海报艺术装饰</a>
  54.                             <div>
  55.                                 <span class="public-comment-picture-lis-money">&yen;333</span>
  56.                                 <span class="public-comment-picture-lis-beautiful">美女</span>
  57.                             </div>
  58.                         </div>
  59.                         <div class="public-comment-picture-list">
  60.                             <img src="1225/static/images/shop/shop1.jpg" alt=""  >
  61.                             <a href="">美女性感写真海报艺术装饰</a>
  62.                             <div>
  63.                                 <span class="public-comment-picture-lis-money">&yen;333</span>
  64.                                 <span class="public-comment-picture-lis-beautiful">美女</span>
  65.                             </div>
  66.                         </div>
  67.                         <div class="public-comment-picture-list">
  68.                             <img src="1225/static/images/shop/shop1.jpg" alt=""  >
  69.                             <a href="">美女性感写真海报艺术装饰</a>
  70.                             <div>
  71.                                 <span class="public-comment-picture-lis-money">&yen;333</span>
  72.                                 <span class="public-comment-picture-lis-beautiful">美女</span>
  73.                             </div>
  74.                         </div>
  75.                         <div class="public-comment-picture-list">
  76.                             <img src="1225/static/images/shop/shop1.jpg" alt=""  >
  77.                             <a href="">美女性感写真海报艺术装饰</a>
  78.                             <div>
  79.                                 <span class="public-comment-picture-lis-money">&yen;333</span>
  80.                                 <span class="public-comment-picture-lis-beautiful">美女</span>
  81.                             </div>
  82.                         </div>
  83.                         <div class="public-comment-picture-list">
  84.                             <img src="1225/static/images/shop/shop1.jpg" alt=""  >
  85.                             <a href="">美女性感写真海报艺术装饰</a>
  86.                             <div>
  87.                                 <span class="public-comment-picture-lis-money">&yen;333</span>
  88.                                 <span class="public-comment-picture-lis-beautiful">美女</span>
  89.                             </div>
  90.                         </div>
  91.                         <div class="public-comment-picture-list">
  92.                             <img src="1225/static/images/shop/shop1.jpg" alt=""  >
  93.                             <a href="">美女性感写真海报艺术装饰</a>
  94.                             <div>
  95.                                 <span class="public-comment-picture-lis-money">&yen;333</span>
  96.                                 <span class="public-comment-picture-lis-beautiful">美女</span>
  97.                             </div>
  98.                         </div>
  99.                 </div>
  100.                 <div class="public-comment-picture-quickly">
  101.                     <div class="public-comment-picture-quickly-1">
  102.                         <img src="1225/static/images/ad/1.png" alt="">
  103.                         <img src="1225/static/images/ad/2.png" alt="">
  104.                         <img src="1225/static/images/ad/3.png" alt="">
  105.                         <img src="1225/static/images/ad/4.png" alt="">
  106.                     </div>
  107.                     <img src="1225/static/images/ad/image.png" alt="">
  108.                     <img src="1225/static/images/ad/ad2.jpg" alt="">
  109.                 </div>
  110.             </div>
  111.             </div>
  112.     </div>
  113. </div>
  114. </body>
  115. </html>

以下是CSS样式表
@import “public_initial.css”;
.public-comment {
width: 1200px;
padding: 10px;
box-sizing: border-box;
margin: auto;
background-color: #fff;
border-radius: 5px;
}
.public-comment :hover {
box-shadow: 0 0 8px #888;
}
.public-comment > .public-comment-ads {
height: 40px;
border-bottom: 1px solid #555555;
}
/广告通知栏/
.public-comment > .public-comment-ads a {
font-size: 20px;
padding: 5px 0 5px 20px;
box-sizing: border-box;
}
.public-comment > .public-comment-ads span {
color: red;
margin-left:20px ;
}
/热门分类/
.public-comment > .public-comment-sort {
height: 50px;
margin-left: 10px;
}
.public-comment > .public-comment-sort span {
font-size: 25px;
color: red;
padding: 10px;
}
.public-comment > .public-comment-sort a {
padding: 0 10px;
color: black;
}
.public-comment > .public-comment-sort a:hover {
color: red;
}
.public-comment-picture {
width: 1200px;
height: 500px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.public-list {
width: 1200px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
.public-list2 {
display: flex;
flex-flow: row wrap;

}
.public-comment-picture-list {
width: 200px;
height: 150px;
padding: 10px;

  1. display: flex;
  2. flex-flow: column nowrap;
  3. flex: 1;

}
.public-comment-picture-list a {
padding-top: 10px;
}
.public-comment-picture-list div {
display: flex;
padding: 10px;
justify-content: space-between;
flex: 1;
}
.public-comment-picture-list div span:last-of-type {
background-color: lawngreen;
}
.public-comment-picture-list img {
padding: 0;
margin: 0;
width: 176px;
height: 120px;
align-items: center;
}
.public-list2 {
display: flex;

}

.public-comment-picture > .public-comment-picture-quickly {
height: 400px;
width: 450px;
display: flex;
flex-direction: column;
}
.public-comment-picture-quickly-1 {
display: flex;
flex-wrap: wrap;
margin: 5px;
}

以下是评论与回复完成图片

以下是评论与回复代码
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>comment与reply</title>
<link rel="stylesheet" href="dome2.css">
<link rel="stylesheet" href="1225/static/font/iconfont.css">
</head>
<body>
<!-- 评论与回复-->
<div class="comment-reply">
<!-- 评论-->
<div class="comment">
<h3>我要评论</h3>
<div>
<label for="comment">
<img src="1225/static/images/ad/1.png" alt="">
</label>
<textarea name="comment" id="comment" ></textarea>
</div>
<button>发表评论</button>
</div>
<!-- 回复-->
<div class="reply">
<h3>最新回复</h3>
<div class="user">
<img src="1225/static/images/ad/1.png" alt="">
<div class="detail">
<span>用户昵称</span>
<span>留言内容：php中文网,是一个有温度,有思想的学习平台</span>
<div>
<span>2019-12-12 15:34:23发表</span>
<span class="iconfont icon-dianzan">点赞</span>
</div>
</div>
</div>
<div class="user">
<img src="1225/static/images/ad/1.png" alt="">
<div class="detail">
<span>用户昵称</span>
<span>留言内容：php中文网,是一个有温度,有思想的学习平台</span>
<div>
<span>2019-12-12 15:34:23发表</span>
<span class="iconfont icon-dianzan">点赞</span>
</div>
</div>
</div>
<div class="user">
<img src="1225/static/images/ad/1.png" alt="">
<div class="detail">
<span>用户昵称</span>
<span>留言内容：php中文网,是一个有温度,有思想的学习平台</span>
<div>
<span>2019-12-12 15:34:23发表</span>
<span class="iconfont icon-dianzan">点赞</span>
</div>
</div>
</div>
<div class="user">
<img src="1225/static/images/ad/1.png" alt="">
<div class="detail">
<span>用户昵称</span>
<span>留言内容：php中文网,是一个有温度,有思想的学习平台</span>
<div>
<span>2019-12-12 15:34:23发表</span>
<span class="iconfont icon-dianzan">点赞</span>
</div>
</div>
</div>
</div>
</div>

</body>
</html>

以下是评论与回复CSS样式表

  1. * {
  2.     padding: 0;
  3.     margin: 0;
  4.     /*outline: 1px dashed red;*/
  5. }
  7. .comment-reply {
  8.     padding: 15px;
  9.     box-sizing: border-box;
  10.     background-color: #fff;
  11.     display: flex;
  12.     flex-flow: column nowrap;
  13. }
  15. .comment-reply img {
  16.     height: 60px;
  17.     width: 60px;
  18.     border-radius: 5px;
  19.     box-shadow: 0 0 5px #cccccc;
  20. }
  22. .comment-reply > .comment {
  23.     display: flex;
  24.     flex-direction: column;
  25. }
  27. .comment-reply > .comment h3 {
  28.     padding: 20px 0;
  29.     border-top: 1px solid #555555;
  30. }
  32. .comment-reply > .comment div {
  33.     height: 200px;
  34.     padding: 10px;
  35.     display: flex;
  36.     flex-flow: row nowrap;
  37. }
  39. .comment-reply > .comment > div img  {
  40.     align-self: flex-start;
  41. }
  42. .comment-reply > .comment div textarea {
  43.     height: 200px;
  44.     flex: auto;
  45.     margin-left: 20px;
  46.     resize: none;
  47. }
  48. .comment-reply > .comment button {
  49.     font-size: 14px;
  50.     width: 150px;
  51.     height: 40px;
  52.     border: none;
  53.     background-color: red;
  54.     color: white;
  55.     align-self: end;
  56. }
  58. .reply {
  59.     display: flex;
  60.     flex-flow: column nowrap;
  61.     flex: 1;
  62. }
  64. .reply h3 {
  65.     padding: 20px 0;
  66. }
  67. .user {
  68.     display: flex;
  69.     flex-grow: 1;
  70. }
  71. .user > .detail {
  72.     margin-left: 20px;
  73.     display: flex;
  74.     flex-direction: column;
  75.     align-content: center;
  76.     flex: 1;
  77. }
  79. .user > .detail span {
  80.     padding: 10px 0;
  81. }
  82. .user > .detail > div {
  83.     display: flex;
  84.     justify-content: space-between;
  85. }
  87. .user > .detail > div > .iconfont {
  88.     color: red;
  89. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看得出, 是自己亲自动手写的, 没有多过的抄老师教学代码, 非常不容易, 尽管页面有点丑陋, 但毕竟是自己亲生骨肉, 为你打call
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