search

博客列表 >将模态框案例再动手写一遍,不要全抄课堂源码,要有自己的创意

将模态框案例再动手写一遍,不要全抄课堂源码,要有自己的创意

迷途的耗子
迷途的耗子原创
2022年03月23日 23:45:13292浏览

将模态框案例再动手写一遍,不要全抄课堂源码,要有自己的创意

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>模态框</title>
  9.     <link rel="stylesheet" href="modal1.css" />
  10. </head>
  12. <body>
  13.     <header>
  14.         <h2 class="title">耗子的博客</h2>
  15.         <button onclick="showModal()">进入</button>
  16.     </header>
  17.     <div class="modal">
  18.         <div class="modal-bg" onclick="closeModal()"></div>
  19.         <form action="" class="modal-form">
  20.             <fieldset style="display: grid; gap: 1em">
  21.                 <legend>欢迎</legend>
  22.                 <input type="email" name="email" placeholder="mouse@163.com" />
  23.                 <input type="password" name="password" placeholder="不少于16位" />
  24.                 <button>进入</button>
  25.             </fieldset>
  26.         </form>
  27.     </div>
  28.     <script src="modal.js"></script>
  29. </body>
  31. </html>
  1. /* 初始化 */
  3. * {
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }
  10. /* 头部 */
  12. header {
  13.     background-color: rgb(245, 122, 7);
  14.     padding: 0.5em 1em;
  15.     display: flex;
  16. }
  19. /* logo  */
  21. header .title {
  22.     font-weight: lighter;
  23.     font-style: italic;
  24.     color: white;
  25.     letter-spacing: 2px;
  26.     text-shadow: 1px 1px 1px #555;
  27. }
  30. /* 登录按钮 */
  32. header button {
  33.     margin-left: auto;
  34.     width: 5em;
  35.     border: none;
  36.     border-radius: 0.5em;
  37. }
  39. header button:hover {
  40.     cursor: pointer;
  41.     background-color: rgb(41, 207, 248);
  42.     color: #fff;
  43.     box-shadow: 0 0 5px #fff;
  44.     transition: 0.3s;
  45. }
  48. /* 模态框 */
  50. .modal .modal-form fieldset {
  51.     height: 15.5em;
  52.     background-color: rgb(255, 253, 224);
  53.     border: none;
  54.     padding: 2em 3em;
  55.     box-shadow: 0 0 5px #888;
  56. }
  59. /* 模态框表单标题 */
  61. .modal .modal-form fieldset legend {
  62.     padding: 7px 1.5em;
  63.     background-color: rgb(218, 94, 37);
  64.     color: white;
  65. }
  67. .modal .modal-form fieldset input {
  68.     height: 3em;
  69.     padding-left: 1em;
  70.     outline: none;
  71.     border: 1px solid #ddd;
  72.     font-size: 14px;
  73. }
  76. /* :focus: 表单控件,获取焦点时的样式 */
  78. .modal .modal-form fieldset input:focus {
  79.     box-shadow: 0 0 8px #888;
  80.     border: none;
  81. }
  83. .modal .modal-form fieldset button {
  84.     background-color: rgb(245, 117, 43);
  85.     color: white;
  86.     border: none;
  87.     height: 3em;
  88.     font-size: 16px;
  89.     height: 2.5em;
  90. }
  92. .modal .modal-form fieldset button:hover {
  93.     background-color: coral;
  94.     cursor: pointer;
  95. }
  98. /* 定位 */
  100. .modal .modal-form {
  101.     position: fixed;
  102.     top: 10em;
  103.     left: 38em;
  104.     right: 38em;
  105. }
  108. /* 遮罩 */
  110. .modal .modal-bg {
  111.     position: fixed;
  112.     /* 坐标全部清0,请定位到四个顶点 */
  113.     top: 0;
  114.     left: 0;
  115.     right: 0;
  116.     bottom: 0;
  117.     background-color: rgb(0, 0, 0, 0.5);
  118. }
  120. .modal {
  121.     display: none;
  122. }
上一条：盒模型、媒体查询及em和rem的用法及区别下一条：将模态框案例再动手写一遍,不要全抄课堂源码,要有自己的创意
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多