search

博客列表 >Flex布局小案例-九期线上班

Flex布局小案例-九期线上班

Content っ
Content っ 原创
2019年11月11日 14:48:32398浏览

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

  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>我的博客</header>
  10. <main>
  11.     <div class="container">
  12.         <h3>后台管理系统</h3>
  13.         <form action="">
  14.             <div>
  15.                 <label for="email">邮箱:</label>
  16.                 <input type="email" name="email" id="email" placeholder="xx@qq.com">
  17.             </div>
  18.             <div>
  19.                 <label for="password">密码:</label>
  20.                 <input type="password" name="password" id="password" placeholder="输入6位以上密码">
  21.             </div>
  22.             <div>
  23.                 <button>登录</button>
  24.             </div>
  25.         </form>
  26.     </div>
  27.     <aside>左边</aside>
  28.     <aside>右边</aside>
  29. </main>
  30. <footer>
  31.     <a href="">网站首页</a>
  32.     <a href="">管理后台</a>
  33.     <a href="">关于我们</a>
  34. </footer>
  35. </body>
  36. </html>
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. header,footer {
  7.     background-color: #ccddcc;
  8.     height: 50px;
  9.     display: flex;
  10.     flex-flow: row nowrap;
  11.     justify-content: center;
  12.     align-items: center;
  13. }
  15. body{
  16.     height: 100vh;
  17.     display: flex;
  18.     flex-flow: column nowrap;
  19. }
  21. main{
  22.     display: flex;
  23.     flex-flow: row nowrap;
  24.     box-sizing: border-box;
  25.     border-bottom: 1px solid #ccc;
  26.     border-top: 1px solid #ccc;
  27.     flex: 1;
  28. }
  30. footer > a{
  31.     text-decoration: none;
  32.     color: #555555;
  33.     display: flex;
  34.     flex: 1;
  35.     border-right: 1px solid #fff;
  36.     justify-content: center;
  37.     align-items: center;
  38. }
  39. /*设置底部"关于我们"标签*/
  40. footer > a:last-of-type{
  41.     border-right: none;
  42. }
  43. /*设置主体区域*/
  44. main > article{
  45.     background-color: lightblue;
  46.     flex: 1;
  47. }
  48. /*设置左边*/
  49. main > aside:first-of-type{
  50.     background-color: lightgreen;
  51.     flex: 0 1 200px;
  52.     order: -1;
  53. }
  54. /*设置右边区域*/
  55. main > aside:last-of-type{
  56.     background-color: lightcoral;
  57.     flex: 0 1 200px;
  58. }
  60. /*主体登录区域*/
  61. .container{
  62.     box-sizing: border-box;
  63.     background: -webkit-linear-gradient(bottom,lavenderblush,lightblue);
  64.     display: flex;
  65.     flex-flow: column nowrap;
  66.     flex: 1;
  67.     justify-content: center;
  68.     align-items: center;
  69. }
  71. .container > form{
  72.     background: -webkit-linear-gradient(right,white,lightblue,white);
  73.     border: 1px solid #999999;
  74.     border-radius: 5px;
  75.     width: 300px;
  76.     height: 150px;
  77.     padding: 10px;
  78.     display: flex;
  79.     flex-flow: column nowrap;
  80. }
  82. .container > h3{
  83.     margin-bottom: 15px;
  84.     font-weight: lighter;
  85.     color: #444;
  86. }
  88. .container > form > div{
  89.     display: flex;
  90.     margin: 10px;
  91. }
  93. .container > form > div > label{
  94.     font-weight: lighter;
  95.     color: #444;
  96. }
  98. /*设置input标签的样式*/
  99. .container > form > div > input{
  100.     flex: 1;
  101.     border: 1px solid #888;
  102.     border-radius: 8px;
  103.     margin-left: 3px;
  104.     padding: 3px;
  105. }
  107. /*设置登录按钮的样式*/
  108. .container > form > div > button{
  109.     flex: 1;
  110.     height: 28px;
  111.     background-color: lightseagreen;
  112.     color: white;
  113.     /*设置字间距*/
  114.     letter-spacing: 15px;
  116.     /*重置按钮边框,先去掉之前的*/
  117.     border: none;
  118.     /*设置圆角*/
  119.     border-radius: 8px;
  120. }
  122. /*设置鼠标移入表单的效果*/
  123. .container > form:hover {
  124.     /*更新背景渐变色*/
  125.     background: linear-gradient(to left top, lightcyan, white);
  126.     /*边框阴影模拟外发光效果*/
  127.     box-shadow: 0 0 5px #888;
  128. }
  130. .container > form > div > input:hover {
  131.     /*更新按钮背景色*/
  132.     border: 1px solid lightcoral;
  133. }
  135. /*设置鼠标移入按钮的效果*/
  136. .container > form > div > button:hover {
  137.     /*更新按钮背景色*/
  138.     background-color: lightcoral;
  139.     /*边框阴影模拟外发光效果*/
  140.     box-shadow: 0 0 5px #888;
  141. }

