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

搜索
博主信息
博文 49
粉絲 0
評(píng)論 0
訪問(wèn)量 49549
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
制作簡(jiǎn)易模態(tài)框登錄頁(yè)面及flex與grid整理總結(jié)
超超多喝水
原創(chuàng)
697人瀏覽過(guò)

制作簡(jiǎn)易模態(tài)框登錄頁(yè)面及 flex 與 grid 整理總結(jié)

制作簡(jiǎn)易模態(tài)框登錄頁(yè)面

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>模態(tài)框</title>
  8.     <style>
  9.       /* 頁(yè)面內(nèi)容初始化 */
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.       }
  15.       html {
  16.         font-size: 10px;
  17.       }
  18.       body {
  19.         font-size: 1.6rem;
  20.       }
  21.       a {
  22.         text-decoration: none;
  23.         color: white;
  24.       }
  25.       /* 配置模態(tài)框 */
  26.       .modal {
  27.         position: relative;
  28.         display: none;
  29.       }
  30.       /* 配置遮罩 */
  31.       .modal .modal-bgc {
  32.         position: fixed;
  33.         background-color: rgb(0, 0, 0, 0.5);
  34.         top: 0;
  35.         right: 0;
  36.         bottom: 0;
  37.         left: 0;
  38.       }
  39.       /* 配置登錄表單，使用grid布局 */
  40.       .modal .modal-form {
  41.         /* 臨時(shí)加入一個(gè)顏色方便布局 */
  42.         /* background-color: lightskyblue; */
  43.         position: fixed;
  44.         left: 20rem;
  45.         right: 20rem;
  46.         top: 20rem;
  47.       }
  48.       .modal .modal-form fieldset {
  49.         background-color: lightskyblue;
  50.         border: none;
  51.         display: grid;
  52.         gap: 1rem;
  53.         padding: 3rem;
  54.         box-shadow: 0 0 5px #888;
  55.       }
  56.       .modal .modal-form fieldset legend {
  57.         padding: 1rem;
  58.         background-color: hotpink;
  59.         color: white;
  60.       }
  61.       .modal .modal-form fieldset div input {
  62.         width: 100%;
  63.       }
  64.       /* 頁(yè)眉使用flex布局 */
  65.       .header {
  66.         background-color: lightskyblue;
  67.         width: 100%;
  68.         height: 6rem;
  69.         display: flex;
  70.         font-size: 1.8rem;
  71.         place-content: space-between;
  72.         padding: 1rem;
  73.       }
  74.       /* 給頁(yè)眉的按鈕添加樣式 */
  75.       .header button {
  76.         width: 6rem;
  77.         font-size: 1.8rem;
  78.       }
  79.       /* 限制一下主體中測(cè)試圖片的寬度 */
  80.       .main img {
  81.         width: 100%;
  82.       }
  83.       /* 給頁(yè)腳添加一些樣式 */
  84.       .footer {
  85.         background-color: lightslategray;
  86.         width: 100%;
  87.         height: 10rem;
  88.         padding: 2rem 0 0 2rem;
  89.       }
  90.       .footer a:hover {
  91.         color: lightskyblue;
  92.       }
  93.     </style>
  94.   </head>
  95.   <body>
  96.     <!-- 配置模態(tài)框背景 -->
  97.     <!-- 配置登錄表單 -->
  98.     <!-- 將頁(yè)面分成三部分，頁(yè)眉，主體，頁(yè)腳 -->
  100.     <!-- 模態(tài)框 -->
  101.     <div class="modal">
  102.       <div class="modal-bgc" onclick="this.parentNode.style.display='none'"></div>
  103.       <form action="" class="modal-form">
  104.         <fieldset>
  105.           <legend>用戶(hù)登錄</legend>
  106.           <div class="uname">
  107.             <label for="uname">賬號(hào)：</label>
  108.             <input type="text" name="uname" id="uname" placeholder="請(qǐng)輸入賬號(hào)或手機(jī)號(hào)" required />
  109.           </div>
  110.           <div class="pwd">
  111.             <label for="pwd">密碼：</label>
  112.             <input type="password" name="pwd" id="pwd" placeholder="請(qǐng)輸入密碼" required />
  113.           </div>
  114.           <button>登錄</button>
  115.         </fieldset>
  116.       </form>
  117.     </div>
  119.     <!-- 頁(yè)眉 -->
  120.     <div class="header">
  121.       <!-- 添加一個(gè)標(biāo)題跟按鈕-->
  122.       <h2>超超多喝水</h2>
  123.       <button onclick="document.querySelector('.modal').style.display='block'">登錄</button>
  124.     </div>
  126.     <!-- 主體 -->
  127.     <div class="main">
  128.       <img src="  替換為圖片鏈接" alt="" />
  129.       <img src="  替換為圖片鏈接" alt="" />
  130.       <img src="  替換為圖片鏈接" alt="" />
  131.       <img src="  替換為圖片鏈接" alt="" />
  132.       <img src="  替換為圖片鏈接" alt="" />
  133.       <img src="  替換為圖片鏈接" alt="" />
  134.     </div>
  136.     <!-- 頁(yè)腳 -->
  137.     <div class="footer">
  138.       <span>友情鏈接：</span>
  139.       <a href="http://ipnx.cn/">php中文網(wǎng)</a>
  140.     </div>
  141.   </body>
  142. </html>

flex 整理總結(jié)

點(diǎn)擊查看思維導(dǎo)圖

grid 整理總結(jié)

點(diǎn)擊查看思維導(dǎo)圖

批改老師：PHPzPHPz

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

老師批語(yǔ)：課上的內(nèi)容總結(jié)到位
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)