Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS基础flex实战二手商品列表、评论与回复-PHP培训十期线上班 学号：510251 12月26日作业
Blogger Information
Blog 119
fans 3
comment 1
visits 94596
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
CSS基础flex实战二手商品列表、评论与回复-PHP培训十期线上班 学号：510251 12月26日作业
赵大叔
Original
834 people have browsed it

flex项目实战

flex项目实战一-公共二手交易区

1、大标题

引用大标题组件：

复制html代码 导入CSS样式

2、二手交易区

2.1 标题1

<a>链接 + <span>文本

2.2 标题2

<span>文本 +5个<a>链接

2.2 商品展示区

2.2.1 商品列表

商品列表中商品简介分为：
1.可点击图片<a>+<img>
2.可点击文本<a>
3.价格、标签两个元素放一个div中，水平排列
PS：此三项目垂直排列

2.2.2 功能入口

1.四张可点击图片<a>+<img>水平排列
2.div内两张可点击图片<a>+<img>垂直排列
PS 此两项目垂直排列

flex项目实战一-公共二手交易区HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public_second_hand.css">
  6.     <title>公共二手交易区组件</title>
  7. </head>
  8. <body>
  10. <!--引入大标题组件，复制代码 -->
  11. <div class="public-headerline">
  12.     <span>二手交易</span>
  13. </div>
  14. <!--二手交易区-->
  15. <div class="public-second-hand">
  16. <!--    标题1-->
  17.     <div class="title1">
  18.         <a href="">抢好货</a>
  19.         <span>0低价，便捷，安全，快速</span>
  20.     </div>
  21. <!--    标题2-->
  22.     <div class="title2">
  23.         <span>热门分类</span>
  24.         <a href="">美女写真</a>
  25.         <a href="">日本美女</a>
  26.         <a href="">美国美女</a>
  27.         <a href="">国内美女</a>
  28.         <a href="">AV美女</a>
  29.     </div>
  30. <!--    商品展示区-->
  31.     <div class="goods">
  32. <!--        商品列表-->
  33.         <div class="goods-list">
  34. <!--            商品简介-->
  35.             <div class="intro">
  36.                 <a href=""><img src="../../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  37.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  38.                 <div>
  39.                     <span>¥ 333</span>
  40.                     <span>美女</span>
  41.                 </div>
  42.             </div>
  43.             <div class="intro">
  44.                 <a href=""><img src="../../../static/images/shop/shop2.jpg" alt="" width="176" height="120"></a>
  45.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  46.                 <div>
  47.                     <span>¥ 333</span>
  48.                     <span>美女</span>
  49.                 </div>
  50.             </div>
  51.             <div class="intro">
  52.                 <a href=""><img src="../../../static/images/shop/shop3.jpg" alt="" width="176" height="120"></a>
  53.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  54.                 <div>
  55.                     <span>¥ 333</span>
  56.                     <span>美女</span>
  57.                 </div>
  58.             </div>
  59.             <div class="intro">
  60.                 <a href=""><img src="../../../static/images/shop/shop4.jpg" alt="" width="176" height="120"></a>
  61.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  62.                 <div>
  63.                     <span>¥ 333</span>
  64.                     <span>美女</span>
  65.                 </div>
  66.             </div>
  67.             <div class="intro">
  68.                 <a href=""><img src="../../../static/images/shop/shop5.jpg" alt="" width="176" height="120"></a>
  69.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  70.                 <div>
  71.                     <span>¥ 333</span>
  72.                     <span>美女</span>
  73.                 </div>
  74.             </div>
  75.             <div class="intro">
  76.                 <a href=""><img src="../../../static/images/shop/shop6.jpg" alt="" width="176" height="120"></a>
  77.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  78.                 <div>
  79.                     <span>¥ 333</span>
  80.                     <span>美女</span>
  81.                 </div>
  82.             </div>
  83.             <div class="intro">
  84.                 <a href=""><img src="../../../static/images/shop/shop7.jpg" alt="" width="176" height="120"></a>
  85.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  86.                 <div>
  87.                     <span>¥ 333</span>
  88.                     <span>美女</span>
  89.                 </div>
  90.             </div>
  91.             <div class="intro">
  92.                 <a href=""><img src="../../../static/images/shop/shop8.jpg" alt="" width="176" height="120"></a>
  93.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  94.                 <div>
  95.                     <span>¥ 333</span>
  96.                     <span>美女</span>
  97.                 </div>
  98.             </div>
  99.         </div>
  100. <!--        右侧功能区快速入口-->
  101.         <div class="quick-entry">
  102.             <a href=""><img src="../../../static/images/ad/1.png" alt=""></a>
  103.             <a href=""><img src="../../../static/images/ad/1.png" alt=""></a>
  104.             <a href=""><img src="../../../static/images/ad/1.png" alt=""></a>
  105.             <a href=""><img src="../../../static/images/ad/1.png" alt=""></a>
  106.             <div>
  107.                 <a href=""><img src="../../../static/images/ad/image.png" alt=""></a>
  108.                 <a href=""><img src="../../../static/images/ad/ad2.jpg" alt=""></a>
  109.             </div>
  111.         </div>
  113.     </div>
  115. </div>
  117. </body>
  118. </html>

