导航首页入口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;       }   }