search

博客列表 >CSS基础flex实战二手商品列表、评论与回复-PHP培训十期线上班 学号：510251 12月26日作业

CSS基础flex实战二手商品列表、评论与回复-PHP培训十期线上班 学号：510251 12月26日作业

赵大叔
赵大叔原创
2019年12月28日 16:06:25841浏览

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项目实战二——评论与发贴效果图

上一条：CentOS7下PHP7.2安装redis扩展下一条：javascript基础学习记录-2019年12月18日
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多