flex项目实战一-公共二手交易区CSS代码

  1. /*样式重置*/
  2. @import "../public_reset.css";
  4. /*引入大标题组件样式 */
  5. @import "../public_headline/public_headerline.css";
  7. /*二手区基本样式*/
  8. .public-second-hand {
  9.     width: 1200px;
  10.     padding: 10px;
  11.     /*居中*/
  12.     margin: auto;
  13.     box-sizing: border-box;
  14.     /*阴影*/
  15.     border-radius: 5px;
  16.     background-color: #ffffff;
  17. }
  18. 鼠标悬停样式
  19. .public-second-hand:hover{
  20.     box-shadow: 0 0 8px #888;
  21. }
  23. /*标题1*/
  24. .pubic-second-hand > title1{
  25.     height: 50px;
  26.     box-sizing: border-box;
  27.     /*下边框，solid实线*/
  28.     border-bottom: 1px solid #cccccc;
  29. }
  31. .public-second-hand > title1 > a{
  32.     font-size: 23px;
  33.     /*抢好货右边距*/
  34.     margin-right: 20px;
  35. }
  37. .public-second-hand > .title1 > span{
  38.     /*span内文本颜色*/
  39.     color: red;
  40. }
  42. /*标题2*/
  43. .public-second-hand > .title2{
  44.     height: 55px;
  45. }
  47. .public-second-hand > .title2 > span{
  48.     font-size: 23px;
  49.     color: red;
  50. }
  52. .public-second-hand > .title2 > span ~a{
  53.     /*标签间间隔*/
  54.     padding-left: 20px;
  55. }
  57. /*商品展示区*/
  58. .public-second-hand>.goods{
  59.     height: 440px;
  60.     display: flex;
  61. }
  63. /*商品列表*/
  64. .public-second-hand>.goods>.goods-list{
  65.     padding: 10px;
  66.     /*项目宽度*/
  67.     flex-basis: 800px;
  68.     display: flex;
  69.     flex-flow: row wrap;
  70.     /*项目主轴两端对齐*/
  71.     justify-content: space-between;
  72. }
  74. .public-second-hand>.goods>.goods-list>.intro{
  75.     width: 178px;
  76.     height: 200px;
  77.     display: flex;
  78.     flex-flow: column nowrap;
  79.     justify-content: space-between;
  80. }
  82. .public-second-hand>.goods>.goods-list>.intro img{
  83.     /*边框*/
  84.     border: 1px solid #cccccc;
  85.     /*圆角*/
  86.     border-radius: 5px;
  87. }
  89. .public-second-hand>.goods>.goods-list>.intro span:first-of-type{
  90.     /*价格颜色*/
  91.     color: red;
  92. }
  94. .public-second-hand>.goods>.goods-list>.intro > div{
  95.     display: flex;
  96. }
  98. .public-second-hand>.goods>.goods-list>.intro span:last-of-type{
  99.     /*美女文字标签*/
  100.     color: white;
  101.     background-color: #55ce9f;
  102.     padding: 0 5px;
  103.     margin-left: auto;
  104. }
  106. .public-second-hand>.goods>.quick-entry{
  107.     flex-basis: 400px;
  108.     padding: 10px;
  109.     display: flex;
  110.     flex-flow: row wrap;
  111.     justify-content: space-between;
  112. }
  114. .public-second-hand>.goods>.quick-entry img{
  115.     width: 190px;
  116.     height: 130px;
  117. }
  119. .public-second-hand>.goods>.quick-entry > div{
  120.     width: 400px;
  121.     display: flex;
  122.     flex-direction: column;
  123. }
  125. .public-second-hand>.goods>.quick-entry > div img{
  126.     width: 393px;
  127.     height: 60px;
  128. }

flex项目实战一-公共二手交易区效果图

flex项目实战二——评论与发贴

1、评论区

1.1 标题

<h3>标题

1.2 文本框

头像img
文本域textarea
作为一个<div>块，绑定label,实现点击自动焦点

1.3 提交按钮

<button>

2、回复区

2.1 标题

<h3>标题

2.2

头像<img>和 1个<div>块，放1个div块中水平排列。此<div>块又包含两个<span>文本和1个<div>块垂直排列。最后这个<div>中又包含一个<span>文本和一个字体图标，水平排列。

