css上一页下一页页面代码

CSS上一页下一页页面代码

/* 定义单个页面的尺寸和位置 */
.page {
  width: 800px;
  height: 600px;
  position: absolute;
  top: 50px;
  left: 50px;
}

/* 隐藏后面的页面 */
.page:nth-child(n+2) {
  display: none;
}

/* 显示前一页按钮 */
.prev-page {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* 显示后一页按钮 */
.next-page {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

/* 点击前一页按钮 */
.prev-page:hover,
.prev-page:active {
  background-color: #ddd;
}

/* 点击后一页按钮 */
.next-page:hover,
.next-page:active {
  background-color: #ddd;
}

/* 显示前一页的代码 */
.prev-page a:before {
  content: "上一页";
}

/* 显示后一页的代码 */
.next-page a:before {
  content: "下一页";
} 

以上代码实现了一个可以通过按钮切换页面的效果，每个页面大小固定为800px x 600px，并且位置固定为距离左上角50px的位置。同时，点击按钮时会出现背景色的变化，方便用户操作。需要注意的是，如果想让这些按钮用在多个页面上，必须确保每个页面有相同的CSS样式。