Kezdőlap Felfedezés Súgó
Regisztráció Bejelentkezés
furao
/
test
1
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Branch: master
Branch-ok Tag-ek
test
/
demo
/
flex
/
grail.html

grail.html 1.4 KB
Állandó hivatkozás Előzmények Nyers

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Title</title>
    6. 

  6.     <style>
    7. 

  7.         /*html,body{*/
    8. 

  8.             /*height: 100%;*/
    9. 

  9.         /*}*/
    10. 

  10.         .HolyGrail {
    11. 

  11.             display: flex;
    12. 

  12.             /*min-height: 100vh;*/
    13. 

  13.             flex-direction: column;
    14. 

  14.             height: 800px;
    15. 

  15. 

  16.         }
    17. 

  17.         header,
    18. 

  18.         footer {
    19. 

  19.             background-color: #0a6aa1;
    20. 

  20.             flex: 1;
    21. 

  21. 

  22. 

  23.             /*height: 200px;*/
    24. 

  24.         }
    25. 

  25. 

  26.         .HolyGrail-body {
    27. 

  27.             display: flex;
    28. 

  28.             flex: 5;
    29. 

  29.             /*height: 600px;*/
    30. 

  30.             background-color: #FFB5BF;
    31. 

  31. 

  32.             align-items: flex-end;
    33. 

  33.             align-content: flex-start;
    34. 

  34.         }
    35. 

  35. 

  36.         .HolyGrail-content {
    37. 

  37.             height: 500px;
    38. 

  38.             flex: 1;
    39. 

  39.             background-color: #0D3349;
    40. 

  40.         }
    41. 

  41. 

  42.         .HolyGrail-nav, .HolyGrail-ads {
    43. 

  43.             /* 两个边栏的宽度设为12em */
    44. 

  44.             flex: 0 0 12em;
    45. 

  45.             background-color: red;
    46. 

  46.             height: 500px;
    47. 

  47.         }
    48. 

  48. 

  49.         .HolyGrail-nav {
    50. 

  50.             /* 导航放到最左边 */
    51. 

  51.             order: -1;
    52. 

  52.             background-color: darkblue;
    53. 

  53. 

  54.         }
    55. 

  55.     </style>
    56. 

  56. </head>
    57. 

  57. <body class="HolyGrail">
    58. 

  58. <header></header>
    59. 

  59. <div class="HolyGrail-body">
    60. 

  60.     <main class="HolyGrail-content">...</main>
    61. 

  61.     <nav class="HolyGrail-nav">...</nav>
    62. 

  62.     <aside class="HolyGrail-ads">...</aside>
    63. 

  63. </div>
    64. 

  64. <footer></footer>
    65. 

  65. </body>
    66. 

  66. </html>
    67.