search

博客列表 >1226作业+二手交易信息、评论与回复完成+10期线上班

1226作业+二手交易信息、评论与回复完成+10期线上班

江川林
江川林原创
2019年12月29日 16:37:55758浏览

朱老师好，作业完成的比较慢，现在才交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. }
上一条：2019-12-27 m.php.cn网站的首页布局(Flex实现)-PHP培训十期下一条：flex项目的6个属性学习总结
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多