HTML5 六塊布局代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 六塊布局</title>
<style>
/* 清除瀏覽器默認樣式 */
* {margin: 0; padding: 0;}
/* 設置頁面高度 */
html, body {height: 100%;}
/* 頂部導航欄樣式 */
#header {height: 60px; background-color: #333; color: #fff; text-align: center; line-height: 60px;}
/* 左側邊欄樣式 */
#left {width: 200px; height: calc(100% - 60px); background-color: #eee; float: left;}
/* 右側邊欄樣式 */
#right {width: calc(100% - 200px); height: calc(100% - 60px); background-color: #ccc; float: right;}
/* 內容區樣式 */
#content {height: calc(100% - 60px); background-color: #fff; overflow: scroll; margin-right: 200px; margin-left: 200px;}
/* 底部信息欄樣式 */
#footer {height: 40px; background-color: #333; color: #fff; text-align: center; line-height: 40px; clear: both;}
</style>
</head>
<body>
<div id="header">這是一個頭部導航欄</div>
<div id="left">這是一個左側邊欄</div>
<div id="right">這是一個右側邊欄</div>
<div id="content">這是一個頁面內容區</div>
<div id="footer">這是一個底部信息欄</div>
</body>
</html>上述代碼實現了一個基本的 HTML5 六塊布局。其中，使用了 CSS 中的 calc() 函數來動態計算元素的高度和寬度，達到了響應式布局的效果。這種布局常用于后臺管理系統、博客等網站的頁面設計中。