一个简单的模态框 -

1、效果展示

2、html代码

<body>
    <!-- 页眉 -->
    <header>
      <div class="logo">
        <a href="">PHP中文网</a>
      </div>
      <div class="logo">
        <a href="">登陆</a>
      </div>
    </header>
    <!-- 模态框 -->
    <div class="container">
      <!-- 蒙版 -->
      <div class="moban"></div>
      <!-- 用户表单 -->
      <div class="biaodan">
        <h3>用户登录</h3>
        <button>关闭</button>
        <form action="">
          <label for="username">用户名：</label>
          <input type="text" id="username" name="username" />
          <label for="passwd">密码：</label>
          <input type="text" id="passwd" name="passwd" />
          <label for="xueli">学历：</label>
          <select name="xueli" id="xueli">
            <option value="1">高中</option>
            <option value="2" selected>大专</option>
            <option value="3">本科</option>
            <option value="4">硕士</option>
            <option value="5">博士</option>
          </select>
          <button>登陆</button>
        </form>
      </div>
    </div>
  </body>

3、css代码

     <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      a {
        text-decoration: none;
        color: #ffffff;
      }
      /* 导航 */
      header {
        width: 100vw;
        height: 3em;
        padding: 1.5em;
        font-size: 1.2rem;
        background: linear-gradient(to right, cornflowerblue 50%, green 90%);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      /* 模态框 */
      .moban {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #000000;
        opacity: 0.5;
      }
      .biaodan {
        min-width: 20em;
        background: cornflowerblue;
        padding: 1em;
        border-radius: 5%;
        position: fixed;
        top: 10em;
        left: 35%;
        right: 35%;
      }
      .biaodan > form {
        display: grid;
        grid-template-columns: 4em 1fr;
        gap: 1em;
        padding: 1.2em;
      }
      .biaodan > form > button {
        grid-column: span 2;
        height: 3em;
        border-radius: 1em;
      }
      .biaodan > button {
        position: absolute;
        top: 1.3em;
        right: 2em;
      }
      .container {
        /* display: none; */
      }
    </style>