HTML5三欄式布局是網頁設計中常用的一種布局形式，它將整個頁面分為了左、中、右三個欄目。其中左、右兩欄一般用來放置導航、廣告等信息，中間欄目則是網頁的主要內容區域，凸顯了頁面的核心信息。以下是HTML5三欄式布局的代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5三欄式布局</title>
<style>
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
}
.left-col {
width: 20%;
background-color: #f1f1f1;
padding: 20px;
}
.middle-col {
width: 60%;
background-color: #fff;
padding: 20px;
}
.right-col {
width: 20%;
background-color: #f1f1f1;
padding: 20px;
}
@media only screen and (max-width: 768px) {
.container {
flex-wrap: wrap;
}
.left-col, .right-col, .middle-col {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="left-col">
<h2>導航欄</h2>
<p>這里放置導航鏈接</p>
</div>
<div class="middle-col">
<h1>網頁主體內容</h1>
<p>這里放置頁面核心信息</p>
</div>
<div class="right-col">
<h2>廣告欄</h2>
<p>這里放置廣告信息</p>
</div>
</div>
</body>
</html>上述代碼使用了flexbox布局，將整個頁面的寬度設為100%，最大寬度設為1200px，并利用flex-wrap屬性實現了響應式布局（在移動設備上會將三欄變為上下排列）。三個欄目均設置了背景色、內邊距和邊框，使得頁面更加美觀。此外，還對頁面在移動端上的表現進行了優化，使用戶在不同設備上都能獲得良好的瀏覽體驗。
下一篇html5一鍵收藏代碼