HTML5是一種用于構建網頁的語言，而無表格布局是一種在HTML5中常用的布局方式之一。
在無表格布局中，我們可以通過使用div標簽來創建網頁布局。通過設置div的樣式，我們可以實現不同的布局方式，包括水平布局、垂直布局和網格布局。
下面是一個簡單的無表格布局示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>無表格布局示例</title>
<style>
/* 創建一個容器 */
.container {
display: flex;
flex-wrap: wrap;
}
/* 創建項目并設置樣式 */
.item {
width: 200px;
height: 200px;
background-color: #ccc;
border: 1px solid #000;
margin: 20px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">項目1</div>
<div class="item">項目2</div>
<div class="item">項目3</div>
<div class="item">項目4</div>
</div>
</body>
</html>在上面的示例中，我們使用了flex布局方式來實現無表格布局。設置容器的display屬性為flex，這里的flex指的是彈性布局，即讓子元素自動排列的布局方式。而設置容器的flex-wrap屬性為wrap，這意味著當子元素的總寬度超過容器的寬度時，子元素會自動換行。
在設置項目樣式時，我們設置了寬度、高度、背景色、邊框、外邊距和盒模型。同時，還將display屬性設為flex，并將align-items和justify-content屬性設為center，這會使子元素在父元素中垂直居中和水平居中。
總的來說，無表格布局是很靈活的，可以用于創建不同種類的布局，從而滿足不同的網頁設計需求。上一篇html5日期選擇器代碼
下一篇html5旋轉代碼