以下是一个简单的 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 九宫格图片布局，使网站或应用程序更加美观和易于使用。