夜雨聆风
导航首页入口HTML示例 !!附源码!!
效果展示
完整源码
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>极客导航</title><linkhref="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"rel="stylesheet"><linkhref="css.css"rel="stylesheet" /></head><body><divclass="container"><header><h1>Geek Navigator</h1><divclass="search-box"><inputtype="text"class="search-input"placeholder="搜索或输入网址..."></div></header><divclass="grid"><divclass="card"><h2>常用工具</h2><divclass="links"><ahref="#"class="link-item"><iclass="fab fa-github"></i>GitHub</a><ahref="#"class="link-item"><iclass="fab fa-codepen"></i>CodePen</a><ahref="#"class="link-item"><iclass="fas fa-code"></i>StackOverflow</a></div></div><divclass="card"><h2>设计资源</h2><divclass="links"><ahref="#"class="link-item"><iclass="fab fa-dribbble"></i>Dribbble</a><ahref="#"class="link-item"><iclass="fab fa-behance"></i>Behance</a><ahref="#"class="link-item"><iclass="fas fa-palette"></i>Adobe Color</a></div></div><divclass="card"><h2>开发资源</h2><divclass="links"><ahref="#"class="link-item"><iclass="fab fa-js"></i>MDN Web Docs</a><ahref="#"class="link-item"><iclass="fab fa-npm"></i>npm Registry</a><ahref="#"class="link-item"><iclass="fas fa-terminal"></i>CodeSandbox</a></div></div></div></div></body></html>
* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', sans-serif;}body {background: linear-gradient(135deg, #1a1a2e, #16213e);color: #fff;min-height: 100vh;}.container {max-width: 1200px;margin: 0 auto;padding: 2rem;}header {text-align: center;margin-bottom: 3rem;animation: slideDown 1s ease;}h1 {font-size: 3rem;margin-bottom: 1rem;background: linear-gradient(45deg, #00b4d8, #90e0ef);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.search-box {max-width: 600px;margin: 0 auto;position: relative;}.search-input {width: 100%;padding: 1rem 2rem;border: none;border-radius: 50px;background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);color: #fff;font-size: 1.1rem;transition: all 0.3s ease;}.search-input:focus {outline: none;box-shadow: 0 0 20px rgba(144, 224, 239, 0.5);}.grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 2rem;margin-top: 3rem;}.card {background: rgba(255, 255, 255, 0.05);border-radius: 15px;padding: 1.5rem;backdrop-filter: blur(10px);transition: all 0.3s ease;cursor: pointer;position: relative;overflow: hidden;}.card:hover {transform: translateY(-10px);background: rgba(255, 255, 255, 0.1);box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);}.card::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg,transparent,rgba(255, 255, 255, 0.2),transparent);transition: 0.5s;}.card:hover::before {left: 100%;}.card h2 {color: #90e0ef;margin-bottom: 1rem;font-size: 1.5rem;}.links {display: flex;flex-direction: column;gap: 0.8rem;}.link-item {display: flex;align-items: center;padding: 0.8rem;border-radius: 8px;color: #fff;text-decoration: none;transition: all 0.3s ease;}.link-item:hover {background: rgba(144, 224, 239, 0.1);transform: translateX(10px);}.link-item i {width: 30px;font-size: 1.2rem;margin-right: 1rem;}@keyframes slideDown {from {transform: translateY(-50px);opacity: 0;}to {transform: translateY(0);opacity: 1;}}@media (max-width: 768px) {.grid {grid-template-columns: 1fr;}h1 {font-size: 2rem;}}