Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1221 定位展示 与 利用绝对定位制作一个模态框
Blogger Information
Blog 16
fans 0
comment 0
visits 15858
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
1221 定位展示 与 利用绝对定位制作一个模态框
Allen在php中文网的学习笔记
Original
912 people have browsed it

作业

作业标题：1221作用
作业内容：1. 简述定位的类型与应用场景和使用条件 ; 2. 模仿课堂案例，实现一个模态框
演示地址:https://php.gzj2001.com/1221/

作业代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>1221作业</title>
  8.     <style>
  9.         .relative {
  10.             /* 设置相对定位 */
  11.             position: relative;
  12.             /* 进行偏移 */
  13.             top: 5em;
  14.             left: 5em;
  15.         }
  17.         .old {
  18.             /* 设置old为相对定位，便于absolute找到 */
  19.             position: relative;
  20.         }
  22.         .absolute {
  23.             /* 设置为绝对定位 */
  24.             position: absolute;
  25.             /* 距离他祖先的位置偏移  */
  26.             top: 5em;
  27.         }
  29.         html {
  30.             /* 为了展示固定定位的效果，将html拉长 */
  31.             min-height: 100em;
  32.         }
  34.         .footer {
  35.             font-size: 5em;
  36.             width: 100vw;
  37.             background-color: #666;
  38.             /* 设置为固定定位 */
  39.             position: fixed;
  40.             bottom: 0;
  41.         }
  42.         /* -------------------- */
  43.         /* 模态框演示 */
  44.         /* 蒙版全屏覆盖 */
  46.         .login {
  47.             /* display: none; */
  48.             background-color: rgb(0, 0, 0, 0.5);
  49.             position: fixed;
  50.             top: 0;
  51.             left: 0;
  52.             right: 0;
  53.             bottom: 0;
  54.         }
  55.         /* 主体利用相对定位到中间 */
  57.         .login .login-main {
  58.             padding: 1em;
  59.             min-height: 20em;
  60.             border: 1px solid red;
  61.             position: fixed;
  62.             top: 5em;
  63.             left: 30em;
  64.             background-color: green;
  65.         }
  66.     </style>
  67. </head>
  69. <body>
  71. </body>
  73. <h2>静态定位是 默认的，和源码的位置一致 默认场景。默认使用条件 </h2>
  74. <h2 class="relative">相对定位 是相对于自己本身原来的 位置进行偏移 应用场景，css阴影特效偏移？ </h2>
  75. <div class="old">
  76.     我是祖先
  77.     <h2 class="absolute">绝对定位 相对于它的祖先中离他最近的‘定位元素‘的位置发生偏移 应用于页面绝对布局？</h2>
  78. </div>
  79. <br>
  80. <br>
  81. <br>
  82. <br>
  83. <br>
  84. <br>
  85. <br>
  87. <button style="font-size: 10em;" onclick="login()">点我打开蒙版</button>
  89. <div class="login" id="login" style="display: none;">
  90.     <div class="login-main">
  91.         <form>
  92.             username<input type="text">
  93.             <br> password <input type="text">
  94.             <br>
  95.             <button>login</button>
  96.         </form>
  97.     </div>
  98. </div>
  100. <div class="footer">
  101.     我是footer 演示了固定定位
  102. </div>
  104. </html>
  106. <script>
  107.     function login() {
  108.         document.getElementById("login").style.display = "block";
  109.     }
  110. </script>

效果展示：

image.png

Correcting teacher：天蓬老师天蓬老师

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