flex项目实战二——评论与发贴HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. <!--    导入字体图标-->
  6.     <link rel="stylesheet" href="../../../static/font/iconfont.css">
  7.     <link rel="stylesheet" href="public_comment_reply.css">
  8.     <title>评论发帖</title>
  9. </head>
  10. <body>
  11. <div class="public-comment-reply">
  12.     <div class="comment">
  13.         <h3>我要评论</h3>
  14.         <div>
  15. <!--            头像，文本域，作为一个块，绑定label,实现点击，自动焦点-->
  16.             <label for="comment"><img src="../../../static/images/user.png" alt=""></label>
  17.             <textarea name="" id="comment"></textarea>
  18.         </div>
  19.         <button>发表评论</button>
  20.     </div>
  22.     <div class="reply">
  23.         <h3>最新回复</h3>
  24.         <div>
  25.             <img src="../../../static/images/user.png" alt="">
  26.             <div class="detail">
  27.                 <span>用户昵称</span>
  28.                 <span>留言内容：php中文网，是一个有温度，有思想的学习平台</span>
  29.                 <div>
  30.                     <span>2019-12-27 15:34:23 发表</span>
  31.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  32.                 </div>
  33.             </div>
  34.         </div>
  35.         <div>
  36.             <img src="../../../static/images/user.png" alt="">
  37.             <div class="detail">
  38.                 <span>用户昵称</span>
  39.                 <span>留言内容：php中文网，是一个有温度，有思想的学习平台</span>
  40.                 <div>
  41.                     <span>2019-12-27 15:34:23 发表</span>
  42.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  43.                 </div>
  44.             </div>
  45.         </div>
  46.         <div>
  47.             <img src="../../../static/images/user.png" alt="">
  48.             <div class="detail">
  49.                 <span>用户昵称</span>
  50.                 <span>留言内容：php中文网，是一个有温度，有思想的学习平台</span>
  51.                 <div>
  52.                     <span>2019-12-27 15:34:23 发表</span>
  53.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  54.                 </div>
  55.             </div>
  56.         </div>
  57.         <div>
  58.             <img src="../../../static/images/user.png" alt="">
  59.             <div class="detail">
  60.                 <span>用户昵称</span>
  61.                 <span>留言内容：php中文网，是一个有温度，有思想的学习平台</span>
  62.                 <div>
  63.                     <span>2019-12-27 15:34:23 发表</span>
  64.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  65.                 </div>
  66.             </div>
  67.         </div>
  68. </div>
  69. </div>
  70. </body>
  71. </html>

flex项目实战二——评论与发贴CSS代码

  1. /*初始化样式*/
  2. @import "../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.     /*阴影*/
  14.     box-shadow: 1px 1px 3px #cccccc;
  15.     /*圆角*/
  16.     border-radius: 5px;
  17. }
  19. .public-comment-reply > .comment{
  20.     display: flex;
  21.     flex-direction: column;
  22. }
  24. .public-comment-reply img{
  25.     width: 60px;
  26.     height: 60px;
  27. }
  29. .public-comment-reply > .comment h3{
  30.     padding: 20px 0;
  31.     /*我要评论上有个上边线*/
  32.     border-top: 1px solid #cccccc;
  33. }
  35. .public-comment-reply > .comment  > div{
  36.     padding: 15px;
  37.     height: 200px;
  38.     display: flex;
  39.     flex-flow: row nowrap;
  40. }
  42. .public-comment-reply > .comment  > div img{
  43.     /*单独设置头像在交叉轴上左对齐*/
  44.     align-self: start;
  45. }
  47. .public-comment-reply > .comment  > div textarea{
  48.     height: 200px;
  49.     margin-left: 20px;
  50.     resize:none; /*禁止缩放*/
  51.     flex: auto;
  52. }
  54. .public-comment-reply > .comment  > div textarea:hover{
  55.     box-shadow: 0 0 8px #888;
  56. }
  58. .public-comment-reply > .comment > button{
  59.     font-size: 14px;
  60.     background-color: #f64c59;
  61.     border: none;
  62.     color: white;
  63.     width: 150px;
  64.     height: 40px;
  65.     align-self: end;
  66. }
  68. .public-comment-reply > .comment > button:hover{
  69.     background-color: #178cee;
  70.     box-shadow: 0 0 5px #888;
  71. }
  73. .public-comment-reply > .reply {
  74.     display: flex;
  75.     flex-direction: column;
  76.     padding: 15px;
  78. }
  80. .public-comment-reply > .reply > h3{
  81.     padding: 20px 0;
  82. }
  84. .public-comment-reply > .reply > div{
  85.     display: flex;
  86.     margin-top: 30px;
  87. }
  89. .public-comment-reply > .reply > div > img{
  90.     align-self: center;
  91. }
  93. .public-comment-reply > .reply > div .detail{
  94.     flex: auto;
  95.     display: flex;
  96.     flex-direction: column;
  97.     margin-left: 20px;
  98.     height: 90px;
  99.     justify-content: space-between;
  100. }
  102. .public-comment-reply > .reply > div .detail > div{
  103.     display: flex;
  104.     flex-direction: row;
  105.     justify-content: space-between;
  106. }
  108. .public-comment-reply > .reply > div .detail > div i{
  109.     color: red;
  110.     font-size: 1.2rem;
  111.     margin-right: 5px;
  112. }

flex项目实战二——评论与发贴效果图

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