1. 實(shí)例演示絕對定位與固定定位(完成課堂上的模態(tài)框案例)

<!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>定位實(shí)戰(zhàn):模態(tài)框</title>
  </head>
  <body>
    <header>
      <h2>朱老師的博客</h2>
      <button onclick="document.querySelector('.modal').styel.display='block'">
        登錄
      </button>
    </header>
    <!-- 模態(tài)框 -->
    <div class="modal">
      <!-- 半透明的遮罩 -->
      <div class="modal-bg"></div>
      <!-- 彈層表單 -->
      <form action="" class="modal-form">
        <fieldset style="display: grid; gap: 1em">
          <legend>用戶登錄123</legend>
          <input type="email" name="email" placeholder="123123@qq.com" />
          <input type="password" name="password" placeholder="不少于6位" />
          <button>登錄</button>
        </fieldset>
      </form>
    </div>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: #eee; /* 背景 */
      }
      header {
        background-color: lightseagreen;
        padding: 0.5em 1em;
        display: flex;
      }
      header button {
        margin-left: auto;
        width: 4em;
      }
      .modal {
        /* 把模態(tài)框容器轉(zhuǎn)為“定位元素” */
        position: relative;
      }
      .modal .modal-form fieldset {
        background-color: lightcyan;
        border: none;
        padding: 2em;
        box-shadow: 0 0 5px #888;
      }
      .modal .modal-form fieldset legend {
        padding: 5px 1em;
        background-color: rebeccapurple;
        color: ■ white;
      }
      .modal .modal-form {
        /* 固定定位 */
        position: fixed;
        top: 10em;
        left: 20em;
        right: 20em;
      }
      /*  半透明的遮罩 */
      .modal .modal-bg {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgb(0 0 0 0.5);
      }
      /* 模態(tài)框藏起來代碼 */
      .modal {
        display: none;
      }
    </style>
  </body>
</html>

制作思維導(dǎo)圖,總結(jié)flex,grid屬性,以及他們之間的區(qū)別,盡可能用簡寫

flex,grid區(qū)別

在CSS布局中，flex、grid以及float屬性的差別是flex屬性適用于小的UI元素，grid屬性適合用于為網(wǎng)站整體進(jìn)行布局而float屬性適合在較大的文本文章中設(shè)置圖像

批改老師：

PHPz

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

vscode插件安裝與配置并實(shí)例演示emmet語法

2021-09-28 14:19:19

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

1. 實(shí)例演示絕對定位與固定定位(完成課堂上的模態(tài)框案例)

flex,grid區(qū)別