简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 制作简易模态框登录页面及flex与grid整理总结
Blogger Information
Blog 49
fans 0
comment 0
visits 38128
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
制作简易模态框登录页面及flex与grid整理总结
超超多喝水
Original
613 people have browsed it

制作简易模态框登录页面及 flex 与 grid 整理总结

制作简易模态框登录页面

  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>模态框</title>
  8.     <style>
  9.       /* 页面内容初始化 */
  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.       /* 配置模态框 */
  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.         /* 临时加入一个颜色方便布局 */
  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.       /* 页眉使用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.       /* 给页眉的按钮添加样式 */
  75.       .header button {
  76.         width: 6rem;
  77.         font-size: 1.8rem;
  78.       }
  79.       /* 限制一下主体中测试图片的宽度 */
  80.       .main img {
  81.         width: 100%;
  82.       }
  83.       /* 给页脚添加一些样式 */
  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.     <!-- 配置模态框背景 -->
  97.     <!-- 配置登录表单 -->
  98.     <!-- 将页面分成三部分，页眉，主体，页脚 -->
  100.     <!-- 模态框 -->
  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>用户登录</legend>
  106.           <div class="uname">
  107.             <label for="uname">账号：</label>
  108.             <input type="text" name="uname" id="uname" placeholder="请输入账号或手机号" required />
  109.           </div>
  110.           <div class="pwd">
  111.             <label for="pwd">密码：</label>
  112.             <input type="password" name="pwd" id="pwd" placeholder="请输入密码" required />
  113.           </div>
  114.           <button>登录</button>
  115.         </fieldset>
  116.       </form>
  117.     </div>
  119.     <!-- 页眉 -->
  120.     <div class="header">
  121.       <!-- 添加一个标题跟按钮-->
  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.     <!-- 页脚 -->
  137.     <div class="footer">
  138.       <span>友情链接：</span>
  139.       <a href="https://www.php.cn/">php中文网</a>
  140.     </div>
  141.   </body>
  142. </html>

flex 整理总结

点击查看思维导图

grid 整理总结

点击查看思维导图

Correcting teacher：PHPzPHPz

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！