body { background-color: skyblue; margin: 0; } #header { display: flex; align-items: center; background-color: #ffffff; padding: 10px 20px; } #header .logo { margin-right: 40px; } #header .nav { flex-grow: 1; } #header .nav ul { display: flex; justify-content: space-between; padding: 0; margin: 0; list-style-type: none; } #header .nav ul li { font-size: 20px; padding: 10px 15px; } #header .language { margin-left: 40px; } #header .language ul { display: flex; list-style-type: none; padding: 0; margin: 0; } #header .language ul li { font-size: 18px; padding: 10px 15px; margin-left: 10px; } #header .nav ul li:hover, #header .language ul li:hover { background-color: #ffffff; } /* 如果想显示进度条 删除此css样式 */ #swipper { width: 100%; overflow: hidden; position: relative; height: 400px; /* 设置一个固定高度 */ } .swipper-container { display: flex; width: 400%; animation: mover 12s steps(4) infinite; } .swipper-slide { width: 25%; } .swipper-slide-img { width: 100%; height: 400px; object-fit: cover; } .prev, .next { position: absolute; width: 32px; height: 32px; top: 184px; cursor: pointer; display: flex; justify-content: center; align-items: center; } .prev img, .next img { width: 20px; /* 调整图片大小 */ height: 20px; object-fit: contain; } .prev { left: 40px; } .next { right: 40px; } .counter { position: absolute; width: 80px; left: 50%; height: 15px; margin-left: -40px; bottom: 50px; display: flex; justify-content: space-between; } .counter .point { width: 15px; height: 15px; background-color: blueviolet; border-radius: 50%; cursor: pointer; } .counter .point:hover { background-color: #fff; } @keyframes mover { 0% { margin-left: 0; } 100% { margin-left: -400%; } }