Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 《Flex实战案例》2019-12-26作业笔记
Blogger Information
Blog 26
fans 1
comment 1
visits 19729
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
《Flex实战案例》2019-12-26作业笔记
杨凡的博客
Original
696 people have browsed it

link引用当前html文档所用到的CSS样式，用在HTML文档中

@import当前的CSS引用的其他的CSS样式，用在CSS文档中

二手商品列表组件代码

CSS代码

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

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>
  9.     <!--引入大标题组件-->
  10.     <div class="public-headline">
  11.         <span>二手交易</span>
  12.     </div>
  13.     <!--二手交易专区-->
  14.     <div class="public-second-hand">
  15.         <!--标题1-->
  16.         <div class="title1">
  17.             <a href="">抢好货</a>
  18.             <span>0低价，便捷，安全，快速</span>
  19.         </div>
  20.         <!--标题2-->
  21.         <div class="title2">
  22.             <span>热门分类</span>
  23.             <a href="">美女写真</a>
  24.             <a href="">日本美女</a>
  25.             <a href="">美国美女</a>
  26.             <a href="">国内美女</a>
  27.             <a href="">AV美女</a>
  28.         </div>
  29.         <!--商品展示区-->
  30.         <div class="goods">
  31.             <!--1.左边商品列表-->
  32.             <div class="goods-list">
  33.                 <!--商品简介-->
  34.                 <div class="intro">
  35.                     <a href="" ><img src="../../../static/images/shop/shop1.jpg" alt=""></a>
  36.                     <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  37.                     <div>
  38.                         <span>¥333</span>
  39.                         <span>美女</span>
  40.                     </div>
  41.                 </div>
  42.                 <div class="intro">
  43.                     <a href="" ><img src="../../../static/images/shop/shop2.jpg" alt=""></a>
  44.                     <a href="">美女性感写真海报墙艺术装饰画贴画图2</a>
  45.                     <div>
  46.                         <span>¥333</span>
  47.                         <span>美女</span>
  48.                     </div>
  49.                 </div>
  50.                 <div class="intro">
  51.                     <a href="" ><img src="../../../static/images/shop/shop3.jpg" alt=""></a>
  52.                     <a href="">美女性感写真海报墙艺术装饰画贴画图3</a>
  53.                     <div>
  54.                         <span>¥333</span>
  55.                         <span>美女</span>
  56.                     </div>
  57.                 </div>
  58.                 <div class="intro">
  59.                     <a href="" ><img src="../../../static/images/shop/shop4.jpg" alt=""></a>
  60.                     <a href="">美女性感写真海报墙艺术装饰画贴画图4</a>
  61.                     <div>
  62.                         <span>¥333</span>
  63.                         <span>美女</span>
  64.                     </div>
  65.                 </div>
  66.                 <div class="intro">
  67.                     <a href="" ><img src="../../../static/images/shop/shop5.jpg" alt=""></a>
  68.                     <a href="">美女性感写真海报墙艺术装饰画贴画图5</a>
  69.                     <div>
  70.                         <span>¥333</span>
  71.                         <span>美女</span>
  72.                     </div>
  73.                 </div>
  74.                 <div class="intro">
  75.                     <a href="" ><img src="../../../static/images/shop/shop6.jpg" alt=""></a>
  76.                     <a href="">美女性感写真海报墙艺术装饰画贴画图6</a>
  77.                     <div>
  78.                         <span>¥333</span>
  79.                         <span>美女</span>
  80.                     </div>
  81.                 </div>
  82.                 <div class="intro">
  83.                     <a href="" ><img src="../../../static/images/shop/shop7.jpg" alt=""></a>
  84.                     <a href="">美女性感写真海报墙艺术装饰画贴画图7</a>
  85.                     <div>
  86.                         <span>¥333</span>
  87.                         <span>美女</span>
  88.                     </div>
  89.                 </div>
  90.                 <div class="intro">
  91.                     <a href="" ><img src="../../../static/images/shop/shop8.jpg" alt=""></a>
  92.                     <a href="">美女性感写真海报墙艺术装饰画贴画图8</a>
  93.                     <div>
  94.                         <span>¥333</span>
  95.                         <span>美女</span>
  96.                     </div>
  97.                 </div>
  98.             </div>
  100.             <!--2.右侧的功能快捷入口-->
  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/2.png" alt=""></a>
  104.                 <a href=""><img src="../../../static/images/ad/3.png" alt=""></a>
  105.                 <a href=""><img src="../../../static/images/ad/4.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>
  110.             </div>
  112.         </div>
  114.     </div>
  115. </body>
  116. </html>

分页条组件代码

CSS代码

  1. /*导入元素公共初始化样式表*/
  2. @import "../../public_reset.css";
  4. .public-paginate {
  5.     margin: 20px auto;
  6.     display: flex;
  7.     justify-content: center;
  8. }
  9. /*设置每一个分页码的样式*/
  10. .public-paginate > a {
  11.     margin-right: 5px;
  12.     font-size: 16px;
  13.     padding: 5px 20px;
  14.     background-color: #fff;
  15.     border-radius: 3px;
  16. }
  17. .public-paginate > a:hover {
  18.     background-color: #44aaee;
  19.     color: white;
  20.     box-shadow:0 0 3px #888888;
  21. }

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public_paginate.css">
  6.     <title>公共分页条组件</title>
  7. </head>
  8. <body>
  9.     <div class="public-paginate">
  10.         <a href=""><</a>
  11.         <a href="">1</a>
  12.         <a href="">2</a>
  13.         <a href="">3</a>
  14.         <a href="">4</a>
  15.         <a href="">5</a>
  16.         <a href="">6</a>
  17.         <a href="">7</a>
  18.         <a href="">8</a>
  19.         <a href="">></a>
  20.     </div>
  21. </body>
  22. </html>

