博客列表 >Flex三列布局及仿PHP中文网手机端案例

Flex三列布局及仿PHP中文网手机端案例

蓝蚁网络科技
蓝蚁网络科技原创
2020年08月12日 19:14:59511浏览

Flex实现三列布局

HTML代码

  1. <!-- 页眉 -->
  2. <header>
  3. <a href="">LOGO</a>
  4. <a href="">菜单1</a>
  5. <a href="">菜单2</a>
  6. <a href="">菜单3</a>
  7. <a href="">菜单4</a>
  8. <a href="">菜单5</a>
  9. </header>
  10. <!-- 主体 -->
  11. <div class="container">
  12. <!-- 左边栏 -->
  13. <div class="left">左边栏</div>
  14. <!-- 主体内容区 -->
  15. <main>主体内容区</main>
  16. <!-- 右边栏 -->
  17. <div class="right">右边栏</div>
  18. </div>
  19. <!-- 页脚 -->
  20. <footer>
  21. <p>版权及备案</p>
  22. <p>地址</p>
  23. </footer>

CSS代码

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. body {
  7. width: 1000px;
  8. display: flex;
  9. flex-flow: column nowrap;
  10. margin: auto;
  11. }
  12. header,
  13. footer {
  14. height: 50px;
  15. background: #999;
  16. }
  17. a {
  18. text-decoration: none;
  19. color: #333;
  20. }
  21. header {
  22. display: flex;
  23. align-items: center;
  24. }
  25. header > a {
  26. flex: 0 0 100px;
  27. text-align: center;
  28. }
  29. header > a:first-of-type {
  30. margin-right: 50px;
  31. }
  32. header > a:hover:not(:first-of-type) {
  33. color: yellow;
  34. }
  35. .container {
  36. display: flex;
  37. min-height: 80vh;
  38. justify-content: space-between;
  39. }
  40. .container > .left,
  41. .container > .right {
  42. flex: 0 0 200px;
  43. background: rgb(236, 213, 213);
  44. }
  45. .container > main {
  46. flex: 0 0 600px;
  47. background: rgb(183, 235, 183);
  48. }
  49. footer {
  50. display: flex;
  51. flex-flow: column nowrap;
  52. text-align: center;
  53. align-items: center;
  54. }

Flex布局案例

HTML代码

  1. <!-- 头部 -->
  2. <header>
  3. <a href=""><img src="user.png" /></a>
  4. <a href="https://m.php.cn"
  5. ><img src="https://m.php.cn/static/images/logo.png"
  6. /></a>
  7. <a href=""><img src="menu.png" /></a>
  8. </header>
  9. <!-- 轮播图 -->
  10. <div class="banner">
  11. <img
  12. src="https://img.php.cn/upload/article/000/000/003/5f06b3c905b4d541.png"
  13. alt=""
  14. />
  15. </div>
  16. <!-- 导航 -->
  17. <nav>
  18. <div>
  19. <a href=""
  20. ><img src="https://m.php.cn/static/images/ico/html.png" alt=""
  21. /></a>
  22. <a href="">HTML/CSS</a>
  23. </div>
  24. <div>
  25. <a href=""
  26. ><img src="https://m.php.cn/static/images/ico/JavaScript.png" alt=""
  27. /></a>
  28. <a href="">JavaScript</a>
  29. </div>
  30. <div>
  31. <a href=""
  32. ><img src="https://m.php.cn/static/images/ico/code.png" alt=""
  33. /></a>
  34. <a href="">服务端</a>
  35. </div>
  36. <div>
  37. <a href=""
  38. ><img src="https://m.php.cn/static/images/ico/sql.png" alt=""
  39. /></a>
  40. <a href="">数据库</a>
  41. </div>
  42. <div>
  43. <a href=""
  44. ><img src="https://m.php.cn/static/images/ico/app.png" alt=""
  45. /></a>
  46. <a href="">移动端</a>
  47. </div>
  48. <div>
  49. <a href=""
  50. ><img src="https://m.php.cn/static/images/ico/manual.png" alt=""
  51. /></a>
  52. <a href="">手册</a>
  53. </div>
  54. <div>
  55. <a href=""
  56. ><img src="https://m.php.cn/static/images/ico/tool2.png" alt=""
  57. /></a>
  58. <a href="">工具</a>
  59. </div>
  60. <div>
  61. <a href=""
  62. ><img src="https://m.php.cn/static/images/ico/live.png" alt=""
  63. /></a>
  64. <a href="">直播</a>
  65. </div>
  66. </nav>
  67. <div class="title"><p>推荐课程</p></div>
  68. <div class="tuijianh">
  69. <a href=""
  70. ><img
  71. src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg"
  72. alt=""
  73. /></a>
  74. <a href=""
  75. ><img
  76. src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg"
  77. alt=""
  78. /></a>
  79. </div>
  80. <div class="tuijians">
  81. <div>
  82. <div class="img-s">
  83. <a href=""
  84. ><img
  85. src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg"
  86. alt=""
  87. /></a>
  88. </div>
  89. <div class="text-s">
  90. <a href="">CI框架30分钟极速入门</a>
  91. <div>
  92. <p>中级</p>
  93. <p>64163次播放</p>
  94. </div>
  95. </div>
  96. </div>
  97. <div>
  98. <div class="img-s">
  99. <a href=""
  100. ><img
  101. src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg"
  102. alt=""
  103. /></a>
  104. </div>
  105. <div class="text-s">
  106. <a href="">CI框架30分钟极速入门</a>
  107. <div>
  108. <p>中级</p>
  109. <p>64198次播放</p>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. <div class="title"><p>最新更新</p></div>
  115. <div class="new">
  116. <div>
  117. <div class="img-s">
  118. <a href=""
  119. ><img
  120. src="https://img.php.cn/upload/course/000/000/001/5f155b2f296de744.png"
  121. alt=""
  122. /></a>
  123. </div>
  124. <div class="text-s">
  125. <a href="">《我的十年撸码生涯》公益直播课</a>
  126. <p>
  127. 主题:《十年撸码生涯:聊聊没羞没臊的工作和生活》主讲:西门大官人
  128. </p>
  129. <div>
  130. <p>中级</p>
  131. <p>64163次播放</p>
  132. </div>
  133. </div>
  134. </div>
  135. <div>
  136. <div class="img-s">
  137. <a href=""
  138. ><img
  139. src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg"
  140. alt=""
  141. /></a>
  142. </div>
  143. <div class="text-s">
  144. <a href="">《我的十年撸码生涯》公益直播课</a>
  145. <p>
  146. 主题:《十年撸码生涯:聊聊没羞没臊的工作和生活》主讲:西门大官人
  147. </p>
  148. <div>
  149. <p>中级</p>
  150. <p>64198次播放</p>
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155. <!-- 底部 -->
  156. <footer>
  157. <a href="">
  158. <span>首页</span>
  159. </a>
  160. <a href="">
  161. <span>视频</span>
  162. </a>
  163. <a href="">
  164. <span>社区</span>
  165. </a>
  166. <a href="">
  167. <span>我的</span>
  168. </a>
  169. </footer>

