练习14_小米登录页面.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. /* css reset */
  9. *{
  10. margin: 0;
  11. padding: 0;
  12. }
  13. li{
  14. list-style: none;
  15. }
  16. /* 工具类 */
  17. .clearfix::after{
  18. content: "";
  19. display: block;
  20. clear: both;
  21. }
  22. /* 左侧图片区域 start */
  23. .img-side{
  24. float: left;
  25. width: 375px;
  26. height: 100vh;
  27. background-image: url("./img/xiaomi/bg.jpg");
  28. background-size: cover;
  29. background-position: center;
  30. }
  31. /* 左侧图片区域 end */
  32. /* 登录内容区域 start */
  33. .login-content{
  34. float: left;
  35. width: calc(100% - 375px);
  36. height: 100vh;
  37. background-color: #f5f5f5;
  38. }
  39. /* 登录内容区域 end */
  40. </style>
  41. </head>
  42. <body>
  43. <div class="container clearfix">
  44. <div class="img-side"></div>
  45. <div class="login-content"></div>
  46. </div>
  47. </body>
  48. </html>