练习1_两端布局.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  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. body{
  9. margin: 0;
  10. }
  11. /* .box{
  12. display: flex;
  13. }
  14. .left{
  15. width: 300px;
  16. height: 600px;
  17. background-color: red;
  18. }
  19. .right{
  20. flex-grow: 1;
  21. height: 600px;
  22. background-image: url("./img/img1.jpg");
  23. background-size: 100% 100%;
  24. } */
  25. /* .left{
  26. width: 300px;
  27. height: 600px;
  28. background-color: red;
  29. float: left;
  30. }
  31. .right{
  32. float: left;
  33. width: calc(100% - 300px);
  34. height: 600px;
  35. background-image: url("./img/img1.jpg");
  36. background-size: 100% 100%;
  37. } */
  38. .box{
  39. position: relative;
  40. width: 100%;
  41. height: 600px;
  42. }
  43. .left{
  44. position: absolute;
  45. top: 0;
  46. left: 0;
  47. width: 300px;
  48. height: 100%;
  49. background-color: red;
  50. }
  51. .right{
  52. position: absolute;
  53. top:0;
  54. left: 300px;
  55. bottom: 0;
  56. right: 0;
  57. background-image: url("./img/img1.jpg");
  58. background-size: 100% 100%;
  59. }
  60. </style>
  61. </head>
  62. <body>
  63. <div class="box">
  64. <div class="left"></div>
  65. <div class="right"></div>
  66. </div>
  67. </body>
  68. </html>