css网页实验练习题 |css3学习之圆角box

css 手机hover，css画长曲线，在css如何放大图片，css不计算内边距，css背景上加浮动div，html 使用外部css文件路径，css3学习之圆角box css网页实验练习题 |css3学习之圆角box

1. 实现一个中心对齐的文本框

.box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
margin: 0 auto;
text-align: center;
line-height: 100px;
}

2. 实现一个悬浮效果的按钮

.btn {
display: inline-block;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
transition: all 0.3s ease;
}
.btn:hover {
background-color: #ccc;
color: #fff;
}

3. 实现一个响应式布局，使得页面在不同设备上都能有良好的表现

@media screen and (max-width: 640px) {
/* 处理手机平板等小屏幕设备 */
}
@media screen and (min-width: 1024px) {
/* 处理PC等大屏幕设备 */
}

4. 实现一个纯CSS的轮播图

.slider {
width: 400px;
height: 200px;
overflow: hidden;
}
.slider .slides {
display: flex;
width: 800px;
animation: slideshow 10s infinite;
}
.slider .slides:hover {
animation-play-state: paused;
}
.slider .slides .slide {
flex: 1;
height: 100%;
}
@keyframes slideshow {
0% { transform: translateX(0); }
20% { transform: translateX(0); }
25% { transform: translateX(-100%); }
45% { transform: translateX(-100%); }
50% { transform: translateX(-200%); }
70% { transform: translateX(-200%); }
75% { transform: translateX(-300%); }
95% { transform: translateX(-300%); }
100% { transform: translateX(-400%); }
}

以上是一些常见的CSS实验练习题，希望能对大家的学习有所帮助。