在前端開發中，css小圖片頁面排版是非常重要的一部分。通過使用小圖片，可以為網頁增加美觀度，提高用戶體驗。下面就來介紹一些css小圖片頁面排版的技巧。

img {
display: inline-block;
vertical-align: middle;
}
.icon {
width: 30px;
height: 30px;
background: url('icon.png') no-repeat;
background-size: 30px 30px;
}

首先是如何使用css來讓圖片垂直居中。我們可以使用display屬性將img元素改為inline-block，然后使用vertical-align屬性來控制其在行內垂直居中，如上述代碼所示。

其次是使用css來創建小圖片。我們可以使用background屬性為元素添加背景圖片，并通過background-size屬性來設置其大小。這樣，我們就可以輕松地創建一些小圖標或者按鈕，提高頁面的美觀度。

.btn {
display: inline-block;
background: url('btn.png') no-repeat;
width: 80px;
height: 50px;
text-indent: -9999px;
}
.btn:hover {
background-position: 0 -50px;
}

最后，我們來介紹如何使用css來為小圖片添加交互效果。在上述代碼中，我們使用background-position屬性來控制背景圖片的位置，達到鼠標懸停時變換背景的效果。同時，我們可以使用text-indent屬性將文本隱藏，達到按鈕實際上只是一張圖片的效果。

綜上所述，css小圖片頁面排版可以為網頁增添美觀度和交互性，通過掌握上述技巧，我們可以更好地為用戶提供優秀的用戶體驗。