HTML代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>九宮格</title> <link rel="stylesheet" href="test4.css" type="text/css"> </head> <body> <ul> <li><a href="#">Link one</a></li> <li><b href="#">Link two</b></li> <li><a href="#">Link three</a></li> </ul> <ul> <li><b href="#">Link four</b></li> <li><a href="#">Link five</a></li> <li><b href="#">Link six</b></li> </ul> <ul> <li><a href="#">Link seven</a></li> <li><b href="#">Link eight</b></li> <li><a href="#">Link night</a></li> </ul> </body> </html>
css代碼（css文件名爲test4.css）：
ul { float:right; width:100%; padding:0; margin:0; list-style-type:none; position:relative; left:35%; } a { float:left; width:50px; text-decoration:none; background-color: blueviolet; color:black; padding:50px 50px; border: 1px solid black; } a:hover {background-color:#ff3300} b { float:left; width:50px; text-decoration:none; color:black; background-color:mediumslateblue; padding:50px 50px; border: 1px solid black; /*border-style: solid;*/ /*border-left:2px solid black;*/ /*border-right:2px solid black;*/ } b:hover { background-color:sandybrown; } li { display:inline; }
結果顯示：
案例很簡單，有助於初學者理解“框模型”。