search

博客列表 >《Flex实战案例》2019-12-26作业笔记

《Flex实战案例》2019-12-26作业笔记

杨凡的博客
杨凡的博客原创
2020年01月16日 17:24:38695浏览

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>

上一条：JDK8-WindowsX64安装包下一条：ubuntu下skype无法输入中文
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多