博客列表 >FLEX实战布局三个案例—***九期线上班

FLEX实战布局三个案例—***九期线上班

邯郸易住宋至刚
邯郸易住宋至刚原创
2019年11月16日 23:30:37707浏览

一、课堂介绍了三个小案例, 自己动手写一遍, 再抄一遍

手抄如下:

二、用flex模仿一个后台布局

代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>网站后台首页</title>
  6. <link rel="stylesheet" type="text/css" href="css/admin.css">
  7. </head>
  8. <body>
  9. <nav>
  10. <div><img src="static/images/logo.png"></div>
  11. <div>
  12. <div>
  13. <img src="static/images/pay-icon.png">
  14. <p>收款码</p>
  15. </div>
  16. <div>
  17. <img src="static/images/email-icon.png">
  18. <p>信息</p>
  19. </div>
  20. <div>
  21. <img src="static/images/25561275y3g_540_960.jpg">
  22. <p>创鑫店</p>
  23. </div>
  24. <div>
  25. <img src="static/images/zhangwu_icon_normal.png">
  26. <p>退出 </p>
  27. </div>
  28. </div>
  29. </nav>
  30. <main>
  31. <content>
  32. <div>
  33. <img src="static/images/index-banner-2.png">
  34. </div>
  35. <div>
  36. <div></div>
  37. <div></div>
  38. <div></div>
  39. </div>
  40. <div></div>
  41. </content>
  42. <aside>
  43. <div><a href=""><img src="static/images/index-house-view-icon.png" alt="">
  44. <p>房源</p>
  45. </img></a></div>
  46. <div><a href=""><img src="static/images/zuwu_icon_normal.png" alt="">
  47. <p>租务</p>
  48. </img></a></div>
  49. <div><a href=""><img src="static/images/pay-icon.png" alt="">
  50. <p>财务</p>
  51. </img></a></div>
  52. <div><a href=""><img src="static/images/house_icon_normal.png" alt="">
  53. <p>设备</p>
  54. </img></a></div>
  55. <div><a href=""><img src="static/images/index-customer-call-icon.png" alt="">
  56. <p>审批</p>
  57. </img></a></div>
  58. <div><a href=""><img src="static/images/jinrong_icon_normal.png" alt="">
  59. <p>金融</p>
  60. </img></a></div>
  61. <div><a href=""><img src="static/images/set_icon_normal.png" alt="">
  62. <p>设置</p>
  63. </img></a></div>
  64. <div><a href=""><img src="static/images/index-more-oper.png" alt="">
  65. <p>出房宝</p>
  66. </img></a></div>
  67. </aside>
  68. </main>
  69. <footer>
  70. CopyRight
  71. </footer>
  72. </body>
  73. </html>

CSS:

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. a {
  6. text-decoration: none;
  7. /* background-color: #ededed; */
  8. color: white;
  9. }
  10. nav {
  11. width: 100%;
  12. height: 60px;
  13. /* background-color: goldenrod; */
  14. border: 1px solid yellow;
  15. display: flex;
  16. justify-content: space-between;
  17. box-sizing: border-box;
  18. }
  19. nav > div:first-of-type {
  20. width: 100px;
  21. height: 60px;
  22. /* background-color: gray; */
  23. display: flex;
  24. align-items: center;
  25. justify-content: center;
  26. }
  27. nav > div:last-of-type {
  28. width: 400px;
  29. height: 60px;
  30. /* background-color: orange; */
  31. display: flex;
  32. box-sizing: border-box;
  33. justify-content: flex-end;
  34. }
  35. nav > div:last-of-type > div{
  36. width: 100px;
  37. height: 60px;
  38. }
  39. nav > div:last-of-type > div:first-of-type {
  40. /* display: flex; */
  41. /* align-self: center; */
  42. }
  43. nav > div:last-of-type > div:nth-of-type(2) {
  44. /* background-color: purple; */
  45. }
  46. nav > div:last-of-type div:nth-of-type(3) {
  47. /* background-color: wheat; */
  48. }
  49. nav > div:last-of-type > div:last-of-type {
  50. /* background-color: red; */
  51. }
  52. main {
  53. width: 100%;
  54. height: 1000px;
  55. /* background-color: green; */
  56. border: 1px solid yellow;
  57. display: flex;
  58. }
  59. main > aside {
  60. padding-top: 50px;
  61. width: 200px;
  62. height: 1000px;
  63. background-color: black;
  64. display: flex;
  65. flex-flow: column nowrap;
  66. justify-content: flex-start;
  67. align-items: center;
  68. order: -1;
  69. }
  70. main > content {
  71. width: 100%px;
  72. height: 1000px;
  73. background-color: #yellowgreen;
  74. padding: 5px;
  75. display: flex;
  76. flex-flow: column nowrap;
  77. /* flex: 0 1 auto; */
  78. justify-content: space-between;
  79. }
  80. main > content > div:first-of-type > img {
  81. margin-top: 10px;
  82. /* flex-flow: 0 1 auto; */
  83. width: 100%;
  84. height: 200px;
  85. }
  86. main > content > div:nth-of-type(2) {
  87. margin-top: 10px;
  88. padding: 5px;
  89. width: 100%;
  90. height: 600px;
  91. background-color: wheat;
  92. display: flex;
  93. flex-flow: row nowrap;
  94. }
  95. main > content > div:nth-of-type(2) > div{
  96. width: 300px;
  97. height: 600px;
  98. background-color: wheat;
  99. border: 1px solid red;
  100. display: flex;
  101. flex-flow: row nowrap;
  102. flex-grow: 1;
  103. }
  104. main > content > div:last-of-type {
  105. margin-top: 10px;
  106. width: 100%;
  107. height: 200px;
  108. background-color: skyblue;
  109. display: flex;
  110. flex-flow: column nowrap;
  111. }
  112. main > content > div:last-of-type >div {
  113. width: 100%;
  114. height: 200px;
  115. background-color: skyblue;
  116. }

运行结果如下:

手抄代码:

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议