CSS九宮格圖片布局代碼是一種使用 CSS 來創建自定義布局的方法,能夠將一組圖片按照 9 個區域進行分割,每個區域可以包含不同的圖片。這種布局方式非常適合用于網站或應用程序中的導航欄、側邊欄等。
以下是一個簡單的 CSS 九宮格圖片布局代碼示例,可以用于創建一個簡單的導航欄。
/* 定義導航欄樣式 */
.nav {
position: fixed;
top: 0;
left: 0;
width: 300px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
/* 定義導航欄圖片 */
.nav >div {
display: inline-block;
width: 100%;
height: 100%;
margin-bottom: 20px;
/* 定義左、右、下三個按鈕樣式 */
.nav >div >div {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
.nav >div >div:hover {
background-color: #0069d9;
/* 定義中間按鈕樣式 */
.nav >div >div:first-child {
background-color: #0069d9;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
border: none;
/* 定義右下按鈕樣式 */
.nav >div >div:last-child {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
border: none;
通過使用上述代碼,可以輕松創建自定義 CSS 九宮格圖片布局,使網站或應用程序更加美觀和易于使用。