这种简单的页面都可以直接用AI生成了，支持PC、移动H5展示，主题切换，就一个文件，完全可以作为自己个人网站使用了，根据不同的需求还可以让AI继续开发完善不同的功能，设计也不错
效果如下
PC
移动适配
<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://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
darkMode: 'class'
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
body {
font-family: 'Noto Sans SC', sans-serif;
transition: background-color 0.3s, color 0.3s;
}
.gradient-text {
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: gradient 8s ease infinite;
background-size: 400% 400%;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.card-hover {
transition: transform 0.3s, box-shadow 0.3s;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.typewriter {
overflow: hidden;
border-right: 2px solid;
white-space: nowrap;
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #3b82f6 }
}
</style>
</head>
<body class="min-h-screen text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-200">
<div id="app">
<!-- 导航栏 -->
<nav class="fixed z-50 w-full shadow-sm bg-white/80 dark:bg-gray-800/80 backdrop-blur-md">
<div class="max-w-6xl px-4 mx-auto sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<span class="text-xl font-bold gradient-text">星辰博客</span>
</div>
<div class="items-center hidden space-x-8 md:flex">
<a href="#" class="transition hover:text-blue-500">首页</a>
<a href="#" class="transition hover:text-blue-500">文章</a>
<a href="#" class="transition hover:text-blue-500">项目</a>
<a href="#" class="transition hover:text-blue-500">关于</a>
<button @click="toggleDarkMode" class="p-2 transition rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
<i :class="darkMode ? 'fas fa-sun' : 'fas fa-moon'"></i>
</button>
</div>
<div class="flex items-center md:hidden">
<button @click="mobileMenuOpen = !mobileMenuOpen" class="p-2 transition rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
<!-- 移动端菜单 -->
<div v-if="mobileMenuOpen" class="bg-white shadow-lg md:hidden dark:bg-gray-800">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">首页</a>
<a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">文章</a>
<a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">项目</a>
<a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">关于</a>
<button @click="toggleDarkMode" class="block w-full px-3 py-2 text-left rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
切换 {{ darkMode ? '亮色' : '暗色' }}模式
</button>
</div>
</div>
</nav>
<!-- 主要内容 -->
<main class="max-w-6xl px-4 pt-20 pb-12 mx-auto sm:px-6 lg:px-8">
<!-- 英雄区域 -->
<section class="py-12 md:py-20">
<div class="text-center">
<h1 class="mb-6 text-4xl font-bold md:text-6xl">
<span class="gradient-text">探索技术与创意</span>
</h1>
<p class="max-w-3xl mx-auto mb-8 text-xl text-gray-600 md:text-2xl dark:text-gray-300">
分享前端开发、设计思考和数字生活
</p>
<div class="flex justify-center space-x-4">
<button class="px-6 py-3 font-medium text-white transition bg-blue-500 rounded-full shadow-lg hover:bg-blue-600 hover:shadow-xl">
开始阅读
</button>
<button class="px-6 py-3 font-medium text-blue-500 transition border border-blue-500 rounded-full hover:bg-blue-50 dark:hover:bg-gray-800">
关于作者
</button>
</div>
</div>
</section>
<!-- 特色文章 -->
<section class="py-12">
<h2 class="flex items-center mb-8 text-2xl font-bold md:text-3xl">
<span class="w-4 h-4 mr-3 bg-blue-500 rounded-full"></span>
精选文章
</h2>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
<article v-for="post in featuredPosts" :key="post.id" class="overflow-hidden bg-white shadow-md dark:bg-gray-800 rounded-xl card-hover">
<img :src="post.image" :alt="post.title" class="object-cover w-full h-48">
<div class="p-6">
<div class="flex items-center mb-2 text-sm text-gray-500 dark:text-gray-400">
<span>{{ post.date }}</span>
<span class="mx-2">•</span>
<span>{{ post.readTime }} 分钟阅读</span>
</div>
<h3 class="mb-3 text-xl font-bold">{{ post.title }}</h3>
<p class="mb-4 text-gray-600 dark:text-gray-300">{{ post.excerpt }}</p>
<div class="flex flex-wrap gap-2">
<span v-for="tag in post.tags" :key="tag" class="px-3 py-1 text-xs bg-gray-100 rounded-full dark:bg-gray-700">
{{ tag }}
</span>
</div>
</div>
</article>
</div>
<div class="mt-10 text-center">
<a href="#" class="inline-flex items-center font-medium text-blue-500 hover:text-blue-600">
查看所有文章
<i class="ml-2 fas fa-arrow-right"></i>
</a>
</div>
</section>
<!-- 关于作者 -->
<section class="px-6 py-12 my-12 bg-gray-100 dark:bg-gray-800 rounded-2xl md:px-10">
<div class="flex flex-col items-center md:flex-row">
<div class="flex justify-center mb-6 md:w-1/3 md:mb-0">
<div class="relative">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&h=256&q=80"
alt="作者头像"
class="object-cover w-40 h-40 border-4 border-white rounded-full shadow-lg dark:border-gray-700">
<div class="absolute p-2 text-white bg-blue-500 rounded-full shadow-lg -bottom-2 -right-2">
<i class="text-lg fas fa-pen-fancy"></i>
</div>
</div>
</div>
<div class="md:w-2/3 md:pl-10">
<h2 class="mb-4 text-2xl font-bold md:text-3xl">关于我</h2>
<p class="mb-6 text-gray-600 dark:text-gray-300">
我是星辰，一名全栈开发者兼技术博主。热爱探索新技术，喜欢分享开发经验和解决问题的思路。在这个博客中，我会记录我的学习历程、项目经验和各种技术思考。
</p>
<div class="flex space-x-4">
<a href="#" class="flex items-center justify-center w-10 h-10 transition bg-gray-200 rounded-full dark:bg-gray-700 hover:bg-blue-500 hover:text-white">
<i class="fab fa-github"></i>
</a>
<a href="#" class="flex items-center justify-center w-10 h-10 transition bg-gray-200 rounded-full dark:bg-gray-700 hover:bg-blue-400 hover:text-white">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="flex items-center justify-center w-10 h-10 transition bg-gray-200 rounded-full dark:bg-gray-700 hover:bg-red-500 hover:text-white">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
</div>
</section>
<!-- 最新项目 -->
<section class="py-12">
<h2 class="flex items-center mb-8 text-2xl font-bold md:text-3xl">
<span class="w-4 h-4 mr-3 bg-purple-500 rounded-full"></span>
我的项目
</h2>
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
<div v-for="project in projects" :key="project.id" class="overflow-hidden bg-white shadow-md dark:bg-gray-800 rounded-xl card-hover">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="flex items-center justify-center w-12 h-12 mr-4 text-white rounded-lg bg-gradient-to-r from-purple-500 to-pink-500">
<i :class="project.icon"></i>
</div>
<h3 class="text-xl font-bold">{{ project.name }}</h3>
</div>
<p class="mb-4 text-gray-600 dark:text-gray-300">{{ project.description }}</p>
<div class="flex items-center justify-between">
<a :href="project.link" class="flex items-center font-medium text-blue-500 hover:text-blue-600">
查看项目
<i class="ml-2 text-sm fas fa-external-link-alt"></i>
</a>
<span class="text-sm text-gray-500 dark:text-gray-400">{{ project.status }}</span>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- 页脚 -->
<footer class="py-12 bg-gray-100 dark:bg-gray-800">
<div class="max-w-6xl px-4 mx-auto sm:px-6 lg:px-8">
<div class="flex flex-col items-center justify-between md:flex-row">
<div class="mb-6 md:mb-0">
<span class="text-xl font-bold gradient-text">星辰博客</span>
<p class="mt-2 text-gray-600 dark:text-gray-300">© 2025 版权所有</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-600 transition dark:text-gray-300 hover:text-blue-500">隐私政策</a>
<a href="#" class="text-gray-600 transition dark:text-gray-300 hover:text-blue-500">使用条款</a>
<a href="#" class="text-gray-600 transition dark:text-gray-300 hover:text-blue-500">联系我</a>
</div>
</div>
</div>
</footer>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const darkMode = ref(false);
const mobileMenuOpen = ref(false);
const toggleDarkMode = () => {
darkMode.value = !darkMode.value;
if (darkMode.value) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
};
const featuredPosts = ref([
{
id: 1,
title: 'Vue3组合式API深度解析',
excerpt: '探索Vue3组合式API的核心概念和最佳实践，提升你的开发效率。',
date: '2025-11-15',
readTime: 8,
tags: ['Vue', '前端', 'JavaScript'],
image: 'https://images.unsplash.com/photo-1633356122544-f134324a6cee?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&h=400&q=80'
},
{
id: 2,
title: 'Tailwind CSS实战技巧',
excerpt: '分享我在大型项目中使用Tailwind CSS的经验和实用技巧。',
date: '2025-10-28',
readTime: 6,
tags: ['CSS', '前端', '设计'],
image: 'https://images.unsplash.com/photo-1633356122102-3fe601e05bd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&h=400&q=80'
},
{
id: 3,
title: 'Node.js 性能优化指南',
excerpt: '如何诊断和优化Node.js 应用的性能问题，提升服务器响应速度。',
date: '2025-09-12',
readTime: 10,
tags: ['Node.js', '后端', '性能'],
image: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&h=400&q=80'
}
]);
const projects = ref([
{
id: 1,
name: 'Vue Admin Pro',
description: '基于Vue3和Element Plus的企业级后台管理系统模板，包含丰富的组件和功能。',
icon: 'fas fa-laptop-code',
link: '#',
status: '持续维护'
},
{
id: 2,
name: 'Blog Engine',
description: '轻量级Markdown博客引擎，支持SSR和静态导出，专为开发者设计。',
icon: 'fas fa-book-open',
link: '#',
status: '稳定版'
}
]);
return {
darkMode,
mobileMenuOpen,
toggleDarkMode,
featuredPosts,
projects
};
}
}).mount('#app');
</script>
</body>
</html>
