cityLeft.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  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. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. <style>
  9. *{
  10. margin: 0;
  11. padding: 0;
  12. }
  13. html {
  14. background: no-repeat center center / cover;
  15. }
  16. html, body,.layout {
  17. width: 100%;
  18. height: 100%;
  19. }
  20. .layout {
  21. display: flex;
  22. flex-direction: column;
  23. }
  24. .top {
  25. flex: 0 0 70px;
  26. }
  27. .main {
  28. flex: 1;
  29. display: flex;
  30. height: 100%;
  31. }
  32. .left,
  33. .right {
  34. height: 100%;
  35. }
  36. .left {
  37. width: 28%;
  38. }
  39. .right {
  40. width: 28%;
  41. }
  42. .middle {
  43. flex: 1;
  44. height: 100%;
  45. padding: 0 50px;
  46. }
  47. </style>
  48. </head>
  49. <body>
  50. <div class="layout">
  51. <!-- <iframe src="./header.html" frameborder="0" class="top"></iframe> -->
  52. <div class="main">
  53. <iframe src="./survey.html" frameborder="0" class="left"></iframe>
  54. <iframe src="./economics.html" frameborder="0" class="middle"></iframe>
  55. <iframe src="./security.html" frameborder="0" class="right"></iframe>
  56. </div>
  57. </div>
  58. </body>
  59. </html>