body { margin: 0; font-family: Arial, sans-serif; } .Progress { width: 100%; padding: 0; margin: 0; position: fixed; top: 0px; z-index: 1000; } .Prostick { width: 0; background-color: #0091EA; height: 5px; } .navbar { position: fixed; width: 100%; max-width: 1920px; height: 65px; top: 0px; background-color: #ffffff; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 178.5px; box-sizing: border-box; transform: all 0.8s; } .navbar-left { display: flex; align-items: center; } .navbar-left img { width: 40px; height: 40px; } .navbar-left .site-title { margin-left: 10px; font-size: 20px; font-weight: bold; color: #000000; } .navbar-right { display: flex; gap: 35px; } .navbar-right a { text-decoration: none; color: #000000; font-size: 16px; padding: 5px 10px; transition: color 0.3s ease; position: relative; /* 添加相对定位 */ display: flex; gap: 35px; } .navbar-right a:hover, .navbar-right a.active { color: #0091EA; } .line { position: absolute; left: 16px; bottom: 0; width: 28px; height: 2px; background-color: #0091EA; transition: all .3s; } .carousel-container { position: relative; width: 80%; max-width: 1200px; overflow: hidden; border: 2px solid #ddd; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 80px auto 20px auto; } .carousel-images { display: flex; transition: transform 0.5s ease-in-out; } .carousel-images img { width: 100%; display: block; object-fit: cover; } button { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px; cursor: pointer; z-index: 1; } #prev-btn { left: 10px; border-radius: 5px; } #next-btn { right: 10px; border-radius: 5px; } .dots-container { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; } .dot { height: 10px; width: 10px; margin: 0 5px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; cursor: pointer; } .dot.active { background-color: rgba(0, 0, 0, 0.5); } .news-effect { width: 1200px; height: 300px; background-color: #87CEEB; margin: auto; } .news-effect span { font-size: 22px; color: white; text-align: center; } .news-class-list { text-align: center; font-size: 18px; font-weight: bold; color: white; transition: color 0.5s; } .news-class-list p:hover { color: #000000; } .news-definition { font-size: 22px; width: 1200px; height: 300px; background-color: #87CEEB; margin: auto; } .news-definition p { font-size: 18px; font-weight: bold; text-indent: 2em; color: #ffffff; padding: 20px 50px; } .news-elevator { width: 50px; height: 200px; position: fixed; right: 100px; bottom: 100px; } .news-elevator-list { list-style: none; text-decoration: none; padding: 0; } .news-elevator-list li { background-color: lightgray; margin-bottom: 5px; border-radius: 5px; width: 50px; height: 50px; font-size: 18px; text-align: center; } .news-elevator-list a { text-decoration: none; } .footer { width: 100%; background-color: #3FA8EA; text-align: center; font-size: 16px; }