简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >Flex布局小案例（第八章1106作业）-PHP培训九期线上班

Flex布局小案例（第八章1106作业）-PHP培训九期线上班

yany
yany原创
2019年12月25日 14:15:50635浏览

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. }
上一条：2019年12月23日作业下一条：12月24日- jQuery事件、动画
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多