HTML5多欄布局是網頁設計中經常使用的一種布局方式。它可以將內容分為多個欄目，使得網頁內容結構更為清晰。下面是一個簡單的HTML5多欄布局代碼示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5多欄布局代碼</title>
<style>
/* 設置整個頁面的寬度 */
body {
width: 960px;
margin: 0 auto;
}
/* 定義左邊欄樣式 */
.left {
float: left;
width: 200px;
margin-right: 20px;
}
/* 定義右邊欄樣式 */
.right {
float: right;
width: 200px;
margin-left: 20px;
}
/* 定義中間內容區域樣式 */
.main {
overflow: hidden; /* 防止main區域被左右欄占據 */
}
</style>
</head>
<body>
<div class="left">
<h2>左邊欄</h2>
<p>左邊欄內容</p>
</div>
<div class="right">
<h2>右邊欄</h2>
<p>右邊欄內容</p>
</div>
<div class="main">
<h1>中間內容區域</h1>
<p>中間內容區域內容</p>
</div>
</body>
</html>上述代碼首先定義了整個頁面的寬度為960像素，并居中顯示。接著，分別定義了左邊欄（class="left"）和右邊欄（class="right"）的樣式，它們的寬度分別為200像素，并且左右外邊距分別為20像素。最后，定義了中間內容區域（class="main"）的樣式，通過設置overflow屬性為hidden，以防止main區域被左右欄占據。
以上就是一個簡單的HTML5多欄布局代碼示例，可以根據實際需要進行調整和修改。上一篇xml樣式表css
下一篇html5多行文本框代碼