search

博客列表 >12月26日作业：flex实战案例

12月26日作业：flex实战案例

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰原创
2019年12月27日 14:40:10999浏览

作业一：
二手商品列表代码：
1、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. <div class="public-headline">
  10.     <span>二手交易</span>
  11. </div>
  12. <div class="public-second-hand">
  13.     <div class="title">
  14.         <div class="title1">
  15.             <a href=""><span>抢好货</span></a>
  16.             <span>0低价，便捷，安全，快速</span>
  17.         </div>
  18.         <div class="title2">
  19.             <span>热门分类</span>
  20.             <a href=""><span>美女写真</span></a>
  21.             <a href=""><span>日本美女</span></a>
  22.             <a href=""><span>美国美女</span></a>
  23.             <a href=""><span>国内美女</span></a>
  24.             <a href=""><span>AV美女</span></a>
  25.         </div>
  26.     </div>
  27.     <div class="shops">
  28.         <div class="shop-left">
  29.             <div class="details">
  30.                 <a href=""><img src="../../../static/images/shop/shop1.jpg" alt=""></a>
  31.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  32.                 <div>
  33.                     <span>¥333</span>
  34.                     <span>美女</span>
  35.                 </div>
  36.             </div>
  37.             <div class="details">
  38.                 <a href=""><img src="../../../static/images/shop/shop2.jpg" alt=""></a>
  39.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  40.                 <div>
  41.                     <span>¥333</span>
  42.                     <span>美女</span>
  43.                 </div>
  44.             </div>
  45.             <div class="details">
  46.                 <a href=""><img src="../../../static/images/shop/shop3.jpg" alt=""></a>
  47.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  48.                 <div>
  49.                     <span>¥333</span>
  50.                     <span>美女</span>
  51.                 </div>
  52.             </div>
  53.             <div class="details">
  54.                 <a href=""><img src="../../../static/images/shop/shop4.jpg" alt=""></a>
  55.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  56.                 <div>
  57.                     <span>¥333</span>
  58.                     <span>美女</span>
  59.                 </div>
  60.             </div>
  61.             <div class="details">
  62.                 <a href=""><img src="../../../static/images/shop/shop5.jpg" alt=""></a>
  63.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  64.                 <div>
  65.                     <span>¥333</span>
  66.                     <span>美女</span>
  67.                 </div>
  68.             </div>
  69.             <div class="details">
  70.                 <a href=""><img src="../../../static/images/shop/shop6.jpg" alt=""></a>
  71.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  72.                 <div>
  73.                     <span>¥333</span>
  74.                     <span>美女</span>
  75.                 </div>
  76.             </div>
  77.             <div class="details">
  78.                 <a href=""><img src="../../../static/images/shop/shop7.jpg" alt=""></a>
  79.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  80.                 <div>
  81.                     <span>¥333</span>
  82.                     <span>美女</span>
  83.                 </div>
  84.             </div>
  85.             <div class="details">
  86.                 <a href=""><img src="../../../static/images/shop/shop8.jpg" alt=""></a>
  87.                 <a href=""><span>美女性感写真海报墙艺术装饰画贴画图1</span></a>
  88.                 <div>
  89.                     <span>¥333</span>
  90.                     <span>美女</span>
  91.                 </div>
  92.             </div>
  93.         </div>
  94.         <div class="shop-right">
  95.             <div class="up">
  96.                 <a href=""><img src="../../../static/images/ad/1.png" alt=""></a>
  97.                 <a href=""><img src="../../../static/images/ad/2.png" alt=""></a>
  98.                 <a href=""><img src="../../../static/images/ad/3.png" alt=""></a>
  99.                 <a href=""><img src="../../../static/images/ad/4.png" alt=""></a>
  100.             </div>
  101.             <div class="down">
  102.                 <a href=""><img src="../../../static/images/ad/image.png" alt=""></a>
  103.                 <a href=""><img src="../../../static/images/ad/ad2.jpg" alt=""></a>
  104.             </div>
  105.         </div>
  106.     </div>
  107. </div>
  108. </body>
  109. </html>

