HTML5九宮格網頁設計是一種流行的網頁設計風格，可以將頁面分為九個等分的塊，并在其中添加圖像和文本等元素。下面是一個基本的HTML5九宮格網頁設計代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5九宮格網頁設計</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
flex-basis: 33%;
height: 33%;
text-align: center;
background: #e0e0e0;
transition: background-color 0.5s ease;
}
.box:hover {
background: #bdbdbd;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>塊1</h2>
<p>內容1</p>
</div>
<div class="box">
<h2>塊2</h2>
<p>內容2</p>
</div>
<div class="box">
<h2>塊3</h2>
<p>內容3</p>
</div>
<div class="box">
<h2>塊4</h2>
<p>內容4</p>
</div>
<div class="box">
<h2>塊5</h2>
<p>內容5</p>
</div>
<div class="box">
<h2>塊6</h2>
<p>內容6</p>
</div>
<div class="box">
<h2>塊7</h2>
<p>內容7</p>
</div>
<div class="box">
<h2>塊8</h2>
<p>內容8</p>
</div>
<div class="box">
<h2>塊9</h2>
<p>內容9</p>
</div>
</div>
</body>
</html>在這個代碼示例中，我們首先創建了一個名為“container”的div容器，用來容納九個等分的塊。接著，我們為每個塊創建了一個名為“box”的class類，并設置了塊的大小、文本居中、背景色以及鼠標懸停時的背景色變化效果。最后，我們在每個塊中添加了標題和內容。此時，我們就得到了一個簡單但美觀的HTML5九宮格網格設計頁面。
上一篇更新css版本
下一篇html5九九乘法表代碼