行业网站导航页面设计方案
以下是一个现代化、响应式的行业网站导航页面实现，采用蓝色为主色调，结合清晰的分类布局和友好的交互效果,帮助用户快速找到所需行业资源。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">行业网站导航 - 专业资源聚合平台</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Tailwind配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36CFC9',
neutral: '#F5F7FA',
dark: '#1D2129',
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.site-card-hover {
@apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}
}
</style>
</head>
<body class="font-inter bg-neutral text-dark">
<!-- 头部导航 -->
<header class="sticky top-0 z-50 bg-white shadow-sm">
<div class="container mx-auto px-4 py-3 flex flex-col md:flex-row items-center justify-between">
<!-- Logo -->
<div class="flex items-center mb-3 md:mb-0">
<i class="fa fa-compass text-primary text-2xl mr-2"></i>
<h1 class="text-xl font-bold text-primary">行业导航</h1>
</div>
<!-- 搜索框 -->
<div class="w-full md:w-1/3 relative">
<input
type="text"
placeholder="搜索行业或网站..."
class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50"
>
<button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary">
<i class="fa fa-search"></i>
</button>
</div>
<!-- 用户菜单 -->
<div class="flex items-center mt-3 md:mt-0">
<button class="px-3 py-1 text-sm text-gray-600 hover:text-primary mr-2">
<i class="fa fa-bookmark-o mr-1"></i>收藏
</button>
<button class="px-4 py-1 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
<i class="fa fa-user-o mr-1"></i>登录
</button>
</div>
</div>
</header>
<!-- 主内容区 -->
<main class="container mx-auto px-4 py-6">
<!-- 行业分类 -->
<section class="mb-8">
<h2 class="text-xl font-bold mb-4 text-primary border-l-4 border-primary pl-3">热门行业分类</h2>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
<a href="#tech" class="bg-white rounded-lg p-3 text-center site-card-hover">
<i class="fa fa-microchip text-primary text-2xl mb-2"></i>
<p class="text-sm">科技</p>
</a>
<a href="#finance" class="bg-white rounded-lg p-3 text-center site-card-hover">
<i class="fa fa-line-chart text-primary text-2xl mb-2"></i>
<p class="text-sm">金融</p>
</a>
<a href="#education" class="bg-white rounded-lg p-3 text-center site-card-hover">
<i class="fa fa-graduation-cap text-primary text-2xl mb-2"></i>
<p class="text-sm">教育</p>
</a>
<a href="#health" class="bg-white rounded-lg p-3 text-center site-card-hover">
<i class="fa fa-heartbeat text-primary text-2xl mb-2"></i>
<p class="text-sm">医疗健康</p>
</a>
<a href="#ecommerce" class="bg-white rounded-lg p-3 text-center site-card-hover">
<i class="fa fa-shopping-cart text-primary text-2xl mb-2"></i>
<p class="text-sm">电商</p>
</a>
<a href="#culture" class="bg-white rounded-lg p-3 text-center site-card-hover">
<i class="fa fa-paint-brush text-primary text-2xl mb-2"></i>
<p class="text-sm">文化艺术</p>
</a>
</div>
</section>
<!-- 科技行业 -->
<section id="tech" class="mb-10">
<h2 class="text-xl font-bold mb-4 text-primary border-l-4 border-primary pl-3">科技行业</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- 网站卡片 -->
<a href="https://www.techcrunch.com" target="_blank" class="bg-white rounded-lg p-4 shadow-sm site-card-hover">
<div class="flex items-center mb-2">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
<i class="fa fa-newspaper-o text-primary"></i>
</div>
<h3 class="font-medium">TechCrunch</h3>
</div>
<p class="text-sm text-gray-600">全球领先的科技新闻网站，报道最新科技动态和创业公司</p>
</a>
<a href="https://www.36kr.com" target="_blank" class="bg-white rounded-lg p-4 shadow-sm site-card-hover">
<div class="flex items-center mb-2">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
<i class="fa fa-lightbulb-o text-primary"></i>
</div>
<h3 class="font-medium">36氪</h3>
</div>
<p class="text-sm text-gray-600">关注互联网创业和科技资讯的领先媒体平台</p>
</a>
<a href="https://www.techweb.com.cn" target="_blank" class="bg-white rounded-lg p-4 shadow-sm site-card-hover">
<div class="flex items-center mb-2">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
<i class="fa fa-laptop text-primary"></i>
</div>
<h3 class="font-medium">TechWeb</h3>
</div>
<p class="text-sm text-gray-600">提供全面的科技新闻、产品评测和行业分析</p>
</a>
</div>
</section>
<!-- 金融行业 -->
<section id="finance" class="mb-10">
<h2 class="text-xl font-bold mb-4 text-primary border-l-4 border-primary pl-3">金融行业</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<a href="https://www.eastmoney.com" target="_blank" class="bg-white rounded-lg p-4 shadow-sm site-card-hover">
<div class="flex items-center mb-2">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
<i class="fa fa-line-chart text-primary"></i>
</div>
<h3 class="font-medium">东方财富网</h3>
</div>
<p class="text-sm text-gray-600">中国领先的金融信息服务平台，提供全面的财经资讯</p>
</a>
<a href="https://www.jrj.com.cn" target="_blank" class="bg-white rounded-lg p-4 shadow-sm site-card-hover">
<div class="flex items-center mb-2">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
<i class="fa fa-money text-primary"></i>
</div>
<h3 class="font-medium">金融界</h3>
</div>
<p class="text-sm text-gray-600">专业的金融信息服务平台，提供实时行情和投资分析</p>
</a>
<a href="https://www.163.com" target="_blank" class="bg-white rounded-lg p-4 shadow-sm site-card-hover">
<div class="flex items-center mb-2">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
<i class="fa fa-newspaper-o text-primary"></i>
</div>
<h3 class="font-medium">网易财经</h3>
</div>
<p class="text-sm text-gray-600">提供全面的财经新闻、股票行情和理财资讯</p>
</a>
</div>
</section>
<!-- 教育行业 -->
<section id="education" class="mb-10">
<h2 class="text-xl font-bold mb-4 text-primary border-l-4 border-primary pl-3">教育行业</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<a href="https://www.mooc.cn" target="_blank" class="bg-white rounded-lg p-4 shadow-sm site-card-hover">
<div class="flex items-center mb-2">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
<i class="fa fa-graduation-cap text-primary"></i>
</div>
<h3 class="font-medium">中国大学MOOC</h3>
</div>
<p class="text-sm text-gray-600">国内领先的在线教育平台，提供优质的大学课程</p>
</a>
<a href="https://www.zhihuishu.com" target="_blank" class="bg-white rounded-lg p-4 shadow-sm site-card-hover">
<div class="flex items-center mb-2">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
<i class="fa fa-book text-primary"></i>
</div>
<h3 class="font-medium">智慧树</h3>
</div>
<p class="text-sm text-gray-600">在线教育平台，提供各类课程和学习资源</p>
</a>
<a href="https://www.icourse163.org" target="_blank" class="bg-white rounded-lg p-4 shadow-sm site-card-hover">
<div class="flex items-center mb-2">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
<i class="fa fa-laptop text-primary"></i>
</div>
<h3 class="font-medium">学堂在线</h3>
</div>
<p class="text-sm text-gray-600">清华大学推出的在线教育平台，提供优质课程资源</p>
</a>
</div>
</section>
</main>
<!-- 页脚 -->
<footer class="bg-white py-6 border-t border-gray-200">
<div class="container mx-auto px-4 text-center text-gray-600 text-sm">
<p>© 2025 行业网站导航 - 专业资源聚合平台</p>
<div class="mt-2 flex justify-center space-x-4">
<a href="#" class="hover:text-primary">关于我们</a>
<a href="#" class="hover:text-primary">联系我们</a>
<a href="#" class="hover:text-primary">隐私政策</a>
<a href="#" class="hover:text-primary">使用条款</a>
</div>
</div>
</footer>
<!-- 返回顶部按钮 -->
<button id="backToTop" class="fixed bottom-6 right-6 bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center shadow-lg opacity-0 transition-opacity duration-300">
<i class="fa fa-arrow-up"></i>
</button>
<script>
// 返回顶部功能
const backToTopBtn = document.getElementById('backToTop');
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTopBtn.classList.remove('opacity-0');
backToTopBtn.classList.add('opacity-100');
} else {
backToTopBtn.classList.remove('opacity-100');
backToTopBtn.classList.add('opacity-0');
}
});
backToTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>
设计特点与功能说明
-
现代化UI设计：采用蓝色主色调，搭配简洁的卡片式布局，视觉层次分明,符合现代审美。
-
响应式布局：适配不同屏幕尺寸,从手机到桌面设备都能提供良好的浏览体验。
-
交互体验优化：
- 卡片hover效果：轻微上浮和阴影加深，提升视觉反馈
- 平滑滚动：点击导航链接时实现平滑滚动效果
- 返回顶部按钮：滚动时自动显示/隐藏，方便快速回到顶部
-
功能模块：
- 顶部搜索栏：支持行业和网站搜索
- 行业分类导航：直观的图标式分类，快速定位目标行业
- 网站卡片：包含图标、名称和简介，信息清晰完整
-
性能优化：
- 使用Tailwind CSS实现高效样式管理可见性优化，提升加载性能
- 合理的代码结构，便于维护和扩展
这个行业网站导航页面不仅美观大方，而且功能实用，能够帮助用户快速找到所需的行业资源,提升浏览效率和体验。
