简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >2019-12-26 二手商品列表与评论与回复开发思路及实现-PHP培训十期

2019-12-26 二手商品列表与评论与回复开发思路及实现-PHP培训十期

ys899
ys899原创
2019年12月29日 16:24:40574浏览

1、二手商品列表 组件

首先设计dom结构，分上下结构；
接着写css样式，设计页面元素排版
使用flex排版 按row默认排版，两边对齐
```html code
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="public_second_hand.css">
<title>公共二手交易区组件</title>
</head>

<body>
<!--引入大标题组件-->

<div class="public-headline">
<span>二手交易</span>
</div>

<!--二手交易专区-->

<div class="publi-second-hand">
<!--标题1-->
<div class="title1">
<a href="">抢好货</a>
<span>0低价, 便捷,安全,快速</span>
</div>
<!--标题2-->
<div class="title2">
<span>热门分类</span>
<a href="">美女写真</a>
<a href="">日本美女</a>
<a href="">美国美女</a>
<a href="">国内美女</a>
<a href="">AV美女</a>
</div> 

  1. <!--商品展示区-->
  2. <div class="goods">
  3.     <!--1.左边商品列表-->
  4.     <div class="goods-list">
  5.         <!--商品简介-->
  6.         <div class="intro">
  7.             <a href=""><img src="../../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  8.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  9.             <div>
  10.                 <span>&yen; 333</span>
  11.                 <span>美女</span>
  12.             </div>
  13.         </div>
  14.         <div class="intro">
  15.             <a href=""><img src="../../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  16.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  17.             <div>
  18.                 <span>&yen; 333</span>
  19.                 <span>美女</span>
  20.             </div>
  21.         </div>
  22.         <div class="intro">
  23.             <a href=""><img src="../../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  24.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  25.             <div>
  26.                 <span>&yen; 333</span>
  27.                 <span>美女</span>
  28.             </div>
  29.         </div>
  30.         <div class="intro">
  31.             <a href=""><img src="../../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  32.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  33.             <div>
  34.                 <span>&yen; 333</span>
  35.                 <span>美女</span>
  36.             </div>
  37.         </div>
  38.         <div class="intro">
  39.             <a href=""><img src="../../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  40.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  41.             <div>
  42.                 <span>&yen; 333</span>
  43.                 <span>美女</span>
  44.             </div>
  45.         </div>
  46.         <div class="intro">
  47.             <a href=""><img src="../../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  48.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  49.             <div>
  50.                 <span>&yen; 333</span>
  51.                 <span>美女</span>
  52.             </div>
  53.         </div>
  54.         <div class="intro">
  55.             <a href=""><img src="../../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  56.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  57.             <div>
  58.                 <span>&yen; 333</span>
  59.                 <span>美女</span>
  60.             </div>
  61.         </div>
  62.         <div class="intro">
  63.             <a href=""><img src="../../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  64.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  65.             <div>
  66.                 <span>&yen; 333</span>
  67.                 <span>美女</span>
  68.             </div>
  69.         </div>
  70.     </div>
  71.     <!--2. 右侧的功能快速入口-->
  72.     <div class="quick-entry">
  73.         <a href=""><img src="../../../static/images/ad/1.png" alt=""></a>
  74.         <a href=""><img src="../../../static/images/ad/2.png" alt=""></a>
  75.         <a href=""><img src="../../../static/images/ad/3.png" alt=""></a>
  76.         <a href=""><img src="../../../static/images/ad/4.png" alt=""></a>
  77.         <div>
  78.             <a href=""><img src="../../../static/images/ad/image.png" alt=""></a>
  79.             <a href=""><img src="../../../static/images/ad/ad2.jpg" alt=""></a>
  80.         </div>
  81.     </div>
  82. </div>

</div>
</body>
</html>

  1. ```CSS code
  2. /*样式重置*/
  3. @import "../public_reset.css";
  5. /*大标题组件*/
  6. @import "../public_headline/public-headline.css";
  8. /*二手交易专区的样式表*/
  9. .publi-second-hand {
  10.     width: 1200px;
  11.     padding: 10px;
  12.     box-sizing: border-box;
  13.     margin: auto;
  14.     border-radius: 5px;
  15.     background-color: #fff;
  16. }
  18. .publi-second-hand:hover {
  19.     box-shadow: 0 0 8px #888;
  20. }
  22. /*标题1*/
  23. .publi-second-hand > .title1 {
  24.     height: 50px;
  25.     border-bottom: 1px solid #cccccc;
  26.     box-sizing: border-box;
  27. }
  28. .publi-second-hand > .title1 > a {
  29.     font-size: 23px;
  30.     margin-right: 20px;
  31. }
  32. .publi-second-hand > .title1 > span {
  33.     color: red;
  34. }
  36. /*标题2*/
  37. .publi-second-hand > .title2 {
  38.     height: 55px;
  39. }
  40. .publi-second-hand > .title2 > span {
  41.     color: red;
  42.     font-size: 23px;
  43. }
  44. .publi-second-hand > .title2 > span ~ a {
  45.     padding-left: 20px;
  46. }
  47. .publi-second-hand > .title2 > span ~ a:hover {
  48.     color: lightcoral;
  49. }
  51. /*商品展示区*/
  52. .publi-second-hand > .goods {
  53.     height: 440px;
  54.     /*转为flex*/
  55.     display: flex;
  56.     /*flex-flow: row nowrap;*/
  57. }
  58. .publi-second-hand > .goods > .goods-list {
  59.     padding: 10px;
  60.     flex-basis: 800px;
  62.     display: flex;
  63.     flex-flow: row wrap;
  64.     justify-content: space-between;
  65. }
  66. .publi-second-hand > .goods > .goods-list > .intro{
  67.     width: 178px;
  68.     height: 200px;
  69.     display: flex;
  70.     flex-flow: column nowrap;
  71.     justify-content: space-between;
  72. }
  73. .publi-second-hand > .goods > .goods-list > .intro img {
  74.     border: 1px solid #cccccc;
  75.     border-radius: 5px;
  76. }
  78. .publi-second-hand > .goods > .goods-list > .intro span:first-of-type {
  79.     color: red;
  80. }
  81. .publi-second-hand > .goods > .goods-list > .intro > div {
  82.     display: flex;
  83. }
  84. .publi-second-hand > .goods > .goods-list > .intro span:last-of-type {
  85.     color: white;
  86.     background-color: #55ce9f;
  87.     padding: 0 5px;
  88.     margin-left: auto;
  89. }
  91. /*功能快速入口区*/
  92. .publi-second-hand > .goods > .quick-entry {
  93.     flex-basis: 400px;
  94.     padding: 10px;
  95.     display: flex;
  96.     flex-flow: row wrap;
  97.     justify-content: space-between;
  98. }
  99. .publi-second-hand > .goods > .quick-entry img {
  100.     width: 190px;
  101.     height: 130px;
  102. }
  103. .publi-second-hand > .goods > .quick-entry > div {
  104.     width: 400px;
  105.     display: flex;
  106.     flex-direction: column;
  107. }
  109. .publi-second-hand > .goods > .quick-entry > div img {
  110.     width: 393px;
  111.     height: 60px;
  112. }

