豆包现在集成了AI编程的菜单，直接就可以写前端页面了，太厉害了
然后写了一个不错的博客模板
模板代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>探索无限 - 技术与创意的交汇点</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#FF7D00',
dark: '#1D2939',
light: '#F9FAFB',
accent: '#7C3AED',
muted: '#667085',
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
},
},
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delay-1 {
animation: float 6s ease-in-out 1s infinite;
}
.animate-float-delay-2 {
animation: float 6s ease-in-out 2s infinite;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
100% {
transform: translateY(0px);
}
}
</style>
</head>
<body class="font-inter bg-light text-dark antialiased">
<!-- 导航栏 -->
<header
id="navbar"
class="fixed w-full z-50 transition-all duration-300 bg-transparent"
>
<div
class="container mx-auto px-4 py-3 flex justify-between items-center"
>
<a href="#" class="flex items-center space-x-2">
<div
class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center"
>
<span class="text-primary font-bold text-xl">探索</span>
</div>
<span class="text-xl font-bold text-white text-shadow"
>无限</span
>
</a>
<!-- 桌面导航 -->
<nav class="hidden md:flex items-center space-x-8">
<a
href="#home"
class="text-white hover:text-secondary transition-colors font-medium"
>首页</a
>
<a
href="#articles"
class="text-white hover:text-secondary transition-colors font-medium"
>文章</a
>
<a
href="#projects"
class="text-white hover:text-secondary transition-colors font-medium"
>项目</a
>
<a
href="#about"
class="text-white hover:text-secondary transition-colors font-medium"
>关于</a
>
<a
href="#contact"
class="bg-secondary hover:bg-secondary/90 text-white px-5 py-2 rounded-full font-medium transition-all hover:shadow-lg hover:shadow-secondary/20"
>联系我</a
>
</nav>
<!-- 移动端菜单按钮 -->
<button
id="menu-toggle"
title="菜单"
class="md:hidden text-white text-2xl"
>
<i class="fa-solid fa-bars"></i>
</button>
</div>
<!-- 移动端导航菜单 -->
<div
id="mobile-menu"
class="md:hidden hidden bg-white shadow-lg absolute w-full transition-all duration-300"
>
<div
class="container mx-auto px-4 py-3 flex flex-col space-y-4"
>
<a
href="#home"
class="text-dark hover:text-primary transition-colors font-medium py-2"
>首页</a
>
<a
href="#articles"
class="text-dark hover:text-primary transition-colors font-medium py-2"
>文章</a
>
<a
href="#projects"
class="text-dark hover:text-primary transition-colors font-medium py-2"
>项目</a
>
<a
href="#about"
class="text-dark hover:text-primary transition-colors font-medium py-2"
>关于</a
>
<a
href="#contact"
class="bg-secondary hover:bg-secondary/90 text-white px-5 py-2 rounded-full font-medium transition-all text-center"
>联系我</a
>
</div>
</div>
</header>
<!-- 英雄区域 -->
<section
id="home"
class="min-h-screen relative flex items-center justify-center overflow-hidden"
>
<!-- 背景装饰 -->
<div
class="absolute inset-0 bg-gradient-to-br from-dark to-primary/80 z-0"
></div>
<div class="absolute inset-0 overflow-hidden">
<div
class="absolute top-10 left-10 w-64 h-64 rounded-full bg-accent/20 blur-3xl animate-float"
></div>
<div
class="absolute bottom-20 right-10 w-80 h-80 rounded-full bg-secondary/20 blur-3xl animate-float-delay-1"
></div>
<div
class="absolute top-1/3 right-1/4 w-40 h-40 rounded-full bg-primary/30 blur-3xl animate-float-delay-2"
></div>
</div>
<div class="container mx-auto px-4 z-10 pt-20">
<div class="max-w-4xl mx-auto text-center">
<div
class="inline-block px-4 py-1 rounded-full bg-white/10 backdrop-blur-sm text-white text-sm font-medium mb-6"
>
<span class="animate-pulse">🔥</span> 技术 | 创意 | 探索
</div>
<h1
class="text-[clamp(2.5rem,6vw,4.5rem)] font-bold text-white leading-tight mb-6"
>
探索
<span
class="bg-gradient-to-r from-secondary to-accent text-gradient"
>无限</span
>
可能
</h1>
<p
class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 mb-10 max-w-2xl mx-auto"
>
分享前沿技术、创意项目与编程心得的个人博客，一起在代码与设计的世界中探索无限可能。
</p>
<div class="flex flex-wrap justify-center gap-4">
<a
href="#articles"
class="bg-white text-primary hover:bg-white/90 px-8 py-3 rounded-full font-medium transition-all hover:shadow-lg hover:shadow-white/20"
>
浏览文章
<i class="fa-solid fa-arrow-right ml-2"></i>
</a>
<a
href="#projects"
class="bg-transparent border-2 border-white text-white hover:bg-white/10 px-8 py-3 rounded-full font-medium transition-all"
>
查看项目 <i class="fa-solid fa-rocket ml-2"></i>
</a>
</div>
</div>
<!-- 滚动提示 -->
<div
class="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-white animate-bounce"
>
<span class="block text-sm mb-2">向下滚动</span>
<i class="fa-solid fa-chevron-down"></i>
</div>
</div>
</section>
<!-- 精选文章 -->
<section id="articles" class="py-24 bg-light">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold mb-4">
精选 <span class="text-primary">文章</span>
</h2>
<p class="text-muted max-w-2xl mx-auto">
探索最新的技术文章、编程技巧和创意灵感，让我们一起成长。
</p>
</div>
<div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
>
<!-- 文章卡片 1 -->
<article
class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group"
>
<div class="relative h-56 overflow-hidden">
<img
src="https://picsum.photos/800/600?random=1"
alt="人工智能未来趋势"
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
/>
<div
class="absolute top-4 left-4 bg-primary text-white text-xs font-medium px-3 py-1 rounded-full"
>
人工智能
</div>
</div>
<div class="p-6">
<h3
class="text-xl font-bold mb-3 group-hover:text-primary transition-colors"
>
人工智能的未来趋势与应用场景
</h3>
<p class="text-muted mb-4 line-clamp-3">
探索人工智能在未来几年的发展趋势，以及它将如何改变我们的生活和工作方式...
</p>
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<img
src="https://picsum.photos/40/40?random=100"
alt="作者头像"
class="w-8 h-8 rounded-full"
/>
<span class="text-sm text-muted">李明</span>
</div>
<span class="text-sm text-muted"
><i class="fa-regular fa-calendar mr-1"></i>
2025-04-15</span
>
</div>
</div>
</article>
<!-- 文章卡片 2 -->
<article
class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group"
>
<div class="relative h-56 overflow-hidden">
<img
src="https://picsum.photos/800/600?random=2"
alt="Web开发技巧"
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
/>
<div
class="absolute top-4 left-4 bg-secondary text-white text-xs font-medium px-3 py-1 rounded-full"
>
Web开发
</div>
</div>
<div class="p-6">
<h3
class="text-xl font-bold mb-3 group-hover:text-primary transition-colors"
>
2025年必备的前端开发工具与技术
</h3>
<p class="text-muted mb-4 line-clamp-3">
从构建工具到框架，从设计系统到性能优化，本文总结了前端开发者在2025年应该掌握的关键工具和技术...
</p>
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<img
src="https://picsum.photos/40/40?random=101"
alt="作者头像"
class="w-8 h-8 rounded-full"
/>
<span class="text-sm text-muted">张华</span>
</div>
<span class="text-sm text-muted"
><i class="fa-regular fa-calendar mr-1"></i>
2025-04-22</span
>
</div>
</div>
</article>
<!-- 文章卡片 3 -->
<article
class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group"
>
<div class="relative h-56 overflow-hidden">
<img
src="https://picsum.photos/800/600?random=3"
alt="移动应用开发"
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
/>
<div
class="absolute top-4 left-4 bg-accent text-white text-xs font-medium px-3 py-1 rounded-full"
>
移动开发
</div>
</div>
<div class="p-6">
<h3
class="text-xl font-bold mb-3 group-hover:text-primary transition-colors"
>
Flutter与React
Native对比：2025年该选择哪个跨平台框架？
</h3>
<p class="text-muted mb-4 line-clamp-3">
随着移动应用市场的不断发展，跨平台开发框架越来越受欢迎。本文将对比Flutter和React
Native的优缺点...
</p>
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<img
src="https://picsum.photos/40/40?random=102"
alt="作者头像"
class="w-8 h-8 rounded-full"
/>
<span class="text-sm text-muted">王强</span>
</div>
<span class="text-sm text-muted"
><i class="fa-regular fa-calendar mr-1"></i>
2025-05-05</span
>
</div>
</div>
</article>
</div>
<div class="text-center mt-12">
<a
href="#"
class="inline-flex items-center text-primary font-medium hover:text-primary/80 transition-colors"
>
查看更多文章
<i class="fa-solid fa-long-arrow-right ml-2"></i>
</a>
</div>
</div>
</section>
<!-- 个人项目 -->
<section id="projects" class="py-24 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold mb-4">
个人 <span class="text-primary">项目</span>
</h2>
<p class="text-muted max-w-2xl mx-auto">
探索我最新的创意项目和开源作品，每一个项目都代表着一次技术挑战和创新尝试。
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<!-- 项目卡片 1 -->
<div
class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300"
>
<div class="p-6 md:p-8">
<div class="flex items-center mb-6">
<div
class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center text-primary mr-4"
>
<i
class="fa-solid fa-chart-line text-xl"
></i>
</div>
<div>
<h3 class="text-xl font-bold">
数据可视化平台
</h3>
<p class="text-muted text-sm">
基于React和D3.js的交互式数据可视化解决方案
</p>
</div>
</div>
<p class="text-muted mb-6">
这是一个功能强大的数据可视化平台，支持多种图表类型和数据源，提供直观的拖拽式界面，让数据分析变得简单直观。
</p>
<div class="flex flex-wrap gap-2 mb-6">
<span
class="px-3 py-1 bg-gray-100 text-muted text-xs rounded-full"
>React</span
>
<span
class="px-3 py-1 bg-gray-100 text-muted text-xs rounded-full"
>D3.js</span
>
<span
class="px-3 py-1 bg-gray-100 text-muted text-xs rounded-full"
>Node.js</span
>
<span
class="px-3 py-1 bg-gray-100 text-muted text-xs rounded-full"
>MongoDB</span
>
</div>
<div class="flex space-x-4">
<a
href="#"
class="text-primary hover:text-primary/80 font-medium flex items-center transition-colors"
>
<i class="fa-brands fa-github mr-2"></i>
源码
</a>
<a
href="#"
class="text-secondary hover:text-secondary/80 font-medium flex items-center transition-colors"
>
<i class="fa-solid fa-link mr-2"></i> 演示
</a>
</div>
</div>
</div>
<!-- 项目卡片 2 -->
<div
class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300"
>
<div class="p-6 md:p-8">
<div class="flex items-center mb-6">
<div
class="w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center text-secondary mr-4"
>
<i
class="fa-solid fa-mobile-screen text-xl"
></i>
</div>
<div>
<h3 class="text-xl font-bold">
健康追踪应用
</h3>
<p class="text-muted text-sm">
全方位健康管理与运动追踪移动应用
</p>
</div>
</div>
<p class="text-muted mb-6">
这款应用可以帮助用户追踪健康数据、记录运动情况、设定目标并提供个性化建议，采用现代UI设计和流畅的用户体验。
</p>
<div class="flex flex-wrap gap-2 mb-6">
<span
class="px-3 py-1 bg-gray-100 text-muted text-xs rounded-full"
>Flutter</span
>
<span
class="px-3 py-1 bg-gray-100 text-muted text-xs rounded-full"
>Firebase</span
>
<span
class="px-3 py-1 bg-gray-100 text-muted text-xs rounded-full"
>Python</span
>
<span
class="px-3 py-1 bg-gray-100 text-muted text-xs rounded-full"
>TensorFlow</span
>
</div>
<div class="flex space-x-4">
<a
href="#"
class="text-primary hover:text-primary/80 font-medium flex items-center transition-colors"
>
<i class="fa-brands fa-github mr-2"></i>
源码
</a>
<a
href="#"
class="text-secondary hover:text-secondary/80 font-medium flex items-center transition-colors"
>
<i class="fa-solid fa-link mr-2"></i> 演示
</a>
</div>
</div>
</div>
<!-- 项目卡片 3 -->
<div
class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300"
>
<div class="p-6 md:p-8">
<div class="flex items-center mb-6">
<div
class="w-12 h-12 rounded-xl bg-accent/10 flex items-center justify-center text-accent mr-4"
>
<i class="fa-solid fa-robot text-xl"></i>
</div>
<div>
<h3 class="text-xl font-bold">
智能聊天机器人
</h3>
<p class="text-muted text-sm">
基于深度学习的AI助手，提供自然语言交互体验
</p>
</div>
</div>
<p class="text-muted mb-6">
这个聊天机器人使用最先进的自然语言处理技术，能够理解用户意图，提供智能回答，并不断学习和改进对话能力。
</p>
<div class="flex flex-wrap gap-2 mb-6">
<span
class="px-3 py-1 bg-gray-100 text-muted text-xs rounded-full"
>PyTorch</span
>
<span
class="px-3 py-1 bg-gray-100 text-muted text-xs rounded-full"
>FastAPI</span
>
<span
class="px-3 py-1 bg-gray-100 text-muted text-xs rounded-full"
>WebSocket</span
>
<span
class="px-3 py-1 bg-gray-100 text-muted text-xs rounded-full"
>Docker</span
>
</div>
<div class="flex space-x-4">
<a
href="#"
class="text-primary hover:text-primary/80 font-medium flex items-center transition-colors"
>
<i class="fa-brands fa-github mr-2"></i>
源码
</a>
<a
href="#"
class="text-secondary hover:text-secondary/80 font-medium flex items-center transition-colors"
>
<i class="fa-solid fa-link mr-2"></i> 演示
</a>
</div>
</div>
</div>
<!-- 项目卡片 4 -->
<div
class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300"
>
<div class="p-6 md:p-8">
<div class="flex items-center mb-6">
<div
class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center text-primary mr-4"
>
<i
class="fa-solid fa-shopping-cart text-xl"
></i>
</div>
<div>
<h3 class="text-xl font-bold">电商平台</h3>
<p class="text-muted text-sm">
高性能电商解决方案，支持全渠道销售和营销
</p>
</div>
</div>
<p class="text-muted mb-6">
这是一个现代化电商平台，集成了商品管理、订单处理、支付系统、客户关系管理等功能，提供流畅的购物体验。
</p>
<div class="flex flex-wrap gap-2 mb-6">
<span
class="px-3 py-1 bg-gray-100 text-muted text-xs rounded-full"
>Vue.js</span
>
<span
class="px-3 py-1 bg-gray-100 text-muted text-xs rounded-full"
>Spring Boot</span
>
<span
class="px-3 py-1 bg-gray-100 text-muted text-xs rounded-full"
>MySQL</span
>
<span
class="px-3 py-1 bg-gray-100 text-muted text-xs rounded-full"
>Redis</span
>
</div>
<div class="flex space-x-4">
<a
href="#"
class="text-primary hover:text-primary/80 font-medium flex items-center transition-colors"
>
<i class="fa-brands fa-github mr-2"></i>
源码
</a>
<a
href="#"
class="text-secondary hover:text-secondary/80 font-medium flex items-center transition-colors"
>
<i class="fa-solid fa-link mr-2"></i> 演示
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 关于作者 -->
<section id="about" class="py-24 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-5xl mx-auto">
<div
class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
>
<div class="relative">
<div
class="absolute -top-6 -left-6 w-64 h-64 rounded-full bg-primary/10 -z-10"
></div>
<div
class="absolute -bottom-6 -right-6 w-64 h-64 rounded-full bg-secondary/10 -z-10"
></div>
<img
src="https://picsum.photos/600/700?random=5"
alt="作者照片"
class="w-full h-auto rounded-2xl shadow-xl"
/>
<div
class="absolute -bottom-4 -right-4 bg-white p-4 rounded-xl shadow-lg"
>
<div class="flex items-center space-x-4">
<div class="text-center">
<div
class="text-2xl font-bold text-primary"
>
200+
</div>
<div class="text-sm text-muted">
文章
</div>
</div>
<div class="text-center">
<div
class="text-2xl font-bold text-primary"
>
50+
</div>
<div class="text-sm text-muted">
项目
</div>
</div>
<div class="text-center">
<div
class="text-2xl font-bold text-primary"
>
10k+
</div>
<div class="text-sm text-muted">
关注者
</div>
</div>
</div>
</div>
</div>
<div>
<h2
class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold mb-6"
>
关于 <span class="text-primary">作者</span>
</h2>
<p class="text-muted mb-6 leading-relaxed">
你好！我是张明，一名拥有10年经验的全栈开发者和技术作家。我热衷于探索新技术和分享知识，尤其关注人工智能、Web开发和移动应用领域的创新。
</p>
<p class="text-muted mb-6 leading-relaxed">
我曾在多家科技公司担任技术主管和顾问，参与过多个大型项目的开发和管理。现在，我致力于通过写作和开源项目，帮助更多人学习和掌握现代技术。
</p>
<p class="text-muted mb-8 leading-relaxed">
我的博客涵盖了从前端到后端，从理论到实践的各种技术话题。我相信分享是成长的最佳方式，希望我的文章和项目能对你有所帮助。
</p>
<div class="mb-8">
<h3 class="text-lg font-bold mb-4">专业技能</h3>
<div class="grid grid-cols-2 gap-4">
<div class="flex items-center">
<div
class="w-3 h-3 rounded-full bg-primary mr-3"
></div>
<span
>前端开发 (React, Vue,
Angular)</span
>
</div>
<div class="flex items-center">
<div
class="w-3 h-3 rounded-full bg-primary mr-3"
></div>
<span
>后端开发 (Node.js, Python,
Java)</span
>
</div>
<div class="flex items-center">
<div
class="w-3 h-3 rounded-full bg-primary mr-3"
></div>
<span
>移动应用开发 (Flutter, React
Native)</span
>
</div>
<div class="flex items-center">
<div
class="w-3 h-3 rounded-full bg-primary mr-3"
></div>
<span>人工智能与机器学习</span>
</div>
<div class="flex items-center">
<div
class="w-3 h-3 rounded-full bg-primary mr-3"
></div>
<span>数据库设计与优化</span>
</div>
<div class="flex items-center">
<div
class="w-3 h-3 rounded-full bg-primary mr-3"
></div>
<span>云服务与DevOps</span>
</div>
</div>
</div>
<div class="flex space-x-4">
<a
href="#"
class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors"
>
<i class="fa-brands fa-github"></i>
</a>
<a
href="#"
class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors"
>
<i class="fa-brands fa-twitter"></i>
</a>
<a
href="#"
class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors"
>
<i class="fa-brands fa-linkedin"></i>
</a>
<a
href="#"
class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors"
>
<i class="fa-brands fa-youtube"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 订阅区域 -->
<section
class="py-20 bg-gradient-to-r from-primary to-accent text-white"
>
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold mb-4">
订阅我的<span class="text-secondary">技术周刊</span>
</h2>
<p class="text-white/80 mb-8">
获取最新的技术资讯、教程和项目更新，每周直接发送到你的邮箱。
</p>
<form
class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto"
>
<input
type="email"
placeholder="输入你的邮箱地址"
class="flex-grow px-5 py-3 rounded-full focus:outline-none focus:ring-2 focus:ring-white/30 text-dark"
/>
<button
type="submit"
class="bg-secondary hover:bg-secondary/90 text-white px-8 py-3 rounded-full font-medium transition-all hover:shadow-lg hover:shadow-secondary/20 whitespace-nowrap"
>
立即订阅
<i class="fa-solid fa-paper-plane ml-2"></i>
</button>
</form>
<p class="text-white/60 text-sm mt-4">
我们尊重你的隐私，不会向第三方分享你的信息。
</p>
</div>
</div>
</section>
<!-- 联系区域 -->
<section id="contact" class="py-24 bg-light">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold mb-4">
与我<span class="text-primary">联系</span>
</h2>
<p class="text-muted max-w-2xl mx-auto">
有任何问题、建议或合作机会？请随时联系我，我会尽快回复。
</p>
</div>
<div class="max-w-5xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div>
<form class="space-y-6">
<div>
<label
for="name"
class="block text-sm font-medium text-muted mb-1"
>姓名</label
>
<input
type="text"
id="name"
class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
/>
</div>
<div>
<label
for="email"
class="block text-sm font-medium text-muted mb-1"
>邮箱</label
>
<input
type="email"
id="email"
class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
/>
</div>
<div>
<label
for="subject"
class="block text-sm font-medium text-muted mb-1"
>主题</label
>
<input
type="text"
id="subject"
class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
/>
</div>
<div>
<label
for="message"
class="block text-sm font-medium text-muted mb-1"
>消息</label
>
<textarea
id="message"
rows="5"
class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
></textarea>
</div>
<button
type="submit"
class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg font-medium transition-all hover:shadow-lg hover:shadow-primary/20 w-full md:w-auto"
>
发送消息
<i class="fa-solid fa-paper-plane ml-2"></i>
</button>
</form>
</div>
<div>
<div
class="bg-white p-8 rounded-2xl shadow-lg h-full"
>
<h3 class="text-xl font-bold mb-6">联系方式</h3>
<div class="space-y-6">
<div class="flex items-start">
<div
class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 mt-1 flex-shrink-0"
>
<i class="fa-solid fa-envelope"></i>
</div>
<div>
<h4 class="font-medium mb-1">
邮箱
</h4>
<p class="text-muted">
contact@example.com
</p>
</div>
</div>
<div class="flex items-start">
<div
class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 mt-1 flex-shrink-0"
>
<i class="fa-solid fa-phone"></i>
</div>
<div>
<h4 class="font-medium mb-1">
电话
</h4>
<p class="text-muted">
+86 123 4567 8910
</p>
</div>
</div>
<div class="flex items-start">
<div
class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 mt-1 flex-shrink-0"
>
<i
class="fa-solid fa-map-marker-alt"
></i>
</div>
<div>
<h4 class="font-medium mb-1">
地址
</h4>
<p class="text-muted">
北京市海淀区中关村科技园区
</p>
</div>
</div>
</div>
<div class="mt-12">
<h3 class="text-xl font-bold mb-6">
办公时间
</h3>
<ul class="space-y-3">
<li class="flex justify-between">
<span class="text-muted"
>周一至周五</span
>
<span class="font-medium"
>9:00 - 18:00</span
>
</li>
<li class="flex justify-between">
<span class="text-muted">周六</span>
<span class="font-medium"
>10:00 - 16:00</span
>
</li>
<li class="flex justify-between">
<span class="text-muted">周日</span>
<span class="text-muted">休息</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-dark text-white pt-16 pb-8">
<div class="container mx-auto px-4">
<div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12"
>
<div>
<div class="flex items-center space-x-2 mb-6">
<div
class="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center"
>
<span class="text-white font-bold text-xl"
>探索</span
>
</div>
<span class="text-xl font-bold">无限</span>
</div>
<p class="text-white/70 mb-6">
分享前沿技术、创意项目与编程心得的个人博客，一起在代码与设计的世界中探索无限可能。
</p>
<div class="flex space-x-4">
<a
href="#"
class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors"
>
<i class="fa-brands fa-github"></i>
</a>
<a
href="#"
class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors"
>
<i class="fa-brands fa-twitter"></i>
</a>
<a
href="#"
class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors"
>
<i class="fa-brands fa-linkedin"></i>
</a>
<a
href="#"
class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors"
>
<i class="fa-brands fa-youtube"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-bold mb-6">快速链接</h4>
<ul class="space-y-3">
<li>
<a
href="#home"
class="text-white/70 hover:text-white transition-colors"
>首页</a
>
</li>
<li>
<a
href="#articles"
class="text-white/70 hover:text-white transition-colors"
>文章</a
>
</li>
<li>
<a
href="#projects"
class="text-white/70 hover:text-white transition-colors"
>项目</a
>
</li>
<li>
<a
href="#about"
class="text-white/70 hover:text-white transition-colors"
>关于</a
>
</li>
<li>
<a
href="#contact"
class="text-white/70 hover:text-white transition-colors"
>联系</a
>
</li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-6">分类</h4>
<ul class="space-y-3">
<li>
<a
href="#"
class="text-white/70 hover:text-white transition-colors"
>人工智能</a
>
</li>
<li>
<a
href="#"
class="text-white/70 hover:text-white transition-colors"
>Web开发</a
>
</li>
<li>
<a
href="#"
class="text-white/70 hover:text-white transition-colors"
>移动应用</a
>
</li>
<li>
<a
href="#"
class="text-white/70 hover:text-white transition-colors"
>数据分析</a
>
</li>
<li>
<a
href="#"
class="text-white/70 hover:text-white transition-colors"
>云计算</a
>
</li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-6">订阅</h4>
<p class="text-white/70 mb-4">
订阅我的博客，获取最新文章和教程的通知。
</p>
<form class="flex">
<input
type="email"
placeholder="你的邮箱"
class="flex-grow px-4 py-2 rounded-l-lg focus:outline-none text-dark"
/>
<button
type="submit"
title="订阅"
class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-r-lg transition-colors"
>
<i class="fa-solid fa-arrow-right"></i>
</button>
</form>
</div>
</div>
<div class="border-t border-white/10 pt-8">
<div
class="flex flex-col md:flex-row justify-between items-center"
>
<p class="text-white/50 text-sm mb-4 md:mb-0">
© 2025 探索无限. 保留所有权利.
</p>
<div class="flex space-x-6">
<a
href="#"
class="text-white/50 hover:text-white text-sm transition-colors"
>隐私政策</a
>
<a
href="#"
class="text-white/50 hover:text-white text-sm transition-colors"
>服务条款</a
>
<a
href="#"
class="text-white/50 hover:text-white text-sm transition-colors"
>Cookie政策</a
>
</div>
</div>
</div>
</div>
</footer>
<!-- 回到顶部按钮 -->
<button
id="back-to-top"
class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center shadow-lg opacity-0 invisible transition-all z-50"
title="回到顶部"
>
<i class="fa-solid fa-chevron-up"></i>
</button>
<script>
// 导航栏滚动效果
const navbar = document.getElementById('navbar')
const backToTop = document.getElementById('back-to-top')
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('bg-dark', 'shadow-lg')
navbar.classList.remove('bg-transparent')
backToTop.classList.remove('opacity-0', 'invisible')
backToTop.classList.add('opacity-100', 'visible')
} else {
navbar.classList.remove('bg-dark', 'shadow-lg')
navbar.classList.add('bg-transparent')
backToTop.classList.add('opacity-0', 'invisible')
backToTop.classList.remove('opacity-100', 'visible')
}
})
// 移动端菜单
const menuToggle = document.getElementById('menu-toggle')
const mobileMenu = document.getElementById('mobile-menu')
menuToggle.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden')
// 切换图标
const icon = menuToggle.querySelector('i')
if (icon.classList.contains('fa-bars')) {
icon.classList.remove('fa-bars')
icon.classList.add('fa-times')
} else {
icon.classList.remove('fa-times')
icon.classList.add('fa-bars')
}
})
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener('click', function (e) {
e.preventDefault()
// 关闭移动菜单
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden')
const icon = menuToggle.querySelector('i')
icon.classList.remove('fa-times')
icon.classList.add('fa-bars')
}
const targetId = this.getAttribute('href')
if (targetId === '#') return
const targetElement = document.querySelector(targetId)
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth',
})
}
})
})
// 回到顶部
backToTop.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
})
})
</script>
</body>
</html>
