/* 全局样式 */ body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; background: #f5f5f5; color: #333; } * { box-sizing: border-box; } a { color: #0066cc; text-decoration: none; } a:hover { text-decoration: underline; } /* 容器 */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } /* 头部导航 */ header { background: #fff; border-bottom: 1px solid #ddd; padding: 1rem 0; } nav { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 0.5rem; } nav a { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0.5rem; font-weight: 500; } nav a:hover { background: #f0f0f0; } /* 移动端导航 */ @media (max-width: 768px) { nav { flex-wrap: nowrap !important; overflow-x: visible; } nav a { font-size: 0.85rem; padding: 0.4rem 0.3rem; } } /* 主要内容 */ main { padding: 2rem 0; } .section { margin-bottom: 3rem; } .section h2 { border-bottom: 2px solid #0066cc; padding-bottom: 0.5rem; margin-bottom: 1.5rem; } /* 介绍区域 */ .intro { background: #fff; padding: 2rem; border-radius: 8px; margin-bottom: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .intro h1 { margin-top: 0; color: #222; } /* 卡片列表 */ .card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } .card { background: #fff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s; } .card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .card h3 { margin-top: 0; margin-bottom: 0.5rem; } .card h3 a { color: #222; } .card .meta { font-size: 0.9rem; color: #666; margin-bottom: 0.5rem; } .card .one-line { color: #555; margin-bottom: 0.5rem; } .card .summary { font-size: 0.9rem; color: #777; } /* 面包屑 */ .breadcrumb { font-size: 0.9rem; color: #666; padding: 0.5rem 0; margin-bottom: 1rem; border-bottom: 1px solid #eee; } .breadcrumb a { color: #0066cc; } .breadcrumb span { margin: 0 0.5rem; color: #ccc; } /* 文章内容 */ article { background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } article h1 { margin-top: 0; border-bottom: 3px solid #0066cc; padding-bottom: 1rem; } article h2 { color: #0066cc; margin-top: 2rem; } article .meta { background: #f8f8f8; padding: 1rem; border-left: 4px solid #0066cc; margin: 1rem 0; } /* 响应式 */ @media (max-width: 768px) { .card-list { grid-template-columns: 1fr; } .intro, article { padding: 1rem; } } /* 列表 */ ul, ol { list-style: none; margin: 0; padding: 0; }