效果图

2、评论与回复 组件

首先设计dom结构，分上下结构；
接着写css样式，设计页面元素排版
使用flex排版 按column排版
```html code
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../../static/font/iconfont.css">
<link rel="stylesheet" href="public_comment_reply.css">
<title>评论与回复组件</title>
</head>

<body>

<div class="public-comment-reply">
<!--评论区-->
<div class="comment">
<h3>我要评论</h3>
<div>
<label for="commment">
<img src="../../../static/images/user.png" alt="">
</label>
<textarea name="" id="commment"></textarea>
</div>
<button>发表评论</button>
</div> 

  1. <!--回复区-->
  2. <div class="reply">
  3.     <h3>最新回复</h3>
  4.     <div>
  5.         <img src="../../../static/images/user.png" alt="">
  6.         <div class="detail">
  7.             <span>用户昵称</span>
  8.             <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  9.             <div>
  10.                 <span>2019-12-12 15:34:23发表</span>
  11.                 <span><i class="iconfont icon-dianzan"></i>回复</span>
  12.             </div>
  13.         </div>
  14.     </div>
  15.     <div>
  16.         <img src="../../../static/images/user.png" alt="">
  17.         <div class="detail">
  18.             <span>用户昵称</span>
  19.             <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  20.             <div>
  21.                 <span>2019-12-12 15:34:23发表</span>
  22.                 <span><i class="iconfont icon-dianzan"></i>回复</span>
  23.             </div>
  24.         </div>
  25.     </div>
  26.     <div>
  27.         <img src="../../../static/images/user.png" alt="">
  28.         <div class="detail">
  29.             <span>用户昵称</span>
  30.             <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  31.             <div>
  32.                 <span>2019-12-12 15:34:23发表</span>
  33.                 <span><i class="iconfont icon-dianzan"></i>回复</span>
  34.             </div>
  35.         </div>
  36.     </div>
  37.     <div>
  38.         <img src="../../../static/images/user.png" alt="">
  39.         <div class="detail">
  40.             <span>用户昵称</span>
  41.             <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  42.             <div>
  43.                 <span>2019-12-12 15:34:23发表</span>
  44.                 <span><i class="iconfont icon-dianzan"></i>回复</span>
  45.             </div>
  46.         </div>
  47.     </div>
  49. </div>

</div>
</body>
</html>

  1. ```CSS Code
  2. @import url(../public_reset.css);
  4. .public-comment-reply {
  5.     padding: 15px;
  6.     box-sizing: border-box;
  7.     background-color: #fff;
  8.     display: flex;
  9.     flex-direction: column;
  10. }
  12. .public-comment-reply img {
  13.     width: 60px;
  14.     height: 60px;
  15.     border-radius: 5px;
  16.     box-shadow: 1px 1px 3px #cccccc;
  17. }
  18. .public-comment-reply > .comment {
  19.     display: flex;
  20.     flex-direction: column;
  21. }
  22. .public-comment-reply > .comment h3 {
  23.     padding: 20px 0;
  24.     border-top: 1px solid #cccccc;
  25. }
  27. .public-comment-reply > .comment > div {
  28.     padding: 15px;
  29.     height: 200px;
  30.     display: flex;
  31.     flex-flow: row nowrap;
  32. }
  33. .public-comment-reply > .comment > div img {
  34.     align-self: flex-start;
  35. }
  37. .public-comment-reply > .comment > div textarea {
  38.     height: 200px;
  39.     margin-left: 20px;
  40.     resize: none;
  41.     flex: auto;
  42. }
  43. .public-comment-reply > .comment > div textarea:hover {
  44.     box-shadow: 0 0 8px #888888;
  45. }
  46. .public-comment-reply > .comment > button {
  47.     font-size: 14px;
  48.     background-color: #f64c59;
  49.     border: none;
  50.     color: white;
  51.     width: 150px;
  52.     height: 40px;
  54.     align-self:  end;
  55. }
  57. .public-comment-reply > .comment > button:hover {
  58.     background-color: #178cee;
  59.     box-shadow: 0 0 8px #888888;
  60.     cursor: pointer;
  61. }
  63. /*回复区*/
  64. .public-comment-reply > .reply {
  65.     display: flex;
  66.     flex-direction: column;
  67.     padding: 15px 0;
  68. }
  70. .public-comment-reply > .reply > h3 {
  71.     padding: 20px 0;
  72. }
  74. .public-comment-reply > .reply > div {
  75.     display: flex;
  76.     margin-top: 30px;
  77. }
  79. .public-comment-reply > .reply > div > img {
  80.     align-self: center;
  81. }
  82. .public-comment-reply > .reply > div > .detail {
  83.     flex: auto;
  85.     display: flex;
  86.     flex-direction: column;
  87.     margin-left: 20px;
  88.     height: 90px;
  89.     justify-content: space-between;
  90. }
  92. .public-comment-reply > .reply > div > .detail > div {
  93.     display: flex;
  94.     justify-content: space-between;
  95. }
  97. .public-comment-reply > .reply > div > .detail > div i {
  98.     color: red;
  99.     font-size: 1.2rem;
  100.     margin-right: 5px;
  101. }

效果图

上一条：composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器 - 20191227下一条：1226作业独立完成评论与二手商品
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多