search

博客列表 >1221 定位展示 与 利用绝对定位制作一个模态框

1221 定位展示 与 利用绝对定位制作一个模态框

Allen在php中文网的学习笔记
Allen在php中文网的学习笔记原创
2020年12月23日 05:21:05911浏览

作业

作业标题：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

上一条：1222 flex容器的常用属性 与布局展示下一条：盒模型类型讲解，常用元素定位对齐方式简介
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多