html
Here's a modern, responsive QQ navigation page using Tailwind CSS and Font Awesome: <!DOCTYPE html>
常用推荐
<!-- Social Network Section -->
<section class="mb-8">
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
<i class="fa fa-users text-blue-500 mr-2"></i>社交网络
</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
<a href="https://weibo.com" class="nav-item block">
<div class="nav-card">
<i class="fa fa-weibo text-2xl text-red-500 mb-1"></i>
<span class="text-sm text-gray-700">微博</span>
</div>
</a>
<a href="https://zhihu.com" class="nav-item block">
<div class="nav-card">
<i class="fa fa-book text-2xl text-blue-500 mb-1"></i>
<span class="text-sm text-gray-700">知乎</span>
</div>
</a>
<a href="https://douban.com" class="nav-item block">
<div class="nav-card">
<i class="fa fa-film text-2xl text-green-500 mb-1"></i>
<span class="text-sm text-gray-700">豆瓣</span>
</div>
</a>
<a href="https://bilibili.com" class="nav-item block">
<div class="nav-card">
<i class="fa fa-play-circle text-2xl text-pink-500 mb-1"></i>
<span class="text-sm text-gray-700">哔哩哔哩</span>
</div>
</a>
<a href="https://tiktok.com" class="nav-item block">
<div class="nav-card">
<i class="fa fa-music text-2xl text-black mb-1"></i>
<span class="text-sm text-gray-700">抖音</span>
</div>
</a>
<a href="https://kuaishou.com" class="nav-item block">
<div class="nav-card">
<i class="fa fa-video-camera text-2xl text-orange-500 mb-1"></i>
<span class="text-sm text-gray-700">快手</span>
</div>
</a>
</div>
</section>
<!-- Utility Tools Section -->
<section class="mb-8">
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
<i class="fa fa-wrench text-gray-500 mr-2"></i>实用工具
</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
<a href="https://translate.google.cn" class="nav-item block">
<div class="nav-card">
<i class="fa fa-language text-2xl text-blue-500 mb-1"></i>
<span class="text-sm text-gray-700">谷歌翻译</span>
</div>
</a>
<a href="https://www.baidu.com" class="nav-item block">
<div class="nav-card">
<i class="fa fa-search text-2xl text-blue-500 mb-1"></i>
<span class="text-sm text-gray-700">百度</span>
</div>
</a>
<a href="https://www.taobao.com" class="nav-item block">
<div class="nav-card">
<i class="fa fa-shopping-bag text-2xl text-orange-500 mb-1"></i>
<span class="text-sm text-gray-700">淘宝</span>
</div>
</a>
<a href="https://www.jd.com" class="nav-item block">
<div class="nav-card">
<i class="fa fa-shopping-cart text-2xl text-red-500 mb-1"></i>
<span class="text-sm text-gray-700">京东</span>
</div>
</a>
<a href="https://www.12306.cn" class="nav-item block">
<div class="nav-card">
<i class="fa fa-train text-2xl text-blue-500 mb-1"></i>
<span class="text-sm text-gray-700">12306</span>
</div>
</a>
<a href="https://weather.com" class="nav-item block">
<div class="nav-card">
<i class="fa fa-cloud text-2xl text-gray-500 mb-1"></i>
<span class="text-sm text-gray-700">天气</span>
</div>
</a>
</div>
</section>Key Features:
- Responsive Design: Adapts seamlessly to mobile, tablet, and desktop screens using Tailwind's grid system.
- Modern UI: Clean card-based design with subtle shadows and rounded corners for a layered look.
- Animations:
- Fade-in animation for navigation items with staggered delays
- Hover effects (scale up + shadow) for interactive elements
- Smooth color transitions for links and buttons
- Color Scheme: Uses QQ's signature blue (#1677FF) as primary color, complemented by neutral grays and vibrant accent colors for different categories.
- Typography: Clear hierarchy with bold section titles and readable text sizes.
- Accessibility: Semantic HTML elements, proper contrast ratios, and keyboard-friendly navigation.
- Performance: Uses content-visibility for better rendering performance and optimized animations.
This page provides a familiar yet modern QQ navigation experience with all essential features and a polished look. You can easily extend it by adding more categories or customizing the links to fit your needs.
