HTML5九宮格網(wǎng)頁設(shè)計是一種流行的網(wǎng)頁設(shè)計風(fēng)格,可以將頁面分為九個等分的塊,并在其中添加圖像和文本等元素。下面是一個基本的HTML5九宮格網(wǎng)頁設(shè)計代碼示例:
<!DOCTYPE html> <html> <head> <title>HTML5九宮格網(wǎng)頁設(shè)計</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>內(nèi)容1</p> </div> <div class="box"> <h2>塊2</h2> <p>內(nèi)容2</p> </div> <div class="box"> <h2>塊3</h2> <p>內(nèi)容3</p> </div> <div class="box"> <h2>塊4</h2> <p>內(nèi)容4</p> </div> <div class="box"> <h2>塊5</h2> <p>內(nèi)容5</p> </div> <div class="box"> <h2>塊6</h2> <p>內(nèi)容6</p> </div> <div class="box"> <h2>塊7</h2> <p>內(nèi)容7</p> </div> <div class="box"> <h2>塊8</h2> <p>內(nèi)容8</p> </div> <div class="box"> <h2>塊9</h2> <p>內(nèi)容9</p> </div> </div> </body> </html>
在這個代碼示例中,我們首先創(chuàng)建了一個名為“container”的div容器,用來容納九個等分的塊。接著,我們?yōu)槊總€塊創(chuàng)建了一個名為“box”的class類,并設(shè)置了塊的大小、文本居中、背景色以及鼠標懸停時的背景色變化效果。最后,我們在每個塊中添加了標題和內(nèi)容。此時,我們就得到了一個簡單但美觀的HTML5九宮格網(wǎng)格設(shè)計頁面。
上一篇更新css版本
下一篇html5九九乘法表代碼