欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

模态框案例 flex及grid布局常用属性

程序员文章站 2022-03-24 10:08:35
...

模态框案例

css样式

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. header {
  6. background-color: rgb(66, 164, 209);
  7. padding: 0.5em 1em;
  8. display: flex;
  9. }
  10. header button {
  11. margin-left: auto;
  12. width: 5em;
  13. }
  14. .container {
  15. position: relative;
  16. display: none;
  17. }
  18. .bg {
  19. position: fixed;
  20. top: 0;
  21. left: 0;
  22. right: 0;
  23. bottom: 0;
  24. background-color: rgba(150, 151, 223, 0.5);
  25. }
  26. .login {
  27. width: 16em;
  28. padding: 1.5em;
  29. background-color: white;
  30. border: 1px solid #c3c4c7;
  31. position: fixed;
  32. top: 50%;
  33. left: 50%;
  34. margin-top: -10em;
  35. margin-left: -8em;
  36. }
  37. #user_login,
  38. #user_pass {
  39. font-size: 1.5em;
  40. line-height: 1.33333333;
  41. width: 100%;
  42. margin: 10px 0 24px 0;
  43. border-radius: 3px;
  44. }
  45. .button {
  46. display: flex;
  47. justify-content: space-around;
  48. align-items: baseline;
  49. }
  50. .button button {
  51. width: 5em;
  52. font-size: 1em;
  53. }

模态框html代码

  1. <header>
  2. <h3>XX博客后台</h3>
  3. <button onclick="document.querySelector('.container').style.display='block'">登录</button>
  4. </header>
  5. <div class="container">
  6. <div class="bg" onclick="this.parentNode.style.display='none'"></div>
  7. <div class="login">
  8. <form action="login.php" method="post">
  9. <div class="user">
  10. <p>
  11. <label for="user_login">用户名/邮箱/手机号</label>
  12. </p>
  13. <input type="text" id="user_login" name="user_login" required autofocus />
  14. </div>
  15. <div class="pwd">
  16. <p>
  17. <label for="user_pass">密码</label>
  18. </p>
  19. <input type="password" id="user_pass" name="pwd" required />
  20. </div>
  21. <div class="button">
  22. <p>
  23. <input type="checkbox" name="rememberme" id="rememberme" value="rememberme" />
  24. <label for="rememberme">记住我</label>
  25. </p>
  26. <button>登录</button>
  27. </div>
  28. </form>
  29. </div>
  30. </div>

效果图

模态框案例 flex及grid布局常用属性

flex布局常用属性

模态框案例 flex及grid布局常用属性

grid布局常用属性

模态框案例 flex及grid布局常用属性