Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Flex布局小案例-九期线上班
Blogger Information
Blog 31
fans 0
comment 0
visits 18231
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布局小案例-九期线上班
Content っ
Original
397 people have browsed it

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. }

运行效果

Correction status：qualified

Teacher's comments：你的作业我有印象, 一直非常优秀, 非常用心, 坚信你一定能成为一名合格的程序员
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