Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 0324作业
Blogger Information
Blog 13
fans 0
comment 0
visits 5936
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
0324作业
　
Original
433 people have browsed it

登录界面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="modal.css" /><style>* {
  9.   margin: 0;
  10.   padding: 0;
  11.   box-sizing: border-box;
  12. }
  13. header {
  14.   background-color: #dfdfdf;
  15.   padding: 1em 2em;
  16.   overflow: hidden;
  17. }
  18. header > button {
  19.   width: 20em;
  20.   height: 3em;
  21.   float: right;
  22. }
  23. header > h2 {
  24.   float: left;
  25. }
  26. header button:hover {
  27.   background-color: rgba(0, 255, 255, 0.158);
  28.   cursor: pointer;
  29. }
  30. .modal-main .modal-backdrop {
  31.   position: fixed;
  32.   top: 0;
  33.   left: 0;
  34.   right: 0;
  35.   bottom: 0;
  36.   background-color: rgb(0, 0, 0, 0.5);
  37. }
  38. .modal-main .modal-body {
  39.   color: white;
  40.   background: linear-gradient(to right, red, blue);
  41.   margin: auto;
  42.   padding: 2em;
  43.   position: fixed;
  44.   top: 9vh;
  45.   left: 30em;
  46.   right: 30em;
  47.   min-width: 35em;
  48.   max-width: 35em;
  49. }
  50. .modal-main .modal-body form {
  51.   width: 85%;
  52. }
  53. .modal-main .modal-body form table caption {
  54.   margin-bottom: 1em;
  55.   font-weight: bolder;
  56. }
  57. .modal-main .modal-body form table td {
  58.   padding: 0.2em;
  59. }
  60. .modal-main .modal-body form table td:first-of-type {
  61.   width: 5em;
  62. }
  63. .modal.main {
  64.   position: relative;
  65. }
  66. .modal-main .modal-body .close {
  67.   position: absolute;
  68.   right: 2em;
  69. }
  70. </style>
  71.   </head>
  72.   <body>
  73.     <header>
  74.       <h2>My Website</h2>
  75.       <button>登录</button>
  76.     </header>
  77.     <div class="modal-main">
  78.       <div class="modal-backdrop"></div>
  79.       <div class="hhh"></div>
  80.       <div class="modal-body">
  81.         <form action="">
  82.           <table>
  83.             <caption>
  84.               用户登录
  85.             </caption>
  86.             <button class="close">关闭</button>
  87.             <tr>
  88.               <td><label for="emai">邮箱：</label></td>
  89.               <td><input type="email" name="email" id="emai" /></td>
  90.             </tr>
  91.             <tr>
  92.               <td><label for="pass">密码：</label></td>
  93.               <td><input type="password" name="pass" id="pass" /></td>
  94.             </tr>
  95.             <tr>
  96.               <td><input type="submit" value="登录" /></td>
  97.             </tr>
  98.           </table>
  99.         </form>
  100.       </div>
  101.     </div>
  102.   </body>
  103. </html>

flex属性

display:flex 声明为弹性盒
flex-flow:(row nowrap);默认值 水平轴 不换行
flex-flow:(column wrap)；改变轴向 内容换行
flex-direction: row/column;更改轴向
justify-content:center/ 居中
justify-content:left 居左
jutify-content：right 居右
jutify-content：inherit 继承
jutify-content：space-between 水平分布
jutify-content：space-around 周围均分
align-items：flex-end 从右排列
align-items:stretch：拉伸

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       .container {
  10.         display: flex;
  11.         flex-flow: row nowrap;
  12.         /* justify-content: center; */
  13.         background-color: lightcyan;
  14.         height: 200px;
  15.         justify-content: space-around;
  16.         align-items: flex-start;
  17.         /* align-items: stretch; */
  18.       }
  19.       .item {
  20.         background-color: lightgreen;
  21.         width: 100px;
  22.         border: 1px solid black;
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <div class="container">
  28.       <div class="item">item1</div>
  29.       <div class="item">item2</div>
  30.       <div class="item">item3</div>
  31.       <div class="item">item4</div>
  32.     </div>
  33.   </body>
  34. </html>
Correcting teacher：天蓬老师天蓬老师

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