Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Flex布局小案例（第八章1106作业）-PHP培训九期线上班
Blogger Information
Blog 8
fans 0
comment 0
visits 4900
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布局小案例（第八章1106作业）-PHP培训九期线上班
yany
Original
648 people have browsed it

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

demo1.html

  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="">工具手册</a>
  15. </footer>
  17. </body>
  18. </html>

style1.css

  1. *{
  2.     margin:0;
  3.     padding: 0;
  4. }
  5. a{
  6.     text-decoration: none;
  7.     color: #555555;
  8. }
  9. body{
  10.     height: 100vh;    /*vh:视口高度百分比,让body撑开页面,上下无限翻屏，vw:左右无限翻屏*/
  11.     display: flex;
  12.     flex-flow: column nowrap;    /*主轴方向垂直排列，宽度超过主轴宽度时不换行*/
  13. }
  14. header,footer{
  15.     box-sizing: border-box;    /*盒子不受边框和内边距的影响*/
  16.     background-color: lightgrey;
  17.     height:50px;
  18.     display: flex;    /*header,footer为body中的弹性元素，要设置header，body中的元素排列方式，要将其再看成时弹性盒子*/
  19.     justify-content: center;     /*元素在主轴上的排列*/
  20.     align-items: center;       /*元素在垂直轴居中*/
  21. }
  22. main{
  23.     box-sizing: border-box;
  24.     background-color: lightsteelblue;
  25.     flex: 1;    /*剩余空间给主体*/
  26. }
  27. footer>a{
  28.     border-right:1px solid white;
  29.     flex: 1;
  30.     display: flex;
  31.     justify-content: center;
  32.     align-items: center;
  33. }
  34. footer>a:last-of-type{
  35.     border-right: none;
  36. }

demo2.html

  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>

style2.css

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body{
  6.     height: 100vh;
  7.     display: flex;
  8.     flex-flow: column nowrap;
  9. }
  10. header,footer{
  11.     box-sizing: border-box;
  12.     background-color: lightgray;
  13.     height: 50px;
  14. }
  15. main{
  16.     box-sizing: border-box;
  17.     flex: 1;
  18.     display: flex;
  19.     background-color: mediumaquamarine;
  20. }
  21. main>aside{
  22.     box-sizing: border-box;
  23.     width: 200px;
  24. }
  25. main>aside:first-of-type{
  26.     background-color:lightpink;
  27.     order: -1;     /*调整弹性元素在主轴上的顺序，默认为0，允许负值或其他整数，这里让左边栏到最左边*/
  28. }
  29. main>aside:last-of-type{
  30.     background-color: lightpink;
  31. }
  32. main>article{
  33.     box-sizing: content-box;
  34.     flex: 1;
  35. }

demo3.html

  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.             <lable for="email">邮箱：</lable>
  14.             <input type="email" id="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>

style3.css

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




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

demo4.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>考试系统管理后台</title>
  6.     <link rel="stylesheet" href="css/style4.css">
  7. </head>
  8. <body>
  9. <header>考试系统管理后台</header>
  10. <main>
  11.     <article>
  12.         <div>代办事项</div>
  13.         <div>用户数据分析</div>
  14.     </article>
  15.     <aside>
  16.         <div><a href="">公告管理</a></div>
  17.         <div><a href="">知识库</a></div>
  18.         <div><a href="">系统维护</a></div>
  19.         <div><a href="">权限管理</a></div>
  20.     </aside>
  21. </main>
  22. <footer>教育网 copyright©2020</footer>
  23. </body>
  24. </html>

style4.css

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body{
  6.     height: 100vh;
  7.     display: flex;
  8.     flex-flow: column nowrap;
  9. }
  10. header,footer{
  11.     display: flex;
  12.     box-sizing: border-box;
  13.     background-color: lightgrey;
  14.     height: 50px;
  15.     justify-content: center;
  16.     align-items: center;
  17. }
  18. main{
  19.     display: flex;
  20.     box-sizing: border-box;
  21.     flex:1;
  22. }
  23. main>aside{
  24.     display: flex;
  25.     box-sizing: border-box;
  26.     width: 100px;
  27.     background-color: lightsteelblue;
  28.     flex-flow: column nowrap;
  29.     order: -1;
  30. }
  31. main>aside>div{
  32.     display: flex;
  33.     box-sizing: border-box;
  34.     flex:1 0 auto
  35. }
  36. main>aside>div>a{
  37.     display: flex;
  38.     box-sizing: border-box;
  39.     cursor: pointer;
  40.     text-decoration-line: none;
  41.     flex: 1 0 auto;
  42.     justify-content: center;
  43.     align-items: center;
  44.     color: black;
  45. }
  46. main>aside>div>a:hover{
  47.     background-color: lightslategrey;
  48. }
  50. main>article{
  51.     display: flex;
  52.     box-sizing: border-box;
  53.     flex: 1;
  54.     flex-flow: column nowrap;
  55.     background-color: lightyellow;
  56. }
  57. main>article>:first-child{
  58.     display: flex;
  59.     box-sizing: border-box;
  60.     flex:30%;
  61.     background-color: white;
  62. }
  63. main>article>:last-child{
  64.     display: flex;
  65.     box-sizing: border-box;
  66.     flex: 70%;
  67. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：以后作业要注意以下三点: 1. 作业要有主题 2. 代码要有注释 3. 作业要有总结
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