CSS代码

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. body {
  6. max-width: 768px;
  7. background: #eee;
  8. margin: auto;
  9. display: flex;
  10. flex-flow: column nowrap;
  11. }
  12. header {
  13. background: #2d353c;
  14. height: 50px;
  15. display: flex;
  16. justify-content: space-between;
  17. align-items: center;
  18. }
  19. header img {
  20. height: 45px;
  21. }
  22. .banner > img {
  23. width: 100%;
  24. }
  25. nav {
  26. height: 170px;
  27. display: flex;
  28. flex-flow: row wrap;
  29. align-content: space-around;
  30. margin-top: 15px;
  31. }
  32. nav > div {
  33. display: flex;
  34. flex-flow: column nowrap;
  35. align-items: center;
  36. flex: 0 0 192px;
  37. }
  38. nav > div img {
  39. width: 45px;
  40. }
  41. nav > div > a {
  42. text-decoration: none;
  43. font-size: 14px;
  44. color: #666;
  45. font-weight: 600;
  46. }
  47. .title {
  48. height: 50px;
  49. font-size: 1.2rem;
  50. font-weight: 600;
  51. color: #666;
  52. }
  53. .title p {
  54. margin-top: 20px;
  55. margin-left: 10px;
  56. }
  57. .tuijianh {
  58. display: flex;
  59. justify-content: space-between;
  60. }
  61. .tuijianh img {
  62. width: 375px;
  63. }
  64. .tuijians {
  65. display: flex;
  66. flex-flow: column nowrap;
  67. }
  68. .tuijians div {
  69. margin-top: 10px;
  70. display: flex;
  71. flex-flow: row nowrap;
  72. }
  73. .img-s img {
  74. width: 350px;
  75. }
  76. .tuijians div > .text-s {
  77. display: flex;
  78. flex-flow: column nowrap;
  79. margin-left: 10px;
  80. }
  81. .text-s a {
  82. text-decoration: none;
  83. font-size: 16px;
  84. color: #555;
  85. }
  86. .tuijians div .text-s div {
  87. display: flex;
  88. flex-flow: row nowrap;
  89. font-size: 12px;
  90. color: #666;
  91. font-weight: 400;
  92. }
  93. .tuijians div .text-s div p:first-of-type {
  94. background: #333;
  95. color: #fff;
  96. padding: 2px;
  97. border-radius: 8px;
  98. }
  99. .new > div {
  100. display: flex;
  101. margin-top: 10px;
  102. }
  103. .new div > .text-s {
  104. display: flex;
  105. flex-flow: column nowrap;
  106. margin-left: 10px;
  107. }
  108. .text-s a {
  109. text-decoration: none;
  110. font-size: 16px;
  111. color: #555;
  112. }
  113. .new > div > .text-s {
  114. display: flex;
  115. flex-flow: column nowrap;
  116. font-size: 12px;
  117. color: #666;
  118. font-weight: 400;
  119. }
  120. .new div .text-s div {
  121. display: flex;
  122. justify-content: space-between;
  123. }
  124. .new div .text-s div p:first-of-type {
  125. background: #333;
  126. color: #fff;
  127. padding: 2px;
  128. border-radius: 8px;
  129. }
  130. footer {
  131. display: flex;
  132. position: fixed;
  133. bottom: 0;
  134. height: 55px;
  135. width: 768px;
  136. background: #eee;
  137. justify-content: space-around;
  138. align-items: center;
  139. border-top: 1px solid #ccc;
  140. }
  141. footer > a {
  142. display: flex;
  143. flex-direction: column;
  144. align-items: center;
  145. text-decoration: none;
  146. font-size: 16px;
  147. color: #555;
  148. }
  149. footer > a:hover {
  150. color: chocolate;
  151. }

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