Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > flex布局小案例
Blogger Information
Blog 12
fans 0
comment 0
visits 8589
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex布局小案例
brait
Original
727 people have browsed it

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

DEMO1：手机端通用布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>手机端通用布局</title>
  6.     <link rel="stylesheet" href="css/style1.css">
  7. </head>
  8. <body>
  9.     <header>PHP中文网</header>
  10.     <main>主体</main>
  11.     <footer>
  12.         <a href="">官网首页</a>
  13.         <a href="">教学视频</a>
  14.         <a href="" class="last-link">工具手册</a>
  15.     </footer>
  16. </body>
  17. </html>

CSS部分：

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. a {
  7.     text-decoration: none;
  8.     color: #555555;
  9. }
  12. body {
  14.     height: 100vh;
  15.     display: flex;
  16.     flex-flow: column nowrap;
  17. }
  19. header, footer {
  20.     box-sizing: border-box;
  21.     background-color: #ededed;
  22.     height: 50px;
  23.     display: flex;
  24.     flex-flow: row nowrap;
  25.     justify-content: center;
  26.     align-items: center;
  27. }
  29. main {
  30.     box-sizing: border-box;
  31.     flex: 1;
  32.     background-color: #ffffff;
  33.     border-top: 1px solid #cccccc;
  34.     border-bottom: 1px solid #cccccc;
  35. }
  37. footer > a {
  38.     /*line-height: 50px;*/
  39.     /*text-align: center;*/
  40.     border-right: 1px solid white;
  41.     flex: 1;
  42.     display: flex;
  43.     justify-content: center;
  44.     align-items: center;
  45. }
  47. footer > a:last-of-type {
  48.     border-right: none;
  49. }

运行效果：


DEMO2:圣杯布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex实现圣杯布局</title>
  6.     <link rel="stylesheet" href="css/style2.css">
  7. </head>
  8. <body>
  9.     <header>头部</header>
  10.     <main>
  11.         <article>内容区</article>
  12.         <aside>左边栏</aside>
  13.         <aside>右边栏</aside>
  14.     </main>
  15.     <footer>底部</footer>
  17. </body>
  18. </html>

CSS部分：

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. body {
  8.     height: 100vh;
  9.     display: flex;
  10.     flex-flow: column nowrap;
  11. }
  13. header, footer {
  14.     box-sizing: border-box;
  16.     background-color: #ededed;
  17.     height: 50px;
  19. }
  21. main {
  22.     box-sizing: border-box;
  23.     flex: 1;
  24.     background-color: #ffffff;
  25. }
  28. main {
  29.     display: flex;
  30. }
  32. main > aside {
  33.     box-sizing: border-box;
  35.     width: 200px;
  36.     background-color: wheat;
  37. }
  39. main > article {
  40.     box-sizing: border-box;
  41.     flex: 1;
  42.     background-color: lightblue;
  43. }
  45. main > aside:first-of-type {
  47.     order: -1;
  48. }

运行效果：


DEMO3:酷炫的登录界面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>弹性布局实现登录表单</title>
  6.     <link rel="stylesheet" href="css/style3.css">
  7. </head>
  8. <body>
  9. <div class="container">
  10.     <h3>管理员登陆</h3>
  11.     <form action="">
  12.         <div>
  13.             <label for="email">邮箱:</label>
  14.             <input type="email" id="email" name="email" placeholder="example@email.com">
  15.         </div>
  16.         <div>
  17.             <label for="password">密码:</label>
  18.             <input type="password" id="password" name="password" placeholder="不少于6位">
  19.         </div>
  20.         <div>
  21.             <button>提交</button>
  22.         </div>
  23.     </form>
  24. </div>
  26. </body>
  27. </html>

CSS部分

  1. * {
  2.     padding: 0;
  3.     margin: 0;
  5. }
  7. body {
  9.     display: flex;
  10.     height: 100vh;
  11.     flex-flow: column nowrap;
  12.     justify-content: center;
  13.     align-items: center;
  14.     color: #444;
  15.     font-weight: lighter;
  16.     background: linear-gradient(to top, lightcyan, white, lightcyan);
  17. }
  20. .container {
  21.     box-sizing: border-box;
  22.     width: 300px;
  23.     padding: 20px;
  24.     position: relative;
  25.     top: -60px;
  26. }
  29. .container > h3 {
  30.     text-align: center;
  31.     margin-bottom: 15px;
  32.     font-weight: lighter;
  33. }
  36. .container > form {
  37.     display: flex;
  38.     flex-flow: column nowrap;
  39.     border: 1px solid gray;
  40.     padding: 15px;
  41.     border-radius: 10px;
  42.     background: linear-gradient(to right bottom, lightblue, white);
  44. }
  46. .container > form:hover {
  47.     background: linear-gradient(to left top, lightcyan, white);
  48.     box-shadow: 0 0 5px #888;
  49. }
  50. .container > form > div {
  52.     display: flex;
  53.     margin: 10px 0;
  54. }
  57. .container > form > div > input {
  58.     flex: 1;
  59.     margin-left: 10px;
  60.     padding-left: 6px;
  61.     border: 1px solid #888;
  62.     border-radius: 8px;
  64. }
  66. .container > form > div > button {
  68.     flex: 1;
  69.     background-color: lightseagreen;
  70.     color: white;
  71.     height: 24px;
  72.     letter-spacing: 15px;
  73.     border: none;
  74.     border-radius: 8px;
  75. }
  77. .container > form > div > button:hover {
  78.     background-color: lightcoral;
  79.     box-shadow: 0 0 5px #888;
  80. }

