.container { } .banner { position: relative; width: 100%; height: 400px; margin-bottom: 40px; overflow: hidden; border-radius: 8px; } .banner-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .banner-content { position: relative; z-index: 2; width: 60%; height: 100%; padding: 60px 50px; padding-left:11%; } .banner h1 { font-size: 2.5rem; margin-bottom: 20px; color: #2d3748; } .banner p { font-size: 1.1rem; color: #4a5568; max-width: 650px; } .breadcrumb { margin-bottom: 2px; padding:10px 0; font-size: 0.9rem; color: #6b7280; } .breadcrumb a { color: #4299e1; text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb span { margin: 0 8px; } .main-content { display: flex; gap: 30px; margin-bottom: 40px; } .articles { flex: 3; } .article-card { background: white; border-radius: 8px; overflow: hidden; margin-bottom: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.2s ease; display: flex; } .article-card:hover { transform: translateY(-5px); } .article-img-container { flex: 1; min-width: 300px; } .article-img { width: 100%; height: 100%; object-fit: cover; } .article-content { flex: 2; padding: 25px; display: flex; flex-direction: column; } .article-title { font-size: 1.5rem; margin-bottom: 15px; color: #2d3748; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .article-excerpt { color: #4a5568; margin-bottom: 20px; flex-grow: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .article-date { font-size: 0.9rem; color: #718096; margin-top: auto; } .sidebar { flex: 1; } .sidebar-section { background: white; border-radius: 8px; padding: 25px; margin-bottom: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .sidebar-section.purple { border-top: 4px solid #9f7aea; } .sidebar-section.green { border-top: 4px solid #48bb78; } .sidebar-section.blue { border-top: 4px solid #3182ce; } .sidebar-title { font-size: 1.2rem; margin-bottom: 20px; color: #2d3748; } .sidebar-list { list-style: none; } .sidebar-item { margin-bottom: 20px; } .itema{ display: flex; align-items: center; justify-content: space-between } .itema span{ color:#2563eb; display:inline-block; flex:1; padding:0 10px; } .sidebar-item-title { color: #2d3748; font-weight:normal; flex: 13; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .btn { display: inline-block; padding: 0px 16px; color: #2563eb; border: none; border-radius: 4px; text-decoration: none; font-weight: 500; font-size: 0.9rem; cursor: pointer; transition: background-color 0.2s ease; flex:1; } .btn.purple:hover { background-color: #805ad5; } .btn.green { background-color: #48bb78; } .btn.green:hover { background-color: #38a169; } .pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 40px 0; } .pagination-btn { padding: 8px 14px; background: white; border: 1px solid #e2e8f0; border-radius: 4px; color: #4a5568; text-decoration: none; transition: all 0.2s ease; } .pagination-btn:hover { background-color: #f1f5f9; } .pagination-btn.active { background-color: #4299e1; color: white; border-color: #4299e1; } .pagination-btn.arrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .arrowmax{ width:47%; } @media (max-width: 992px) { .article-card { flex-direction: column; } .article-img-container { min-width: auto; height: 220px; } .cong{ padding:0 5% !important; } } @media (max-width: 768px) { .banner-content { width: 100%; padding: 40px 30px; } .banner h1 { font-size: 2rem; } .main-content { flex-direction: column; } .article-img-container { height: 180px; } .detail-title { font-size: 1.7rem; } .detail-featured-img { height: 300px; } } @media (max-width: 480px) { .banner h1 { font-size: 1.6rem; } .banner p { font-size: 1rem; } .article-title { font-size: 1.3rem; } .pagination { flex-wrap: wrap; } .detail-title { font-size: 1.5rem; } .detail-featured-img { height: 200px; } } .cong{ padding:0 11%; } .detail-featured-img { width: 100%; height: 400px; object-fit: cover; border-radius: 6px; margin-bottom: 30px; } .detail-content { color: #4a5568; } .detail-content p { margin-bottom: 20px; font-size: 1.05rem; } .detail-content h3 { font-size: 1.5rem; margin: 30px 0 15px; color: #2d3748; } .detail-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 20px 0; } .detail-tags { margin-top: 40px; padding-top: 20px; border-top: 1px solid #e2e8f0; } .article-detail { flex: 3; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 30px; } .detail-header { margin-bottom: 30px; } .detail-title { font-size: 2rem; margin-bottom: 15px; color: #2d3748; } .detail-meta { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; color: #718096; font-size: 0.9rem; } .author-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .author-info { display: flex; align-items: center; gap: 10px; } .detail-tags { margin-top: 40px; padding-top: 20px; border-top: 1px solid #e2e8f0; } .tag { display: inline-block; padding: 5px 12px; background-color: #edf2f7; color: #4a5568; border-radius: 20px; font-size: 0.85rem; margin-right: 10px; margin-bottom: 10px; text-decoration: none; } .flexjust{ justify-content: space-between; } /* 分页容器 */ .blogs-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; /* 按钮间距 */ margin: 20px 0; flex-wrap: wrap; /* 小屏幕换行 */ padding: 10px 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* 分页项（页码） */ .blogs-pagination .page-item { display: inline-block; } /* 页码链接 */ .blogs-pagination a { display: inline-flex; justify-content: center; align-items: center; min-width: 40px; height: 40px; background-color: #fff; color: #333; border: 1px solid #ddd; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.3s ease; } /* 链接悬停效果 */ .blogs-pagination a:hover { background-color: #007bff; color: #fff; border-color: #007bff; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2); } /* 当前页码 */ .blogs-pagination .current { display: inline-flex; justify-content: center; align-items: center; min-width: 40px; height: 40px; background-color: #007bff; color: #fff; border: 1px solid #007bff; border-radius: 6px; font-weight: bold; font-size: 14px; } /* 上一页 / 下一页按钮 */ .blogs-pagination .btn { flex: none; padding: 8px 12px; font-size: 14px; background-color: #f8f9fa; color: #333; border: 1px solid #ddd; border-radius: 6px; transition: all 0.3s ease; } .blogs-pagination .btn:hover { background-color: #007bff; color: #fff; border-color: #007bff; } /* 禁用状态（上一页/下一页不可用时） */ .blogs-pagination .disabled { display: inline-flex; justify-content: center; align-items: center; min-width: 40px; height: 40px; padding: 8px 12px; color: #999; border: 1px solid #ddd; border-radius: 6px; background-color: #f8f9fa; cursor: not-allowed; font-size: 14px; } /* 响应式：小屏幕下缩小按钮 */ @media (max-width: 576px) { .blogs-pagination { gap: 4px; font-size: 14px; } .blogs-pagination a, .blogs-pagination .current, .blogs-pagination .btn, .blogs-pagination .disabled { min-width: 36px; height: 36px; font-size: 13px; padding: 0; } .blogs-pagination .btn { padding: 6px 8px; } } table { width: 100%; border-collapse: collapse; margin: 25px 0; font-size: 1em; box-shadow: 0 0 10px rgba(0,0,0,0.1); background: white; } table th, table td { padding: 12px 15px; text-align: left; border: 1px solid #ddd; } table th { background-color: #3498db; color: white; text-align:center; } table tr:nth-child(even) { background-color: #f2f6fc; }