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

定位登录页面/flex布局

程序员文章站 2022-06-01 20:29:22
...

定位

  • position:relative; 相对定位
  • position:absolute;绝对定位
  • position:fixed;固定定位

登录页面

  1. <style>
  2. *{
  3. padding:0;
  4. margin:0;
  5. box-sizing:border-box;
  6. }
  7. .container{
  8. width:100vw;
  9. height:100vh;
  10. background-color: #1E9FFF;
  11. position: relative;
  12. }
  13. .container .login{
  14. width: 30rem;
  15. height: 30rem;
  16. position: absolute;
  17. top: 50%;
  18. left: 0;
  19. right: 0;
  20. margin: 0 auto;
  21. margin-top: -15rem;
  22. background-color: #fff;
  23. border: 1px solid #fff;
  24. border-radius: 3px;
  25. box-shadow: 0 0 8px #eeeeee;
  26. padding: 1.5rem;
  27. }
  28. .container .login .login-title h1{
  29. color: #1E9FFF;
  30. font-size: 2.5rem;
  31. font-weight: bold;
  32. text-align: center;
  33. margin-bottom:1.5rem;
  34. }
  35. .container .login .form {
  36. position: relative;
  37. margin-bottom:1.5rem;
  38. }
  39. .container .login .form label {
  40. margin-bottom: 1.5rem;
  41. clear: both;
  42. position: absolute;
  43. left: 1px;
  44. top: 1px;
  45. width: 4rem;
  46. line-height: 4rem;
  47. text-align: center;
  48. color: #d2d2d2;
  49. }
  50. .container .login .form input {
  51. padding-left: 4rem;
  52. display: block;
  53. width: 100%;
  54. height: 4rem;
  55. line-height: 4rem;
  56. background-color: #fff;
  57. border-radius: 2px;
  58. border:1px solid #ccc;
  59. }
  60. .container .login .form input:focus{
  61. outline: 0px;
  62. box-shadow: 0 0 10px #1e9fff;
  63. }
  64. .container .login .form img{
  65. background-color: bisque;
  66. position: absolute;
  67. right: 0px;
  68. top: 0px;
  69. width: 10rem;
  70. height: 4rem;
  71. }
  72. .container .login .form .btn{
  73. display: block;
  74. height: 4rem;
  75. line-height: 4rem;
  76. border: 0px;
  77. background-color: #1E9FFF;
  78. color: #fff;
  79. text-align: center;
  80. font-size: 1.4rem;
  81. border-radius: 2px;
  82. cursor: pointer;
  83. width: 100%;
  84. }
  85. </style>
  86. <div class="container" >
  87. <div></div>
  88. <div class="login" >
  89. <div class="login-title" ><h1>登录</h1></div>
  90. <form action="">
  91. <div class="form">
  92. <label class="iconfont icon-yonghu" for="username"></label>
  93. <input type="text" name="username" placeholder="用户名" value="">
  94. </div>
  95. <div class="form">
  96. <label class="iconfont icon-mima" for="password"></label>
  97. <input type="text" name="password" placeholder="密码" value="">
  98. </div>
  99. <div class="form">
  100. <label class="iconfont icon-mima" for="code"></label>
  101. <input type="text" name="code" placeholder="验证码" value="">
  102. <img src="" alt="">
  103. </div>
  104. <div class="form">
  105. <button class="btn">登 入</button>
  106. </div>
  107. </form>
  108. </div>
  109. </div>

定位登录页面/flex布局

媒体查询

移动优先

  1. div {
  2. background-color:red;
  3. }
  4. @media only screen and (min-width: 768px) {
  5. div {
  6. background-color:slateblue;
  7. }
  8. }
  9. @media only screen and (min-width:768px) and (max-width:992px) {
  10. div {
  11. background-color:greenyellow;
  12. }
  13. }
  14. @media only screen and (min-width:992px) and (max-width:1200px) {
  15. div {
  16. background-color:wheat;
  17. }
  18. }

PC优先

  1. div {
  2. background-color:red;
  3. }
  4. @media only screen and (min-width:992px) and (max-width: 1200px) {
  5. div {
  6. background-color:wheat;
  7. }
  8. }
  9. @media only screen and (min-width:768px) and (max-width: 992px) {
  10. div {
  11. background-color:greenyellow;
  12. }
  13. }
  14. @media only screen and (max-width: 768px) {
  15. div {
  16. background-color:slateblue;
  17. }
  18. }

flex布局

父级设置

设置flex属性

  • display:flex;
  • display:inline-flex;

设置排列方式[ row横排列 | column纵排列 ]

  • flex-direction:row|column;

设置换行[ wrap允许换行 | nowrap不允许换行 ]

  • flex-wrap:wrap;

上面两个简写

  • flex-flow:row nowrap;

主轴分配剩余空间(align-content与justify-content的简写形式 | 第一个值align-content | 第二个值justify-content)

[ 左 | 右 | 中 | 两边对齐 | 分散对齐(中间是两倍) | 平均对齐]

  • place-content:start|end|center|space-between|space-around|space-evenly;

交叉轴分配剩余空间(align-items与justify-items的简写形式 | 第一个值align-items | 第二个值justify-items)

[ 上 | 下 | 中 | 子元素等高]

  • place-items:start|end|center|stretch;

子级设置

flex:放大 收缩 计算宽度; 放大 1开启 0禁止 收缩 1开启 0禁止

计算宽度auto自动 计算方式 : max-width/min-width > 计算宽度 > width

  • flex:1; = flex:1 1 auto;
  • flex:initial; 默认

排序[ 谁小谁前面 ]

  • order:0;

案例

  1. div{
  2. display: flex;
  3. flex:1;
  4. width: 100px;height: 100px;
  5. }
  6. /* 平均对齐 */
  7. .d1{
  8. background-color: tomato;
  9. place-content: space-evenly;
  10. place-items: center;
  11. }
  12. /* 分散对齐 */
  13. .d2{
  14. background-color: rebeccapurple;
  15. place-content: space-around;
  16. place-items: center;
  17. }
  18. /* 两边对齐 */
  19. .d3{
  20. background-color: goldenrod;
  21. place-content: space-between;
  22. place-items: center;
  23. }
  24. <div class="d1">
  25. <span>1</span>
  26. <span>2</span>
  27. <span>3</span>
  28. </div>
  29. <div class="d2">
  30. <span>1</span>
  31. <span>2</span>
  32. <span>3</span>
  33. </div>
  34. <div class="d3">
  35. <span>1</span>
  36. <span>2</span>
  37. <span>3</span>
  38. </div>

定位登录页面/flex布局