在網頁設計中，輪播圖是提高網頁展示性能的重要元素之一。而css手動輪播圖的制作就可以更好地滿足用戶的需求，為用戶帶來更好的閱讀體驗。

// css代碼
.carousel {
position: relative;
overflow: hidden;
height: 400px;
width: 80%;
margin: 0 auto;
}
.carousel img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
opacity: 0;
transition: opacity 0.5s;
}
.carousel img.active {
opacity: 1;
}
.carousel .prev, .carousel .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
color: white;
cursor: pointer;
z-index: 1;
}
.carousel .prev {
left: 10px;
}
.carousel .next {
right: 10px;
}

以上代碼實現了一個基本的輪播圖。首先，.carousel為輪播圖的容器，通過設置position：relative和overflow：hidden屬性使內容不跑出容器范圍。.carousel img為圖片樣式，通過position:absolute和top:0屬性使圖片定位到輪播圖容器頂部，并且opacity：0和transition：opacity 0.5s屬性設置圖片淡入淡出。通過.active屬性控制當前圖片顯示，其他圖片隱藏。

輪播圖最基本的功能就是向左或向右輪播圖片。以上css代碼實現了.carousel .prev和.carousel .next兩個元素，通過left、right和top屬性設置位置，font-size設置字體大小，color設置字體顏色，cursor：pointer設置手型光標，并設置z-index讓這兩個元素浮在圖片上面，使其可點擊。

至此，一個基本的css手動輪播圖就完成了，可以通過編寫簡單的JS代碼實現左右輪播功能，讓用戶在頁面中享受更好的閱讀體驗。