模态框

  1. <style>
  2.       * {
  3.         padding: 0;
  4.         margin: 0;
  5.         user-select: none;
  6.         box-sizing: border-box;
  7.       }
  9.       body {
  10.         display: flex;
  11.         justify-content: center;
  12.         align-items: center;
  13.         height: 100vh;
  14.       }
  16.       button {
  17.         outline: 0;
  18.         width: 150px;
  19.         height: 60px;
  20.         color: rgb(89, 89, 233);
  21.         border-radius: 6px;
  22.         border: 2px solid rgb(43, 238, 205);
  23.         background-color:rgb(209, 183, 183);
  24.         transition: all 0.3s;
  25.         cursor: pointer;
  26.       }
  28.       button:hover {
  29.         color:rgb(247, 233, 233);
  30.         border-color: rgb(126, 126, 192);
  31.         background-color: rgb(45, 45, 226);
  32.       }
  34.       .model-box {
  35.         display: none;
  36.         position: absolute;
  37.         top: 0;
  38.         left: 0;
  39.         width: 100%;
  40.         height: 100vh;
  41.         background-color: rgba(0, 0, 0, 0.45);
  42.       }
  44.       .content {
  45.         display: none;
  46.         position: absolute;
  47.         top: 100px;
  48.         left: calc(50% - 210px);
  49.         width: 420px;
  50.         height: 350px;
  51.         border-radius: 10px;
  52.         padding: 0 20px;
  53.         box-shadow: 0 2px 12px rgba(116, 65, 65, 0.2);
  54.         background-color: rgb(102, 93, 93);
  55.       }
  57.       .content .title {
  58.         display: flex;
  59.         justify-content: space-between;
  60.         height: 60px;
  61.         line-height: 60px;
  62.       }
  64.       .content .title span {
  65.         font-size: 18px;
  66.         color: rgb(224, 166, 166);
  67.       }
  69.       .content .title i {
  70.         font-style: normal;
  71.         font-size: 24px;
  72.         color: rgb(241, 220, 220, 0.322);
  73.         cursor: pointer;
  74.       }
  76.       .content .title i:hover {
  77.         color: rgb(37, 37, 206);
  78.       }
  80.       .content form .form-input {
  81.         margin: 22px 0;
  82.       }
  84.       .content form .form-input label {
  85.         font-size: 15px;
  86.         color: rgb(236, 241, 236);
  87.         cursor: pointer;
  88.       }
  90.       .content form .form-input input {
  91.         outline: 0;
  92.         width: 100%;
  93.         height: 24px;
  94.         padding: 0 15px;
  95.         margin-top: 20px;
  96.         border: 1px solid rgb(78, 72, 72)
  97.         border-radius: 4px;
  98.       }
  100.       .content form .form-input button {
  101.         float: right;
  102.       }
  103.     </style>
  104.   </head>
  106.   <body>
  107.     <button
  108.       onclick="document.querySelector('.model-box').style.display='block';document.querySelector('.content').style.display='block'"
  109.     >
  110.       登录
  111.     </button>
  113.     <div
  114.       class="model-box"
  115.       onclick="document.querySelector('.model-box').style.display='none';document.querySelector('.content').style.display='none'"
  116.     ></div>
  118.     <div class="content">
  119.       <div class="title">
  120.         <span>登录窗口</span>
  121.         <i
  122.           onclick="document.querySelector('.model-box').style.display='none';document.querySelector('.content').style.display='none'"
  123.           >x</i
  124.         >
  125.       </div>
  127.       <form action="">
  128.         <div class="form-input">
  129.           <label for="username">用户名</label>
  130.           <input type="text" id="username" />
  131.         </div>
  132.         <div class="form-input">
  133.           <label for="password">密码</label>
  134.           <input type="text" id="password" />
  135.         </div>
  136.         <div class="form-input">
  137.           <button>登录</button>
  138.         </div>
  139.         <div class="form-input">
  140.           <button>找回密码</button>
  141.         </div>
  142.       </form>
  143.     </div>
  144.   </body>

效果图

flex grid

更多相关文章

  1. 制作简易模态框登录页面及flex与grid整理总结
  2. Laravel 实现登录
  3. 意派Epub360丨这款教师节交互小游戏H5模板超有趣！快来借鉴学习！
  4. 动态分页制作及composer自动加载及第三方验证码使用
  5. 补0819作业：实现预处理与会话跟踪 及 登录防sql注入
  6. 实例演绎pdo在用户登录环节是怎么防sql注入及实战预处理与会话跟
  7. flex布局中容器及项目常用属性演示
  8. 表单的制作
  9. CSS基本选择器与上下文选择器

随机推荐

  1. android 手势识别
  2. Android中RadioGroup组与onCheckedChange
  3. Android Studio无法执行Java类的main方法
  4. Android 实现在Java代码中修改UI界面，并修
  5. Android API Differences Report
  6. Android ApiDemos示例解析(100):Views->A
  7. CreateProcess error=2, 系统找不到指定
  8. Android添加单元测试的方法与步骤
  9. Android SDK的docs访问速度很慢
  10. android添加超级管理权限