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

固定定位做的登录页面案例

程序员文章站 2022-05-10 17:32:37
...

定位

定位属性 position

  • position: static 此为默认值,为静态定位.就是没有定位;
  • position: relative 此为相对定位 属性为(top,left,);
    1. 仍在文档流中,所占空间不释放.其他元素不会随之移动,只相对原位置便宜;

  • position: abslute 此为绝对定位.不在相对于自身,而是相对于包含块

    1. 绝对定位包含块的元素必须是”定位元素”,不能是 static;
    2. 如果绝对定位向上找不到可定位的父级元素(position:不等于 static)的,就相对 body 元素;

  • position:fixed 固定定位 相对于 body 定位(永远不动了),是绝对定位的子集 只针对 body 等位;

案例登录页面

    

  1. <body>
    2. 

  2.   <header>
    3. 

  3.     <h2 class="title">IANREN的博客</h2>
    4. 

  4.     <button onclick="document.querySelector('.modal').style.display='block'">
    5. 

  5.       登 录
    6. 

  6.     </button>
    7. 

  7.   </header>
    8. 

  8.   <div class="modal">
    9. 

  9.     <div class="modal-bg" onclick="this.parentNode.style.display='none'"></div>
    10. 

  10.     <form action="" class="modal-form">
    11. 

  11.       <fieldset>
    12. 

  12.         <legend>用户登录</legend>
    13. 

  13.         <label for="emali">登录名:</label>
    14. 

  14.         <input type="email" name="email" placeholder="username@email.com" />
    15. 

  15.         <br />
    16. 

  16.         <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
    17. 

  17.         <input type="password" name="password" placeholder="*******" />
    18. 

  18.         <button>登录</button>
    19. 

  19.       </fieldset>
    20. 

  20.     </form>
    21. 

  21.   </div>
    22. 

  22.   <style>
    23. 

  23.     * {
    24. 

  24.       padding: 0;
    25. 

  25.       margin: 0;
    26. 

  26.       box-sizing: border-box;
    27. 

  27.     }
    28. 

  28.     header {
    29. 

  29.       background-color: rgb(118, 216, 255);
    30. 

  30.       display: flex;
    31. 

  31.       padding: 0.5em 1em;
    32. 

  32.     }
    33. 

  33.     header .title {
    34. 

  34.       font-weight: lighter;
    35. 

  35.       font-style: italic;
    36. 

  36.       color: #fff;
    37. 

  37.       text-shadow: 1px 1px 1px #444;
    38. 

  38.       letter-spacing: 1px;
    39. 

  39.     }
    40. 

  40.     header button {
    41. 

  41.       border: none;
    42. 

  42.       border-radius: 0.5em;
    43. 

  43.       background-color: rgb(202, 67, 67);
    44. 

  44.       width: 5em;
    45. 

  45.       margin-left: auto;
    46. 

  46.     }
    47. 

  47.     header button:hover {
    48. 

  48.       cursor: pointer;
    49. 

  49.       background-color: rgb(250, 161, 17);
    50. 

  50.       color: white;
    51. 

  51.       transition: 0.3s;
    52. 

  52.       box-shadow: 0 0 8px #fff;
    53. 

  53.     }
    54. 

  54.     .modal .modal-form fieldset legend {
    55. 

  55.       background-color: rgb(212, 20, 20);
    56. 

  56.       padding: 5px 1em;
    57. 

  57.       border-radius: 4px;
    58. 

  58.       color: white;
    59. 

  59.       text-shadow: 1px 1px 1px rgb(246, 244, 82);
    60. 

  60.     }
    61. 

  61.     .modal .modal-form fieldset {
    62. 

  62.       padding: 1.5em 2em 0.8em 2.5em;
    63. 

  63.     }
    64. 

  64.     .modal .modal-form input {
    65. 

  65.       margin: 1em auto;
    66. 

  66.       background-color: rgb(248, 248, 248);
    67. 

  67.     }
    68. 

  68.     .modal .modal-form {
    69. 

  69.       position: fixed;
    70. 

  70.       top: 10em;
    71. 

  71.       left: 20em;
    72. 

  72.       right: 20em;
    73. 

  73.       width: 20em;
    74. 

  74.       height: 14em;
    75. 

  75.       background-color: rgb(167, 181, 230);
    76. 

  76.       padding: 0.5em;
    77. 

  77.     }
    78. 

  78.     .modal .modal-bg {
    79. 

  79.       position: fixed;
    80. 

  80.       top: 0;
    81. 

  81.       left: 0;
    82. 

  82.       right: 0;
    83. 

  83.       bottom: 0;
    84. 

  84.       background-color: rgb(0, 0, 0, 0.5);
    85. 

  85.     }
    86. 

  86.     .modal .modal-form button {
    87. 

  87.       border: none;
    88. 

  88.       width: 4em;
    89. 

  89.       padding: 0.2em;
    90. 

  90.       margin: 0.5em 1em 0em 7.3em;
    91. 

  91.     }
    92. 

  92.   </style>
    93. 

  93. </body>
    94.

固定定位做的登录页面案例

上一篇： PHP使用内置函数生成图片的方法详解_PHP

下一篇： flex 布局(弹性盒子)

推荐阅读