登录界面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="modal.css" /><style>* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header {
  background-color: #dfdfdf;
  padding: 1em 2em;
  overflow: hidden;
}
header > button {
  width: 20em;
  height: 3em;
  float: right;
}
header > h2 {
  float: left;
}
header button:hover {
  background-color: rgba(0, 255, 255, 0.158);
  cursor: pointer;
}
.modal-main .modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(0, 0, 0, 0.5);
}
.modal-main .modal-body {
  color: white;
  background: linear-gradient(to right, red, blue);
  margin: auto;
  padding: 2em;
  position: fixed;
  top: 9vh;
  left: 30em;
  right: 30em;
  min-width: 35em;
  max-width: 35em;
}
.modal-main .modal-body form {
  width: 85%;
}
.modal-main .modal-body form table caption {
  margin-bottom: 1em;
  font-weight: bolder;
}
.modal-main .modal-body form table td {
  padding: 0.2em;
}
.modal-main .modal-body form table td:first-of-type {
  width: 5em;
}
.modal.main {
  position: relative;
}
.modal-main .modal-body .close {
  position: absolute;
  right: 2em;
}
</style>
  </head>
  <body>
    <header>
      <h2>My Website</h2>
      <button>登录</button>
    </header>
    <div class="modal-main">
      <div class="modal-backdrop"></div>
      <div class="hhh"></div>
      <div class="modal-body">
        <form action="">
          <table>
            <caption>
              用户登录
            </caption>
            <button class="close">关闭</button>
            <tr>
              <td><label for="emai">邮箱：</label></td>
              <td><input type="email" name="email" id="emai" /></td>
            </tr>
            <tr>
              <td><label for="pass">密码：</label></td>
              <td><input type="password" name="pass" id="pass" /></td>
            </tr>
            <tr>
              <td><input type="submit" value="登录" /></td>
            </tr>
          </table>
        </form>
      </div>
    </div>
  </body>
</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：拉伸

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        flex-flow: row nowrap;
        /* justify-content: center; */
        background-color: lightcyan;
        height: 200px;
        justify-content: space-around;
        align-items: flex-start;
        /* align-items: stretch; */
      }
      .item {
        background-color: lightgreen;
        width: 100px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
      <div class="item">item4</div>
    </div>
  </body>
</html>

0324作业

登录界面

flex属性