功能，一个导航页
优点，只需300行
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>🚀 12.15 技术笔记</title> <style> /* 基础重置 */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* 变量定义 */ :root { --primary: #4a90e2; --secondary: #7b68ee; --accent: #ff6b6b; --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.85); --card-bg: rgba(255, 255, 255, 0.12); --border-color: rgba(255, 255, 255, 0.25); } /* 全局样式 */ html, body { height: 100%; width: 100%; overflow: hidden; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(135deg, #a8edea 0%, #fed6e3 25%, #ffeaa7 50%, #dfe6e9 75%, #a8e6cf 100%); background-size: 400% 400%; animation: gradient-flow 18s ease infinite; color: var(--text-primary); display: flex; flex-direction: column; position: relative; } @keyframes gradient-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* 柔和遮罩 */ .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); backdrop-filter: blur(2px); z-index: -1; } /* 头部 */ .header { padding: 25px 20px; text-align: center; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(15px); border-bottom: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05); } .header h1 { font-size: 26px; color: #2d3436; margin-bottom: 8px; font-weight: 700; letter-spacing: 0.5px; } .header p { font-size: 14px; color: #636e72; font-weight: 500; } /* 内容区 */ .content { flex: 1; padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 卡片列表 */ .card-list { display: flex; flex-direction: column; gap: 15px; max-width: 400px; margin: 0 auto; } /* 卡片样式 */ .card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 20px; padding: 20px; display: flex; align-items: center; gap: 18px; cursor: pointer; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: fadeInUp 0.6s ease forwards; opacity: 0; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } } .card:hover { transform: translateY(-8px) scale(1.03); background: rgba(255, 255, 255, 0.95); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); border-color: rgba(255, 255, 255, 0.8); } /* 卡片图标 */ .card-icon { font-size: 34px; width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } /* 卡片内容 */ .card-info { flex: 1; } .card-title { font-size: 17px; font-weight: 600; margin-bottom: 6px; color: #2d3436; } .card-desc { font-size: 13px; color: #636e72; line-height: 1.5; } /* 底部控制 */ .controls { padding: 20px; display: flex; justify-content: center; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(15px); border-top: 1px solid rgba(255, 255, 255, 0.3); } .btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; color: white; padding: 14px 35px; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; font-size: 15px; font-weight: 600; font-family: inherit; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); } .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); } .btn:active { transform: translateY(0); } /* 响应式 */ @media (max-width: 380px) { .header h1 { font-size: 22px; } .card { padding: 16px; } .card-icon { font-size: 30px; width: 48px; height: 48px; } .card-title { font-size: 15px; } .card-desc { font-size: 12px; } } </style> </head> <body> <div class="overlay"></div> <div class="header"> <h1>🚀 12.15 技术笔记</h1> <p>Linux驱动开发学习</p> </div> <div class="content"> <div class="card-list" id="cardList"></div> </div> <div class="controls"> <button class="btn" id="shuffleBtn">🔀 随机排序</button> </div> <script> // 数据 const items = [ { name: '迅为-Linux驱动1-5', file: '1.迅为-linux驱动1-5.html', icon: '🐧', desc: 'Linux驱动开发基础教程第1-5章' }, { name: 'Go自定义类型', file: '1.go自定义类型.html', icon: '🔷', desc: 'Go语言中的类型定义与结构体' } ]; // 渲染卡片 function renderCards() { const container = document.getElementById('cardList'); container.innerHTML = ''; items.forEach((item, index) => { const card = document.createElement('div'); card.className = 'card'; card.style.animationDelay = `${index * 0.1}s`; card.innerHTML = ` <div class="card-icon">${item.icon}</div> <div class="card-info"> <div class="card-title">${item.name}</div> <div class="card-desc">${item.desc}</div> </div> `; card.onclick = () => window.location.href = item.file; container.appendChild(card); }); } // 随机排序 function shuffle() { items.sort(() => Math.random() - 0.5); renderCards(); } // 初始化 document.getElementById('shuffleBtn').addEventListener('click', shuffle); renderCards(); </script> </body> </html>
