search

博客列表 >模态框案例

模态框案例

平凡之路
平凡之路原创
2022年03月27日 21:25:26415浏览

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. }
上一条：css-grid布局实战下一条：模态框基础应用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多