在網頁設計中，CSS（層疊樣式表）是不可或缺的一部分。通過CSS，我們可以控制網頁的樣式、字體、布局等等。CSS的另一個重要特點就是層疊操作。層疊順序越高，越優先顯示。本文將介紹如何利用CSS實現滑動效果及如何控制不同屏幕大小的顯示。

.slide {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
}
.slide__wrapper {
position: relative;
width: 500%;
height: 100%;
left: 0;
transition: left 0.5s ease-in-out;
}
.slide__item {
position: relative;
float: left;
width: 20%;
height: 100%;
background-color: #666;
color: #fff;
text-align: center;
font-size: 50px;
}
.slide__item:nth-child(1) {
background-color: #9c27b0;
}
.slide__item:nth-child(2) {
background-color: #2196f3;
}
.slide__item:nth-child(3) {
background-color: #4caf50;
}
.slide__item:nth-child(4) {
background-color: #ff9800;
}
.slide__item:nth-child(5) {
background-color: #e91e63;
}

首先，我們需要一個具有相對定位屬性的父級元素，用于實現滑動效果。該元素設置overflow:hidden屬性，防止子元素溢出。接著，我們需要一個滑動元素，用于包裹所有要滑動的子元素。該元素需要設置相對定位屬性以及width:500%，這里的500%是因為子元素寬度為20%，共5個，所以寬度需要500%才能容納所有子元素。同時也需要一個過渡效果，用于實現平滑的滑動效果。最后，我們需要每個要滑動的子元素，它們需要float:left屬性，使它們排列在同一行，并且需要設置相對定位屬性以及寬度為20%，高度為100%。為了讓每個子元素有不同的背景顏色，我們為每個子元素設定不同的背景顏色。

@media screen and (max-width: 480px) {
.slide__item {
font-size: 30px;
}
}

為了控制不同屏幕大小的顯示效果，我們需要利用媒體查詢（Media Query）。我們可以通過媒體查詢設置不同屏幕大小下的CSS樣式。例如，我們可以針對寬度小于480px的屏幕設置.slide__item的字體大小為30px。