运行效果：



2. 自己根据自己情况, 自定义一个小案例, 使用flex实现, 例如网站后台首页

demo：仿网易邮箱登录界面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>仿某易邮箱</title>
  6.     <link rel="stylesheet" href="css/style.css">
  7. </head>
  8. <body>
  9.     <header>网易邮箱中文邮箱第一品牌</header>
  10.     <main>
  12.         <div class="log">
  13.             <h2>邮箱账号登录</h2>
  14.             <form>
  15.                 <div>
  16.                     <label for="email">邮箱</label>
  17.                     <input type="email" id="email" name="email" placeholder="example@163.com">
  18.                 </div>
  19.                 <div>
  20.                     <label for="password">密码</label>
  21.                     <input type="password" id="password" name="password" placeholder="不少于6位数">
  22.                 </div>
  23.                 <div>
  24.                     <button>登录</button>
  25.                 </div>
  26.                 <div>
  27.                     <a href="">注册新账户</a>
  28.                 </div>
  29.         </form>
  30.         </div>
  32.     </main>
  33.     <footer>
  34.         <a href="">网易首页</a>
  35.         <a href="">网易严选</a>
  36.         <a href="">网易有钱</a>
  37.         <a href="">政府公益热线</a>
  38.         <a href="">隐私政策</a>
  39.     </footer>
  42. </body>
  43. </html>

CSS部分：

  1. *{
  2.     padding: 0;
  3.     margin: 0;
  5. }
  7. body{
  8.     height: 100vh;
  10.     /*将整个页面转为弹性盒子FlexBox*/
  11.     display: flex;
  12.     /*主轴垂直且不换行*/
  13.     flex-flow: column nowrap;
  15. }
  17. main{
  19.     background: linear-gradient(to right , #0033ff,#0099ff,#0033ff);
  20.     display: flex;
  21.     flex: 1;
  23.     justify-content: center;
  24.     align-items: center;
  27. }
  30. main > div {
  32.     height : 500px;
  33.     width :  400px;
  34.     display: flex;
  35.     flex-flow: column nowrap;
  36.     background-color: white;
  37.     position: relative;
  38.     right: -300px;
  41. }
  43. main > div > h2{
  45.     margin-top:30px;
  46.     margin-bottom:30px;
  47.     text-align: center;
  49. }
  51. form > div {
  52.     display: flex;
  53.     padding: 13px;
  56. }
  60. form > div >input {
  62.     flex:1;
  63.     margin-left: 10px;
  64. }
  66. form > div > button {
  68.     flex: 1;
  69.     background-color:rgb(0, 102, 255);
  70.     color: white;
  71.     height: 24px;
  72.     letter-spacing: 25px;
  73.     border: none;
  74.     border-radius: 8px;
  75. }
  77. button:hover{
  79.     box-shadow: 0 0 5px #888;
  80. }
  82. form > div:last-of-type {
  83.     justify-content: center;
  84.     align-items: center;
  86. }
  88. form > div > a{
  89.     text-decoration: none;
  90. }
  92. header,footer{
  93.     height: 70px;
  95. }
  97. footer{
  98.     display: flex;
  99.     justify-content: center;
  100.     align-items: center;
  101. }
  103. footer > a {
  104.     text-decoration: none;
  105.     display: flex;
  106.     flex: 1;
  107.     border-right: 1px solid lightgray;
  108.     justify-content: center;
  109.     align-items: center;
  110. } 
  112. footer > a:link{
  113.     color: gray;
  114. }
  116. footer > a:visited{
  117.     color: gray;
  118. }
  120. footer > a:last-of-type{
  121.     border-right: none;
  122. }

效果对比


总结：吧标签设置成弹性盒子，再对弹性盒子进行定义。这种方法写网页结构要简单一些，最主要的是层层嵌套的盒子不要混淆。最后，网易估计要恨死我了，模仿的那么丑。。。

Correction status：qualified

Teacher's comments：你的笔记本是MacBook Air, 这是也是我的第一台Mac本, 当时淘的二手, 4000, 差不多一个月吃土, 现在想来,快十年了.... 扯远了, 你的作业完成的很不错, 加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post