5_小海豹.html 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. *{
  10. margin: 0;
  11. padding: 0;
  12. }
  13. h3{
  14. width: 980px;
  15. height: 50px;
  16. background: #cccccc;
  17. line-height: 50px;
  18. text-align: center;
  19. margin: 0 auto 10px;
  20. }
  21. #imgBox{
  22. width: 980px;
  23. height: 550px;
  24. background: url(img/1.jpg) 0 0 no-repeat;
  25. background-size: 100% 100%;
  26. margin: 0 auto;
  27. }
  28. #content{
  29. width: 980px;
  30. margin: 10px auto;
  31. overflow: hidden;
  32. }
  33. #left{
  34. width: 630px;
  35. height: 300px;
  36. background: red;
  37. float: left;
  38. }
  39. #right{
  40. width: 340px;
  41. height: 300px;
  42. background: blue;
  43. float: right;
  44. }
  45. @media screen and (max-width:980px) {
  46. h3{
  47. width: 100%;
  48. }
  49. #content{
  50. width: 100%;
  51. }
  52. #left{
  53. width: 65%;
  54. }
  55. #right{
  56. width: 34%;
  57. }
  58. #imgBox{
  59. width: 100%;
  60. background-image: url(img/2.jpg);
  61. padding-top: 56%;
  62. height: 0;
  63. /*
  64. 960 540
  65. 100 56
  66. */
  67. }
  68. }
  69. @media screen and (max-width:480px) {
  70. #left{
  71. width: 100%;
  72. }
  73. #right{
  74. width: 100%;
  75. }
  76. #imgBox{
  77. background-image: url(img/3.jpg);
  78. }
  79. }
  80. </style>
  81. </head>
  82. <body>
  83. <h3>页眉</h3>
  84. <h3>导航</h3>
  85. <div id="imgBox"></div>
  86. <div id="content">
  87. <div id="left"></div>
  88. <div id="right"></div>
  89. </div>
  90. <h3>页尾</h3>
  91. </body>
  92. </html>