简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 模态框案例
Blogger Information
Blog 8
fans 0
comment 0
visits 3603
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
模态框案例
平凡之路
Original
403 people have browsed it

MTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <link rel="stylesheet" href="/HTML/css/modal.css" />
  9.   </head>
  10.   <body>
  11.     <header>
  12.       <h2 class="title">晖创财务</h2>
  13.       <button onelick="showmodal（）">登录</button>
  14.     </header>
  16.     <!-- 模态框 -->
  17.     <div class="modal">
  18.       <!-- 1半透明遮罩 -->
  19.       <div class="modal-bg" onclick="cloaemodal()"></div>
  20.       <!-- 2弹层表单 -->
  21.       <form action="" class="modal-form">
  22.         <fieldset style="display: grid; gap: 1em">
  23.           <legend>
  24.             <button>账号登录</button>
  25.             <button>短息登录</button>
  26.           </legend>
  28.           <input type="admin" name="name" id="" placeholder="账号" />
  29.           <input type="user" name="usser" id="" placeholder="密码（8位数以上）" />
  30.           <button class="box1">登录</button>
  31.         </fieldset>
  32.       </form>
  33.     </div>
  34.   </body>
  35. </html>

CSS

  1. /* 初始化 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  8. /* 头部样式 */
  9. header {
  10.   background-color: cornflowerblue;
  11.   padding: 0.5em 1em;
  12.   display: flex;
  13. }
  15. /* logo */
  17. header .title {
  18.   color: white;
  19.   letter-spacing: 5px;
  20.   text-shadow: 1px 1px 1px #555;
  21. }
  23. /* 登录按钮 */
  24. header button {
  25.   margin-left: auto;
  26.   width: 5em;
  27.   border: none;
  28.   border-radius: 0.5em;
  29. }
  31. header button:hover {
  32.   cursor: pointer;
  33.   background-color: pink;
  34.   color: #fff;
  35.   box-shadow: 0 0 5px #fff;
  36.   transition: 0.3s;
  37. }
  39. /* 模态框 */
  40. .modal .modal-form fieldset {
  41.   height: 15.5em;
  42.   background-color: lightcyan;
  43.   border: none;
  44.   padding: 2em 3em;
  45.   box-shadow: 0 0 0 5px lavender;
  46. }
  48. /* 模态框表单标题 */
  49. .modal .modal-form fieldset legend {
  50.   padding: 0px 0px;
  51.   width: 300px;
  52.   box-shadow: 0 0 0 0px cornflowerblue;
  53.   background-color: cornflowerblue;
  54. }
  56. /* 定位 */
  57. .modal .modal-form {
  58.   position: fixed;
  59.   top: 10em;
  60.   left: 30em;
  61.   right: 30em;
  62. }
  64. /* 遮罩  固定定位 */
  65. .modal .modal-bg {
  66.   position: fixed;
  67.   top: 0;
  68.   left: 0;
  69.   right: 0;
  70.   bottom: 0;
  71.   background-color: rgba(0, 0, 0, 0.281);
  72. }
  74. div button:hover {
  75.   background-color: coral;
  76.   color: #fff;
  77.   box-shadow: 0 0 5px #fff;
  78.   font-size: ;
  79.   transition: 0.1s;
  80. }
  81. legend button {
  82.   padding: 4px 4px;
  83.   width: 148px;
  84.   font size: 14px;
  85. }
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！