运行效果

手抄代码



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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>网站后台首页</title>
  6.     <link rel="stylesheet" href="css/style2.css">
  7. </head>
  8. <body>
  9. <header>
  10.     <h2>采售一体化管理平台</h2>
  11.     <div>
  12.         <img src="images/img6.png" alt="">
  13.         <img src="images/img2.png" alt="">
  14.         <img src="images/img4.png" alt="">
  15.     </div>
  16. </header>
  17. <main>
  18.     <div class="container">
  19.         <article>
  20.             <img src="images/img6.png" alt="">
  21.             <p>快捷菜单</p>
  22.         </article>
  23.         <article>
  24.             <img src="images/img6.png" alt="">
  25.             <p>快捷菜单</p>
  26.         </article>
  27.         <article>
  28.             <img src="images/img6.png" alt="">
  29.             <p>快捷菜单</p>
  30.         </article>
  31.         <article>
  32.             <img src="images/img6.png" alt="">
  33.             <p>快捷菜单</p>
  34.         </article>
  35.         <article>
  36.             <img src="images/img6.png" alt="">
  37.             <p>快捷菜单</p>
  38.         </article>
  39.         <div class="tableDiv">
  40.             <table>
  41.                 <caption><h3>货物清单</h3></caption>
  42.                 <!--表头-->
  43.                 <thead>
  44.                 <tr>
  45.                     <th>类别</th>
  46.                     <th>编号</th>
  47.                     <th>名称</th>
  48.                     <th>单价</th>
  49.                     <th>数量</th>
  50.                     <th>金额</th>
  51.                 </tr>
  52.                 </thead>
  53.                 <!--主体-->
  54.                 <tbody>
  55.                 <tr>
  56.                     <td rowspan="3" align="center">手机类</td>
  57.                     <td>1</td>
  58.                     <td>iPhone 11 Pro</td>
  59.                     <td>9999</td>
  60.                     <td>1</td>
  61.                     <td>9999</td>
  62.                 </tr>
  63.                 <tr>
  64.                     <td>2</td>
  65.                     <td>HUAWEI P30 Pro</td>
  66.                     <td>6288</td>
  67.                     <td>2</td>
  68.                     <td>12576</td>
  69.                 </tr>
  70.                 <tr>
  71.                     <td>3</td>
  72.                     <td>Galaxy Note10</td>
  73.                     <td>7999</td>
  74.                     <td>10</td>
  75.                     <td>79990</td>
  76.                 </tr>
  77.                 <tr>
  78.                     <td rowspan="3" align="center">电脑类</td>
  79.                     <td>4</td>
  80.                     <td>华为(2019)MateBookX Pro</td>
  81.                     <td>8699</td>
  82.                     <td>1</td>
  83.                     <td>8699</td>
  84.                 </tr>
  85.                 <tr>
  86.                     <td>5</td>
  87.                     <td>苹果(2019)MacBook Pro</td>
  88.                     <td>18199</td>
  89.                     <td>1</td>
  90.                     <td>18199</td>
  91.                 </tr>
  92.                 <tr>
  93.                     <td>6</td>
  94.                     <td>ThinkPad(2019)X1 extreme</td>
  95.                     <td>13500</td>
  96.                     <td>1</td>
  97.                     <td>13500</td>
  98.                 </tr>
  99.                 </tbody>
  100.                 <!--页眉-->
  101.                 <tfoot>
  102.                 <tr>
  103.                     <td colspan="4" align="center">总计:</td>
  104.                     <td>16</td>
  105.                     <td>142963</td>
  106.                 </tr>
  107.                 </tfoot>
  108.             </table>
  109.         </div>
  110.     </div>
  111.     <div class="leftDiv">
  112.         <span class="item">系统首页</span>
  113.         <span class="item">档案管理</span>
  114.         <span class="item">日常业务</span>
  115.         <span class="item">采集管理</span>
  116.         <span class="item">结算管理</span>
  117.         <span class="item">收费管理</span>
  118.         <span class="item">控制管理</span>
  119.         <span class="item">查询</span>
  120.         <span class="item">报表</span>
  121.         <span class="item">系统管理</span>
  122.     </div>
  123. </main>
  124. <footer>
  125.     <p>Copyright © 2018 -2021 采售一体化管理平台</p>
  126. </footer>
  127. </body>
  128. </html>
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. header{
  7.     background-color: #B3B3B3;
  8.     height: 60px;
  9.     display: flex;
  10.     flex-flow: row nowrap;
  11. }
  13. header > h2{
  14.     color: white;
  15.     text-align: center;
  16.     margin-top: 10px;
  17. }
  19. header > div{
  20.     display: flex;
  21.     flex: 1;
  22.     justify-content: flex-end;
  23.     align-items: center;
  24.     margin: 10px;
  25. }
  27. header > div > img{
  28.     width: 35px;
  29.     height: 35px;
  30.     margin: 10px;
  31.     padding-right: 10px;
  32.     border-right: 1px solid #999;
  33. }
  35. header > div > img:last-of-type {
  36.     border-right: none;
  37. }
  39. footer {
  40.     background-color: #ccddcc;
  41.     height: 50px;
  42.     display: flex;
  43.     flex-flow: row nowrap;
  44.     justify-content: center;
  45.     align-items: center;
  46. }
  48. body{
  49.     height: 100vh;
  50.     display: flex;
  51.     flex-flow: column nowrap;
  52. }
  54. main{
  55.     display: flex;
  56.     flex-flow: row nowrap;
  57.     box-sizing: border-box;
  58.     border-bottom: 1px solid #ccc;
  59.     border-top: 1px solid #ccc;
  60.     flex: 1;
  61. }
  63. footer > a{
  64.     text-decoration: none;
  65.     color: #555555;
  66.     display: flex;
  67.     flex: 1;
  68.     border-right: 1px solid #fff;
  69.     justify-content: center;
  70.     align-items: center;
  71. }
  72. /*设置底部"关于我们"标签*/
  73. footer > a:last-of-type{
  74.     border-right: none;
  75. }
  76. /*设置主体区域*/
  77. main > article{
  78.     background-color: lightblue;
  79.     flex: 1;
  80. }
  81. /*设置左边*/
  82. main > .leftDiv{
  83.     display: flex;
  84.     background-color: lightsteelblue;
  85.     width: 130px;
  86.     min-width: 130px;
  87.     flex-flow: column wrap;
  88.     order: -1;
  89. }
  91. main > .leftDiv > span{
  92.     flex: 1;
  93.     border-bottom: 1px solid white;
  94.     text-align: center;
  95.     padding: 12px;
  96. }
  98. /*主体区域*/
  99. .container{
  100.     box-sizing: border-box;
  101.     background: -webkit-linear-gradient(bottom,lavenderblush,lightblue);
  102.     display: flex;
  103.     flex-flow: row wrap;
  104.     flex: 1;
  105.     justify-content: center;
  106. }
  108. .container > article{
  109.     background-color: lightseagreen;
  110.     width: 180px;
  111.     height: 100px;
  112.     margin-right: 25px;
  113.     justify-content: center;
  114.     align-content: center;
  115.     margin-top: 10px;
  116. }
  118. .container > article > img{
  119.     width: 60px;
  120.     height: 60px;
  121.     margin: 0 50px;
  122. }
  124. .container > article > p{
  125.     margin: 0 50px;
  126. }
  128. .tableDiv{
  129.     display: flex;
  130. }
  132. table{
  133.     border: 1px solid lightgray;
  134.     box-sizing: border-box;
  135.     box-shadow: 1px 1px 1px #999 ;
  136.     color: #444;
  137.     width: 700px;
  138.     margin: 20px auto;
  139.     border-collapse: collapse;
  140. }
  142. th,td{
  143.     border: 1px solid lightgray;
  144.     text-align: center;
  145.     padding: 10px;
  146. }
  148. table caption{
  149.     font-size: 1.3rem;
  150. }
  152. table thead{
  153.     background: linear-gradient(purple,white);
  154. }
  156. table tfoot{
  157.     background: linear-gradient(yellow,white);
  158. }
  160. table tbody > tr:nth-of-type(even){
  161.     background-color: #ededed;
  162. }
  164. table tbody > tr:first-of-type td:first-of-type{
  165.     background: radial-gradient(orange, white);
  166. }
  168. table tbody > tr:nth-last-child(3) td:first-of-type{
  169.     background-color: olive;
  170. }
  172. table tfoot > tr:last-of-type td:last-of-type{
  173.     background-color: linen;
  174. }

运行效果

上一条：实战PHPcnUI手册页面FLEX布局以及前端总结-PHP第九期线上班下一条：Flex改写phpcnui手册的代码--PHP培训9期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多