search

博客列表 >模态框练习

模态框练习

没耐心的渔翁
没耐心的渔翁原创
2022年04月13日 14:37:15582浏览

模态框练习

代码：

  2.    <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>弹窗</title>
  9. </head>
  10. <style>
  11.     * {
  12.         margin: 0px;
  13.         padding: 0px;
  15.     }
  17.     .div1 {
  18.         width: 100%;
  19.         height: 50px;
  20.         background: blue;
  21.         color: white;
  22.         padding: 8px 16px;
  24.     }
  26.     .div1 h1 {
  27.         padding-top: 15px;
  28.         font-size: 16px;
  29.         ;
  30.     }
  32.     .div1 button {
  33.         position: fixed;
  34.         right: 0;
  38.     }
  39.     /* .div2{
  40.         display: none;
  41.     } */
  43.     .div2 input {
  44.         width: 220px;
  45.         height: 27px;
  46.         border: 1px solid blue;
  47.         border-radius: 5px;
  48.         margin-left: 45px;
  50.     }
  52.     .btu {
  54.         width: 220px;
  55.         height: 26px;
  56.         /* 去掉边框 */
  57.         border: none;
  58.         /* 设置圆角 */
  59.         border-radius: 5px;
  60.         background: seagreen;
  61.         color: white;
  62.         /* 外边距向左侧移动 */
  63.         margin-left: 45px;
  65.     }
  66. /* 模态框 */
  67.     .div2 fieldset {
  68.         border-radius: 5px;
  69.         border: none;
  70.         width: 300px;
  71.         height: 250px;
  72.         background: rgb(255, 255, 255);
  73.         /* 固定定位 */
  74.         position: fixed;
  75.         top: 200px;
  76.         left: 600px;
  78.     }
  79.     /* <!-- 半透明框 --> */
  80.     .div3 {
  81.         /* 固定定位 */
  82.         position: fixed;
  83.         /* 定位四个角  全部清零  */
  84.         top: 0;
  85.         left: 0;
  86.         right: 0;
  87.         bottom: 0;
  88.         background-color: rgb(0, 0, 0, 0.5);
  90.     }
  92.     .div2 p {
  94.         font-weight: 700px;
  95.         color: #1c2438;
  96.         text-align: center;
  98.     }
  99. </style>
  100. <!-- 去掉滚动条 -->
  101. <body style="overflow:-Scroll;overflow-x:hidden">
  102.     <div class="div1">
  103.         <h1>学生管理系统</h1>
  104.         <button  >登录</button>
  105.     </div>
  106.     <!-- 模态框 -->
  107.     <div class="div2">
  108.         <!-- 半透明框 -->
  109.         <div class="div3"></div>
  110.         <form ction="">
  111.             <fieldset>
  112.                 <div style="line-height: 65px;">
  113.                     <p>欢迎登录学生管理系统</p>
  114.                     <hr />
  115.                     <input type="tetx" name="username" placeholder="用户名" />
  116.                 </div>
  117.                 <div>
  118.                     <input type="password" name="password" placeholder="密码">
  119.                 </div>
  120.                 <div style="line-height:65px;">
  121.                     <button class="btu">登录</button>
  122.                 </div>
  123.             </fieldset>
  125.         </form>
  130.     </div>
  132. </body>
  136. </html>

模态框

上一条：css基础-定位，模态框下一条：选择器权重与伪类选择器参数计算个人小结
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议