首页<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .holy-grail { position: relative; padding: 0; margin: 0; min-height: 100vh; text-align: center; color: #000000; } header, footer { width: 100%; height: 60px; line-height: 60px; background-color: #ffff7f; } footer { position: absolute; bottom: 0; } .holy-grail-body { position: absolute; left: 0; right: 0; top: 60px; bottom: 60px; } .holy-grail-content { position: absolute; left: 180px; right: 180px; top: 0px; bottom: 0px; background-color: rgba(189, 189, 0, 1.0); display: flex; align-items: center; justify-content: center; } .holy-grail-nav, .holy-grail-ads { width: 180px; height: 100%; background-color: #00ff00; display: flex; align-items: center; justify-content: center; } .holy-grail-ads { position: absolute; right: 0; top: 0; } </style> </head> <body class="holy-grail"> <header>header</header> <div class="holy-grail-body"> <nav class="holy-grail-nav">left</nav> <main class="holy-grail-content">content</main> <aside class="holy-grail-ads">right</aside> </div> <footer>footer</footer> </body> </html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .holy-grail { position: relative; padding: 0; margin: 0; min-height: 100vh; text-align: center; color: #000000; } header, footer { width: 100%; height: 60px; line-height: 60px; background-color: #ffff7f; } footer { position: absolute; bottom: 0; } .holy-grail-body { position: absolute; left: 0; right: 0; top: 60px; bottom: 60px; } .holy-grail-content { position: absolute; left: 180px; right: 180px; top: 0px; bottom: 0px; background-color: rgba(189, 189, 0, 1.0); display: flex; align-items: center; justify-content: center; } .holy-grail-nav, .holy-grail-ads { width: 180px; height: 100%; background-color: #00ff00; display: flex; align-items: center; justify-content: center; } .holy-grail-ads { position: absolute; right: 0; top: 0; } </style> </head> <body class="holy-grail"> <header>header</header> <div class="holy-grail-body"> <nav class="holy-grail-nav">left</nav> <main class="holy-grail-content">content</main> <aside class="holy-grail-ads">right</aside> </div> <footer>footer</footer> </body> </html>

时间: 2024-04-26 22:22:39 浏览: 99

这是一段 HTML 代码，实现了 Holy Grail Layout（圣杯布局）。这是一种常见的页面布局方式，由一个固定的顶部和底部，以及三个可变的中间区域组成，分别是左侧导航、右侧广告和中间内容。通过使用 CSS 的定位和 Flexbox 布局，可以实现这种布局。在这段代码中，使用了绝对定位和 flex 布局来实现 Holy Grail 布局，使得页面的结构分明、布局合理、视觉效果良好。

阅读全文