博客列表 >1227作业+Flex实现移动端的布局+10期线上班

1227作业+Flex实现移动端的布局+10期线上班

江川林
江川林原创
2019年12月30日 17:05:32765浏览

1227日作业——Flex实现手机端的布局

1、本次手机端用flex实现,我觉得是对之前知识的综合运用考验,其中包括了:
flex容器的6属性运用和flex项目的6属性运用

2、在做本次作业的时候,多看多记多练是关键,之前自己没看作业视频的时候,经常容易卡壳,有时候一个小小的细节,就要耽搁半个小时以上,可能都还做不出来

3、本次的页面依然有很多不足之处,继续努力

感谢老师的辛勤付出!

以下是实现图片

以下是代码(包含)CSS

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>flex移动端布局</title>
  6. <style>
  7. * {
  8. padding: 0;
  9. margin-top: 0;
  10. /*outline: 1px dashed red;*/
  11. }
  12. a {
  13. text-decoration: none;
  14. color: #555555;
  15. }
  16. ul , li {
  17. list-style: none;
  18. }
  19. img {
  20. width: 100%;
  21. height: 100%;
  22. }
  23. body {
  24. min-width: 320px;
  25. max-width: 768px;
  26. width: 100vw;
  27. height: 100vh;
  28. display: flex;
  29. flex-direction: column;
  30. overflow-x: hidden ;
  31. margin: auto;
  32. }
  33. body header , body footer {
  34. height: 8vh;
  35. }
  36. body > header {
  37. display: flex;
  38. justify-content: space-between;
  39. background-color: black;
  40. }
  41. body > header > img {
  42. height: inherit;
  43. width: 5vw;
  44. }
  45. body > header > a >img {
  46. height: 100%;
  47. width: 8vw;
  48. }
  49. body > main {
  50. flex-grow: 1;
  51. overflow: auto;
  52. }
  53. /*轮播图*/
  54. body > main > div {
  55. height: 40vh;
  56. width: 100%;
  57. }
  58. body > main > .banner > img {
  59. height: inherit;
  60. width: 100%;
  61. }
  62. body > main > nav {
  63. display: flex;
  64. flex-flow: column nowrap;
  65. background-color: wheat;
  66. }
  67. body > main > nav > ul {
  68. display: flex;
  69. }
  70. body > main > nav > ul > li {
  71. flex-grow: 1;
  72. width: 25%;
  73. }
  74. body > main > nav > ul > li > a {
  75. display: flex;
  76. flex-flow: column wrap;
  77. align-items: center;
  78. margin-top: 5px;
  79. }
  80. body > main > nav > ul > li > a > img {
  81. height: 40px;
  82. width: 40px;
  83. }
  84. /*推荐课程*/
  85. body > main > section {
  86. display: flex;
  87. flex-direction: column;
  88. }
  89. body > main > section > .picture {
  90. display: flex;
  91. flex-direction: row;
  92. flex-wrap: nowrap;
  93. }
  94. body > main > section > .picture img {
  95. height: 20vh;
  96. width: 50%;
  97. margin: 5px;
  98. }
  99. body > main > section > .comment > section {
  100. display: flex;
  101. flex-flow: row nowrap;
  102. height: 20vh;
  103. }
  104. body > main > section > .comment > section img {
  105. width: 250px;
  106. padding: 5px;
  107. box-sizing: border-box;
  108. }
  109. body > main > section > .comment > section > div {
  110. display: flex;
  111. flex-direction: column;
  112. flex-grow: 1;
  113. justify-content:space-around ;
  114. margin-left: 5px;
  115. }
  116. body > main > section > .comment > section > div> div {
  117. display: flex;
  118. /*flex-grow: 1;*/
  119. }
  120. body > main > section > .comment > section > div> div span:first-of-type{
  121. background-color: black;
  122. color: white;
  123. border-radius: 5px;
  124. }
  125. footer {
  126. display: flex;
  127. justify-content: space-between;
  128. background-color: #555555;
  129. flex-grow: 1;
  130. }
  131. footer > span {
  132. color: white;
  133. margin: auto;
  134. }
  135. </style>
  136. </head>
  137. <body>
  138. <!-- 头部-->
  139. <header>
  140. <img src="icon_fh1ahalyzh/bussiness-man.png" alt="">
  141. <a href=""><img src="1225/static/images/logo.png" alt=""></a>
  142. <img src="icon_fh1ahalyzh/bussiness-man.png" alt="">
  143. </header>
  144. <!-- 主体-->
  145. <main>
  146. <!-- 轮播图-->
  147. <div class="banner">
  148. <img src="1225/static/images/5.jpg" alt="">
  149. </div>
  150. <!-- 导航-->
  151. <nav>
  152. <ul>
  153. <li>
  154. <a href="">
  155. <img src="icon_fh1ahalyzh/all.png" alt="">
  156. <span>HTML/CSS</span>
  157. </a>
  158. </li>
  159. <li>
  160. <a href="">
  161. <img src="icon_fh1ahalyzh/auto.png" alt="">
  162. <span>JavaScript</span>
  163. </a>
  164. </li>
  165. <li>
  166. <a href="">
  167. <img src="icon_fh1ahalyzh/code.png" alt="">
  168. <span>服务器</span>
  169. </a>
  170. </li>
  171. <li>
  172. <a href="">
  173. <img src="icon_fh1ahalyzh/component.png" alt="">
  174. <span>数据库</span>
  175. </a>
  176. </li>
  177. </ul>
  178. <ul>
  179. <li>
  180. <a href="">
  181. <img src="icon_fh1ahalyzh/copy.png" alt="">
  182. <span>移动端</span>
  183. </a>
  184. </li>
  185. <li>
  186. <a href="">
  187. <img src="icon_fh1ahalyzh/editor.png" alt="">
  188. <span>手册</span>
  189. </a>
  190. </li>
  191. <li>
  192. <a href="">
  193. <img src="icon_fh1ahalyzh/history.png" alt="">
  194. <span>工具</span>
  195. </a>
  196. </li>
  197. <li>
  198. <a href="">
  199. <img src="icon_fh1ahalyzh/bussiness-man.png" alt="">
  200. <span>直播</span>
  201. </a>
  202. </li>
  203. </ul>
  204. </nav>
  205. <!-- 推荐课程-->
  206. <section>
  207. <h2>推荐课程</h2>
  208. <div class="picture">
  209. <img src="1225/static/images/img3.jpg" alt="">
  210. <img src="1225/static/images/img4.jpg" alt="">
  211. </div>
  212. <div class="comment">
  213. <section>
  214. <img src="1225/static/images/img1.jpg" alt="">
  215. <div>
  216. <span>CI框架30分钟极速入门</span>
  217. <div>
  218. <span>中级</span>
  219. <span>2187次播放</span>
  220. </div>
  221. </div>
  222. </section>
  223. <section>
  224. <img src="1225/static/images/img1.jpg" alt="">
  225. <div>
  226. <span>CI框架30分钟极速入门</span>
  227. <div>
  228. <span>中级</span>
  229. <span>2187次播放</span>
  230. </div>
  231. </div>
  232. </section>
  233. </div>
  234. </section>
  235. </main>
  236. <footer>
  237. <span>首页</span>
  238. <span>视频</span>
  239. <span>社区</span>
  240. <span>我的</span>
  241. </footer>
  242. </body>
  243. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议