HTML5三列固定寬度布局是一種經典的網頁布局，非常適合用于設計固定大小的網站。該布局的代碼簡單易懂，易于操作，下面是一個完整的HTML5三列固定寬度布局代碼。
<!DOCTYPE html>
<html>
<head>
<title>三列布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 900px;
margin: 0 auto;
}
.header {
height: 100px;
background-color: #ccc;
}
.main {
float: left;
width: 600px;
height: 500px;
background-color: #f2f2f2;
}
.sidebar-left {
float: left;
width: 200px;
height: 500px;
background-color: #333;
color: #fff;
}
.sidebar-right {
float: right;
width: 100px;
height: 500px;
background-color: #666;
color: #fff;
}
.footer {
clear: both;
height: 80px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="main"></div>
<div class="sidebar-left"></div>
<div class="sidebar-right"></div>
<div class="footer"></div>
</div>
</body>
</html>以上代碼中，我們定義了一個寬度為900px的包裹器，使整個頁面居中顯示。然后，我們定義了一個高度為100px的頭部，一個寬度為600px、高度為500px的主體，一個寬度為200px、高度為500px的左側側邊欄，以及一個寬度為100px、高度為500px的右側側邊欄，最后是一個高度為80px的頁腳。將這些元素放在包裹器中完成布局。
值得注意的是，我們將主體、左側側邊欄和右側側邊欄都設置為浮動，使它們在同一行顯示。同時，我們也為頁腳元素添加了clear: both屬性，使得我們的布局更加穩定和美觀。
這種三列固定寬度布局可用于眾多網站，比如博客、新聞等，傳統的設計風格一直延續到現在，成為互聯網設計中屹立不倒的一種風格。上一篇標題使用css的知識點
下一篇標題欄兩行css