2、css代码：

  1. @import url(../../public_reset.css);
  2. @import url(../publice_headline/public_headline.css);
  3. /*主体设置*/
  4. .public-second-hand {
  5.     width: 1200px;
  6.     margin:auto;
  7.     background-color: #ffffff;
  8.     /*border:1px solid #404040;*/
  9. }
  10. .public-second-hand:hover {
  11.     box-shadow: 0 0 3px #404040;
  12. }
  13. /*标题设置*/
  14. .public-second-hand > .title  > .title1 {
  15.     border-bottom: 1px solid #CCCCCC;
  16.     padding: 10px;
  17.     box-sizing: content-box;
  18. }
  19. .public-second-hand > .title > .title1 > a > span {
  20.     font-size: 30px;
  21.     /*color:red;*/
  22. }
  23. .public-second-hand > .title > .title1 > span {
  24.     color:#ff0000;
  25.     margin-left:20px;
  27. }
  28. .public-second-hand > .title  > .title2 >span {
  29.     font-size: 20px;
  30.     color:#ff0000;
  31.     margin-left:10px;
  32. }
  33. .public-second-hand > .title  > .title2 > a {
  34.     margin-left:20px;
  35. }
  36. .public-second-hand > .title  > .title2 > a:hover {
  37.     color:#DD4A68;
  38. }
  40. /*商品区设置*/
  41. .public-second-hand > .shops {
  42.     /*height: 600px;*/
  43.     margin-top: 10px;
  44.     padding-bottom: 10px;
  46.     display: flex;
  47.     flex-flow:row nowrap;
  49. }
  50. .public-second-hand > .shops > * {
  51.     flex:0 1 auto;
  52.     justify-content: space-evenly;
  53. }
  54. .public-second-hand > .shops > .shop-left {
  55.     width: 800px;
  56.     padding-left:10px;
  57.     display:flex;
  58.     flex-flow:row wrap;
  60. }
  61. .public-second-hand > .shops > .shop-left > .details {
  62.     width: 180px;
  63.     margin-right: 10px;
  64.     margin-top: 10px;
  65.     display:flex;
  66.     flex-flow:column nowrap;
  67.     justify-content: space-between;
  68. }
  69. .public-second-hand > .shops > .shop-left > .details  img {
  70.     width: 176px;
  71.     height: 120px;
  72.     border:1px solid #666666;
  73.     border-radius: 3px;
  74.     flex:0 1 auto;
  75. }
  76. .public-second-hand > .shops > .shop-left > .details > div {
  77.     display:flex;
  78.     justify-content: space-between;
  79. }
  80. .public-second-hand > .shops > .shop-left > .details > div > :first-child {
  81.     font-size: 16px;
  82.     color: #ff0000;
  83. }
  84. .public-second-hand > .shops > .shop-left > .details > div > :last-child {
  85.     border-radius: 5px;
  86.     padding:2px;
  87.     color: #ffffff;
  88.     background-color: green;
  89. }
  90. /*商品右边*/
  91. .public-second-hand > .shops > .shop-right {
  92.     width: 400px;
  93. }
  94. .public-second-hand > .shops > .shop-right img {
  95.     width: 176px;
  96.     height: 120px;
  97.     border:1px solid #666666;
  98.     border-radius: 3px;
  99. }
  100. .public-second-hand > .shops > .shop-right > .up {
  101.     margin-top: 10px;
  102.     display: flex;
  103.     flex-flow:row wrap;
  104.     justify-content: space-around;
  105. }
  106. .public-second-hand > .shops > .shop-right >.down {
  107.     display:flex;
  108.     flex-flow:column nowrap;
  109. }
  110. .public-second-hand > .shops > .shop-right >.down img {
  111.     width: 393px;
  112.     height: 60px;
  113. }

3、效果图如下：

