HTML層布局網頁是近年來流行起來的一種創建網頁的方式，它的優點是能夠實現更加精確的頁面布局效果。下面我們來看一段示例代碼，展示如何使用HTML層布局實現一個網頁布局。
<!DOCTYPE html>
<html>
<head>
<title>HTML層布局網頁</title>
<style>
/*設置容器的樣式*/
#container{
width: 900px;
height: 600px;
margin: 0 auto;
}
/*設置header的樣式*/
#header{
width: 900px;
height: 100px;
background-color: gray;
}
/*設置nav的樣式*/
#nav{
width: 200px;
height: 400px;
background-color: blue;
float: left;
}
/*設置section的樣式*/
#section{
width: 700px;
height: 400px;
background-color: yellow;
float: right;
}
/*設置footer的樣式*/
#footer{
width: 900px;
height: 100px;
background-color: gray;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<p>這是header部分</p>
</div>
<div id="nav">
<p>這是nav部分</p>
</div>
<div id="section">
<p>這是section部分</p>
</div>
<div id="footer">
<p>這是footer部分</p>
</div>
</div>
</body>
</html>可以看到，我們先定義了一個名為container的頂層容器，并設置它的width、height和margin屬性，然后在容器內部分別創建了名為header、nav、section和footer的子容器，分別設置了它們的樣式。其中，nav和section容器使用了float屬性進行左右浮動布局，而footer容器使用了clear:both屬性以清除它下方的浮動效果。最后，將這些子容器放在container容器中，即可實現一個基本的HTML層布局網頁。
上一篇vue axios官網
下一篇vue flex意思