评论与回复组件

CSS代码

  1. /*导入元素公共初始化样式表*/
  2. @import "../../public_reset.css";
  4. .public-comment-reply {
  5.     padding: 15px;
  6.     box-sizing: border-box;
  7.     background-color: #fff;
  9.     display: flex;
  10.     flex-direction: column;
  11. }
  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. }
  26. .public-comment-reply > .comment > div {
  27.     padding: 15px;
  28.     height: 200px;
  29.     display: flex;
  30.     flex-flow: row nowrap;
  31. }
  32. .public-comment-reply > .comment >div img {
  33.     align-self: flex-start;
  34. }
  35. .public-comment-reply > .comment >div textarea {
  36.     height: 200px;
  37.     margin-left: 20px;
  38.     resize: none;
  39.     flex: auto;
  40. }
  41. .public-comment-reply > .comment >div textarea:hover {
  42.     box-shadow: 0 0 8px #888888;
  43. }
  44. .public-comment-reply > .comment > button {
  45.     font-size: 14px;
  46.     background-color: #f64c59;
  47.     border: none;
  48.     color: white;
  49.     width: 150px;
  50.     height: 40px;
  52.     align-self: flex-end;
  54. }
  55. .public-comment-reply > .comment > button:hover {
  56.     background-color: #178cee;
  57.     box-shadow: 0 0 8px #888888;
  58.     cursor: pointer;
  59. }
  61. /*回复区*/
  62. .public-comment-reply > .reply {
  63.     display: flex;
  64.     flex-direction: column;
  65.     padding: 15px 0;
  66. }
  67. .public-comment-reply > .reply > h3 {
  68.     padding: 20px 0;
  69. }
  70. .public-comment-reply > .reply > div {
  71.     display: flex;
  72.     margin-top: 30px;
  73. }
  75. .public-comment-reply > .reply > div > img {
  76.     align-self: center;
  77. }
  79. .public-comment-reply > .reply > div > .detail {
  80.     flex: auto;
  81.     display: flex;
  82.     flex-direction: column;
  83.     margin-left: 20px;
  84.     height:90px;
  85.     justify-content: space-between;
  86. }
  88. .public-comment-reply > .reply > div > .detail > div {
  89.     display: flex;
  90.     justify-content: space-between;
  91. }
  93. .public-comment-reply > .reply > div > .detail > div i {
  94.     color: red;
  95.     font-size: 1.2rem;
  96.     margin-right: 5px;
  97. }

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="../../../static/font/iconfont.css">
  6.     <link rel="stylesheet" href="public_comment_reply.css">
  7.     <title>评论与回复组件</title>
  8. </head>
  9. <body>
  10.     <div class="public-comment-reply">
  11.         <!--评论区-->
  12.         <div class="comment">
  13.             <h3>我要评论</h3>
  14.             <div>
  15.                 <label for="comment">
  16.                     <img src="../../../static/images/皮特朱.png" alt="">
  17.                 </label>
  18.                 <textarea name="" id="comment"></textarea>
  19.             </div>
  20.             <button>发表评论</button>
  21.         </div>
  22.         <!--回复区-->
  23.         <div class="reply">
  24.             <h3>最新回复</h3>
  25.             <div>
  26.                 <img src="../../../static/images/皮特朱.png" alt="">
  27.                 <div class="detail">
  28.                     <span>Peter-Zhu</span>
  29.                     <span>留言内容:PHP中文网是一个有深度,有思想的学习平台</span>
  30.                     <div>
  31.                         <span>2020-01-02 16:46:22发表</span>
  32.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  33.                     </div>
  34.                 </div>
  35.             </div>
  36.             <div>
  37.                 <img src="../../../static/images/皮特朱.png" alt="">
  38.                 <div class="detail">
  39.                     <span>Peter-Zhu</span>
  40.                     <span>留言内容:PHP中文网是一个有深度,有思想的学习平台</span>
  41.                     <div>
  42.                         <span>2020-01-02 16:46:22发表</span>
  43.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  44.                     </div>
  45.                 </div>
  46.             </div>
  47.             <div>
  48.                 <img src="../../../static/images/皮特朱.png" alt="">
  49.                 <div class="detail">
  50.                     <span>Peter-Zhu</span>
  51.                     <span>留言内容:PHP中文网是一个有深度,有思想的学习平台</span>
  52.                     <div>
  53.                         <span>2020-01-02 16:46:22发表</span>
  54.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  55.                     </div>
  56.                 </div>
  57.             </div>
  58.             <div>
  59.                 <img src="../../../static/images/皮特朱.png" alt="">
  60.                 <div class="detail">
  61.                     <span>Peter-Zhu</span>
  62.                     <span>留言内容:PHP中文网是一个有深度,有思想的学习平台</span>
  63.                     <div>
  64.                         <span>2020-01-02 16:46:22发表</span>
  65.                         <span><i class="iconfont icon-dianzan"></i>回复</span>
  66.                     </div>
  67.                 </div>
  68.             </div>
  69.         </div>
  70.     </div>
  71. </body>
  72. </html>

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