/* 基础样式 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Microsoft YaHei', Arial, sans-serif; } body { background-color: #fff5f8; color: #333; line-height: 1.6; } a { text-decoration: none; color: inherit; } .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; } /* 头部样式 - 优化版本 */ header { background: linear-gradient(135deg, #ff6b93 0%, #ff8e9e 100%); color: white; padding: 15px 0; box-shadow: 0 2px 15px rgba(255, 107, 147, 0.3); position: sticky; top: 0; z-index: 100; } .header-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; } .logo { display: flex; align-items: center; font-size: 16px; font-weight: bold; min-width: 160px; } .logo-icon { margin-right: 10px; font-size: 32px; color: #fff; } nav { display: flex; flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ margin: 0 20px; } nav::-webkit-scrollbar { display: none; /* Chrome, Safari and Opera */ } nav a { white-space: nowrap; margin: 0 12px; font-weight: 500; transition: all 0.3s; padding: 8px 12px; border-radius: 5px; font-size: 16px; } nav a:hover, .nav-active { background-color: rgba(255,255,255,0.2); transform: translateY(-2px); } .search-container { flex-grow: 1; max-width: 300px; min-width: 200px; } .search-box { display: flex; background: white; border-radius: 25px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .search-box input { flex-grow: 1; border: none; padding: 10px 20px; font-size: 16px; outline: none; } .search-box button { background: #ff6b93; border: none; color: white; padding: 10px 20px; cursor: pointer; transition: all 0.3s; min-width: 60px; } .search-box button:hover { background: #ff4d7d; } .user-actions { display: flex; align-items: center; min-width: 140px; justify-content: flex-end; } .btn { padding: 8px 16px; border-radius: 20px; cursor: pointer; transition: all 0.3s; font-weight: 500; margin-left: 10px; white-space: nowrap; font-size: 14px; } .btn-login { background-color: transparent; border: 1px solid white; color: white; } .btn-register { background-color: white; color: #ff6b93; border: none; } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } /* 英雄区域样式 */ .hero { position: relative; padding: 100px 0; text-align: center; color: white; margin-bottom: 40px; overflow: hidden; border-radius: 0 0 30px 30px; background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); } .hero-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; } .hero h2 { font-size: 52px; margin-bottom: 20px; text-shadow: 1px 1px 3px rgba(0,0,0,0.2); } .hero p { font-size: 20px; margin-bottom: 30px; } .btn-explore { display: inline-block; background: white; color: #ff6b93; padding: 14px 35px; border-radius: 30px; font-weight: bold; transition: all 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .btn-explore:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); } /* 内容区域样式 */ .section { margin-bottom: 60px; } .section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .section-title h2 { font-size: 32px; color: #ff6b93; border-left: 6px solid #ff6b93; padding-left: 15px; } .section-more { color: #ff6b93; font-weight: 500; transition: all 0.3s; } .section-more:hover { transform: translateX(5px); } .comic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; } .comic-card { background-color: white; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: all 0.3s; cursor: pointer; } .comic-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); } .comic-cover { position: relative; height: 320px; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: white; } .comic-cover span { font-size: 22px; font-weight: bold; margin-bottom: 5px; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); } .comic-genre { font-size: 14px; opacity: 0.9; } .comic-badge { position: absolute; top: 15px; right: 15px; background: #ff6b93; color: white; padding: 5px 10px; border-radius: 15px; font-size: 12px; font-weight: bold; } .comic-info { padding: 20px; } .comic-info h3 { margin-bottom: 10px; font-size: 18px; } .comic-desc { color: #666; font-size: 14px; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .comic-stats { display: flex; justify-content: space-between; font-size: 13px; color: #888; } .comic-stats span { display: flex; align-items: center; } .comic-stats i { margin-right: 5px; } /* 特色漫画区域 */ .featured-comics { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 25px; } .featured-card { background-color: white; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: all 0.3s; display: flex; } .featured-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); } .featured-cover { position: relative; width: 150px; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: white; } .featured-info { padding: 20px; flex-grow: 1; } .featured-info h3 { margin-bottom: 10px; font-size: 20px; } .comic-rating { display: flex; align-items: center; margin-bottom: 10px; } .stars { color: #ffc107; margin-right: 10px; } .comic-rating span { font-weight: bold; color: #ff6b93; } /* 漫画分类 */ .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; } .category-item { background-color: white; border-radius: 15px; padding: 20px; text-align: center; transition: all 0.3s; box-shadow: 0 3px 10px rgba(0,0,0,0.05); } .category-item:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); } .category-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; font-size: 24px; } .category-item h3 { font-size: 16px; } /* 订阅区域 */ .subscribe-section { background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); border-radius: 20px; padding: 50px; text-align: center; color: white; } .subscribe-section h2 { font-size: 32px; margin-bottom: 15px; } .subscribe-section p { margin-bottom: 30px; font-size: 18px; } .subscribe-form { display: flex; max-width: 500px; margin: 0 auto; } .subscribe-form input { flex-grow: 1; border: none; padding: 15px 20px; border-radius: 30px 0 0 30px; font-size: 16px; outline: none; } .subscribe-form button { background: #ff6b93; border: none; color: white; padding: 15px 30px; border-radius: 0 30px 30px 0; cursor: pointer; font-weight: bold; transition: all 0.3s; } .subscribe-form button:hover { background: #ff4d7d; } .subscribe-note { margin-top: 15px; font-size: 14px; opacity: 0.8; } /* 页脚样式 */ footer { background-color: #333; color: #ddd; padding: 50px 0 20px; margin-top: 50px; } .footer-content { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-bottom: 40px; } .footer-content h3 { color: white; margin-bottom: 20px; font-size: 18px; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 10px; transition: all 0.3s; } .footer-links li:hover { color: #ff6b93; transform: translateX(5px); } .social-links { display: flex; gap: 15px; margin-top: 20px; } .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 50%; transition: all 0.3s; } .social-links a:hover { background: #ff6b93; transform: translateY(-3px); } .app-download { display: flex; flex-direction: column; gap: 15px; } .app-box { display: flex; align-items: center; background: rgba(255,255,255,0.1); border-radius: 10px; padding: 10px; transition: all 0.3s; } .app-box:hover { background: rgba(255,255,255,0.2); transform: translateY(-3px); } .app-icon { width: 40px; height: 40px; background: white; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px; color: #333; font-size: 20px; } .app-text { font-size: 12px; } .app-name { font-weight: bold; } .footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid #444; font-size: 14px; } /* 返回顶部按钮 */ .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: #ff6b93; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; opacity: 0; visibility: hidden; box-shadow: 0 3px 10px rgba(0,0,0,0.2); } .back-to-top.show { opacity: 1; visibility: visible; } .back-to-top:hover { background: #ff4d7d; transform: translateY(-3px); } /* 响应式设计 */ @media (max-width: 1100px) { nav a { margin: 0 8px; font-size: 15px; padding: 6px 10px; } .search-container { max-width: 250px; } } @media (max-width: 992px) { .footer-content { grid-template-columns: repeat(2, 1fr); } .featured-comics { grid-template-columns: 1fr; } .header-content { flex-wrap: wrap; } .logo { min-width: 140px; } nav { order: 3; width: 100%; margin: 15px 0 0; justify-content: center; } .search-container { max-width: 300px; margin: 0 15px; } .user-actions { min-width: 120px; } } @media (max-width: 768px) { .header-content { flex-wrap: nowrap; } nav { display: none; } .logo { font-size: 22px; min-width: 130px; } .logo-icon { font-size: 28px; } .search-container { max-width: 200px; margin: 0 10px; } .user-actions { min-width: 110px; } .btn { padding: 6px 12px; font-size: 13px; } .hero h2 { font-size: 36px; } .comic-grid { grid-template-columns: repeat(2, 1fr); } .featured-card { flex-direction: column; } .featured-cover { width: 100%; height: 200px; } .subscribe-form { flex-direction: column; } .subscribe-form input { border-radius: 30px; margin-bottom: 10px; } .subscribe-form button { border-radius: 30px; } } @media (max-width: 576px) { .footer-content { grid-template-columns: 1fr; } .comic-grid { grid-template-columns: 1fr; } .category-grid { grid-template-columns: repeat(2, 1fr); } .header-content { flex-wrap: wrap; } .logo { min-width: 100%; margin-bottom: 10px; justify-content: center; } .search-container { order: 2; max-width: 100%; margin: 10px 0; } .user-actions { order: 3; min-width: 100%; justify-content: center; margin-top: 10px; } }