作业二：
公共评论回复代码：
1、html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public_comment_reply.css">
  6.     <link rel="stylesheet" href="../../../static/font/iconfont.css">
  7.     <title>公共评论回复</title>
  8. </head>
  9. <body>
  10. <div class="public-comment-reply">
  11.     <div class="comment">
  12.         <h3>我要评论</h3>
  13.         <div>
  14.             <label for="comment"><img src="../../../static/images/user.png" alt=""></label>
  15.             <textarea name="" id="comment" ></textarea>
  16.         </div>
  17.         <button>发表评论</button>
  18.     </div>
  19.     <div class="reply">
  20.         <h3>最新回复</h3>
  21.         <div>
  22.             <img src="../../../static/images/user.png" alt="">
  23.             <div class="reply-detail">
  24.                 <span>用户昵称</span>
  25.                 <span>留言内容：种业圈是一个有温度，有思想的交流平台</span>
  26.                 <div>
  27.                     <span>2019-12-27 12：05：22发表</span>
  28.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  29.                 </div>
  30.             </div>
  31.         </div>
  32.         <div>
  33.             <img src="../../../static/images/user.png" alt="">
  34.             <div class="reply-detail">
  35.                 <span>用户昵称</span>
  36.                 <span>留言内容：种业圈是一个有温度，有思想的交流平台</span>
  37.                 <div>
  38.                     <span>2019-12-27 12：05：22发表</span>
  39.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  40.                 </div>
  41.             </div>
  42.         </div>
  43.         <div>
  44.             <img src="../../../static/images/user.png" alt="">
  45.             <div class="reply-detail">
  46.                 <span>用户昵称</span>
  47.                 <span>留言内容：种业圈是一个有温度，有思想的交流平台</span>
  48.                 <div>
  49.                     <span>2019-12-27 12：05：22发表</span>
  50.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  51.                 </div>
  52.             </div>
  53.         </div>
  54.         <div>
  55.             <img src="../../../static/images/user.png" alt="">
  56.             <div class="reply-detail">
  57.                 <span>用户昵称</span>
  58.                 <span>留言内容：种业圈是一个有温度，有思想的交流平台</span>
  59.                 <div>
  60.                     <span>2019-12-27 12：05：22发表</span>
  61.                     <span><i class="iconfont icon-dianzan"></i>回复</span>
  62.                 </div>
  63.             </div>
  64.         </div>
  65.     </div>
  66. </div>
  67. </body>
  68. </html>

2、css代码：

  1. @import url(../../public_reset.css);
  3. .public-comment-reply {
  4.     /*width: 1200px;*/
  5.     margin:20px auto;
  6.     background-color: #fff;
  7.     display: flex;
  8.     flex-flow:column nowrap;
  9. }
  10. .public-comment-reply >.comment {
  11.     margin: 15px;
  12.     display: flex;
  13.     flex-flow:column nowrap;
  14. }
  15. .public-comment-reply >.comment img {
  16.     width: 60px;
  17.     height: 60px;
  18.     box-shadow: 0 0 3px #404040;
  19. }
  20. .public-comment-reply >.comment > * {
  21.     flex:1 1 auto;
  22. }
  23. .public-comment-reply > .comment > div {
  24.     /*width: 800px;*/
  25.     margin-top:10px;
  26.     display: flex;
  27.     flex-flow:row nowrap;
  28.     /*flex:0 1 auto;*/
  29. }
  30. .public-comment-reply > .comment > div > textarea {
  31.     margin-left: 20px;
  32.     height: 200px;
  33.     width: 900px;
  34.     resize:none;
  35.     font-size: 18px;
  36.     /*flex:0 1 auto;*/
  38. }
  39. .public-comment-reply > .comment > div > textarea:hover {
  40.     box-shadow: 0 0 3px #666666 inset;
  41. }
  42. .public-comment-reply > .comment > button {
  43.     width: 150px;
  44.     height: 40px;
  45.     margin-top: 10px;
  46.     align-self: flex-end;
  47.     border-style: none;
  48.     background-color: #F64C59;
  49.     color:white;
  50. }
  51. .public-comment-reply > .comment > button:hover {
  52.     background-color: #178CEE;
  53. }
  54. .public-comment-reply >.reply {
  55.     margin:10px;
  56.     flex-flow:column nowrap;
  58. }
  59. .public-comment-reply > .reply >div {
  60.     margin-top:10px;
  61.     height: 90px;
  62.     display: flex;
  63.     justify-content: flex-start;
  65. }
  66. .public-comment-reply > .reply > div >img {
  67.     width: 60px;
  68.     height: 60px;
  69.     box-shadow: 0 0 3px #404040;
  70.     align-self: center;
  71. }
  72. .public-comment-reply > .reply > div > .reply-detail {
  73.     margin-left:15px;
  74.     display: flex;
  75.     flex-flow:column nowrap;
  76.     justify-content: space-around;
  77.     flex:1 1 auto;
  78. }
  79. .public-comment-reply > .reply >div > .reply-detail > div {
  80.     display: flex;
  81.     justify-content: space-between;
  82. }
  84. .public-comment-reply > .reply >div > .reply-detail > div > :last-child > i{
  85.     color:red;
  86.     font-size: 1.2rem;
  87.     margin-right: 5px;
  88. }

3、效果图：

总结：布局规划和网页组件规划，以及页面布局的细节调整
知识点：
textarea文本域：resize:none 取消拖拉伸缩属性
font-size:属性值单位rem 是当前字体的倍数显示

上一条：Flex弹性盒子仿二手商品交易与评论回复页面下一条：1225作业+flex之组件的开发思路及导航实例+10期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多