夜雨聆风
效果展示
完整源码
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>陈武帝故宫 - 南朝陈朝开国帝王故都</title><!-- 引入Tailwind CSS --><scriptsrc="https://cdn.tailwindcss.com"></script><!-- 引入Font Awesome --><linkhref="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: '#2C3E50', // 帝王青（历史厚重感）secondary: '#8B4513', // 宫墙棕（古建筑色调）accent: '#DAA520', // 鎏金黄（皇家点缀色）dark: '#1A2530',light: '#F9F9F9'},fontFamily: {sans: ['Inter', 'system-ui', 'sans-serif'],serif: ['"Noto Serif SC"', 'serif']},},}}</script><!-- 自定义工具类 --><styletype="text/tailwindcss">@layer utilities {.content-auto {content-visibility: auto;}.text-shadow {text-shadow: 0 2px 4px rgba(0,0,0,0.3);}.transition-custom {transition: all 0.3s ease;}.text-justify {text-align: justify;}}</style><style>/* 全局样式 */html {scroll-behavior: smooth;}body {font-family: 'Inter', 'Noto Serif SC', system-ui, sans-serif;line-height: 1.7;}/* 导航栏滚动效果 */.navbar-scrolled {background-color: rgba(255, 255, 255, 0.98);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}</style></head><bodyclass="bg-light text-dark"><!-- 导航栏 --><navid="navbar"class="fixed w-full z-50 transition-all duration-300 bg-transparent"><divclass="container mx-auto px-4 py-3 flex justify-between items-center"><ahref="#"class="flex items-center space-x-2"><iclass="fa fa-university text-accent text-2xl"></i><spanclass="text-xl font-bold text-white text-shadow">陈武帝故宫</span></a><!-- 桌面导航 --><divclass="hidden md:flex space-x-8"><ahref="#about"class="text-white hover:text-accent transition-custom text-shadow">历史溯源</a><ahref="#culture"class="text-white hover:text-accent transition-custom text-shadow">人文底蕴</a><ahref="#features"class="text-white hover:text-accent transition-custom text-shadow">核心价值</a></div><!-- 移动端菜单按钮 --><buttonid="menuBtn"class="md:hidden text-white text-2xl"><iclass="fa fa-bars"></i></button></div><!-- 移动端导航菜单 --><divid="mobileMenu"class="md:hidden hidden bg-white shadow-lg absolute w-full"><divclass="container mx-auto px-4 py-3 flex flex-col space-y-4"><ahref="#about"class="text-dark hover:text-accent transition-custom py-2 border-b border-gray-200">历史溯源</a><ahref="#culture"class="text-dark hover:text-accent transition-custom py-2 border-b border-gray-200">人文底蕴</a><ahref="#features"class="text-dark hover:text-accent transition-custom py-2 border-b border-gray-200">核心价值</a></div></div></nav><!-- 英雄区（极简配图） --><headerclass="relative h-screen flex items-center justify-center overflow-hidden"><divclass="absolute inset-0 z-0"><imgsrc="https://picsum.photos/id/1048/1920/1080"alt="陈武帝故宫全景"class="w-full h-full object-cover opacity-70"><divclass="absolute inset-0 bg-gradient-to-b from-primary/60 to-dark/80"></div></div><divclass="container mx-auto px-4 z-10 text-center"><h1class="text-[clamp(2.8rem,6vw,4.8rem)] font-bold text-white mb-6 leading-tight text-shadow font-serif">陈武帝故宫</h1><pclass="text-[clamp(1rem,2vw,1.2rem)] text-white max-w-2xl mx-auto mb-8 text-shadow">南朝陈朝开国皇帝陈霸先的故居与陵寝所在地，江南唯一帝王故宫，承载千年南朝历史文脉</p><ahref="#about"class="inline-block bg-accent hover:bg-accent/90 text-white font-semibold py-3 px-8 rounded-full transition-custom shadow-lg hover:shadow-xl transform hover:-translate-y-1">探寻南朝帝王史 <iclass="fa fa-arrow-down ml-2"></i></a></div><divclass="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-white animate-bounce"><iclass="fa fa-angle-double-down text-3xl"></i></div></header><!-- 历史溯源（核心文字区，极简配图） --><sectionid="about"class="py-24 bg-white"><divclass="container mx-auto px-4 max-w-4xl"><divclass="text-center mb-16"><h2class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-primary mb-4 font-serif">历史溯源</h2><divclass="w-16 h-1 bg-accent mx-auto mb-6"></div></div><divclass="flex flex-col md:flex-row gap-10 items-center"><divclass="md:w-1/3"><imgsrc="https://picsum.photos/id/1058/600/800"alt="陈武帝故宫遗迹"class="w-full rounded-xl shadow-lg"></div><divclass="md:w-2/3 text-justify"><h3class="text-xl font-semibold text-secondary mb-4">陈霸先与陈朝基业</h3><pclass="text-gray-700 mb-6">陈武帝故宫位于浙江省湖州市长兴县下箬寺乡，是南朝陈朝开国皇帝陈霸先（503-559年）的出生地、故居及陵寝所在地，也是江南地区现存唯一的帝王故宫遗址。陈霸先出身寒微，却在南北朝乱世中起兵平叛，先后平定侯景之乱、抵御北齐入侵，于557年建立陈朝，定都建康（今南京），是南朝历史上唯一以姓氏为国号的王朝。</p><pclass="text-gray-700 mb-6">陈武帝故宫始建于陈朝永定二年（558年），初名“下箬寺”，原为陈霸先故居，后敕建为皇家寺院，兼具宗庙与陵寝功能。历经隋、唐、宋、元、明、清多次修葺与重建，虽屡经战火，核心遗址仍得以保存，21世纪初经考古发掘与修复，恢复了核心建筑格局。</p><pclass="text-gray-700">故宫现存核心遗址包括陈武帝故居遗址、万安陵（陈霸先与皇后章氏合葬陵）、天居寺碑、御井等历史遗存，是研究南朝历史、江南帝王文化的重要实物载体。</p></div></div></div></section><!-- 人文底蕴（纯文字为主） --><sectionid="culture"class="py-24 bg-gray-50"><divclass="container mx-auto px-4 max-w-4xl"><divclass="text-center mb-16"><h2class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-primary mb-4 font-serif">人文底蕴</h2><divclass="w-16 h-1 bg-accent mx-auto mb-6"></div></div><divclass="space-y-12"><divclass="text-justify"><h3class="text-xl font-semibold text-secondary mb-4">1. 南朝文化的活态遗存</h3><pclass="text-gray-700">陈朝虽仅存33年（557-589年），却是南朝历史的重要收尾阶段，陈武帝故宫留存的建筑规制、碑刻文献、民俗传说，完整传承了南朝时期的江南文化特质。其中，“御井”（陈霸先幼年取水之井）至今仍存，井水清冽，当地民间仍保留“饮御井水，忆陈武帝”的传统；天居寺碑刻记载了陈朝皇室与江南士族的交往，是研究南朝门阀制度的重要史料。</p></div><divclass="text-justify"><h3class="text-xl font-semibold text-secondary mb-4">2. 帝王文化与江南民俗融合</h3><pclass="text-gray-700">不同于北方帝王陵寝的恢弘规制，陈武帝故宫体现了江南特有的“内敛式”帝王文化——建筑依山傍水，布局精巧，兼具皇家威仪与江南水乡的温婉气质。长兴当地至今保留着“陈武帝祭典”民俗活动，每年农历三月初三（陈霸先诞辰），民众会前往故宫祭拜，融合了帝王祭祀与江南民间祈福的双重内涵，成为非物质文化遗产的重要组成。</p></div><divclass="text-justify"><h3class="text-xl font-semibold text-secondary mb-4">3. 历史文献中的陈武帝形象</h3><pclass="text-gray-700">《陈书》《南史》等正史记载了陈霸先“勤俭朴素、知人善任”的帝王品格，其在位期间轻徭薄赋、发展农桑，为江南地区的经济恢复奠定基础。陈武帝故宫内的文献馆收藏了历代关于陈霸先的史料记载、文人题咏，其中包括唐代魏征、宋代司马光等史家的评述，以及历代文人墨客凭吊陈武帝的诗词作品，形成了完整的“陈武帝文化叙事体系”。</p></div></div></div></section><!-- 核心价值（对比差异化，纯文字） --><sectionid="features"class="py-24 bg-white"><divclass="container mx-auto px-4 max-w-4xl"><divclass="text-center mb-16"><h2class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-primary mb-4 font-serif">核心价值</h2><divclass="w-16 h-1 bg-accent mx-auto mb-6"></div><pclass="text-gray-600 max-w-2xl mx-auto">区别于自然/生态/茶旅类景区，彰显帝王文化与历史研究的独特价值</p></div><divclass="grid grid-cols-1 md:grid-cols-2 gap-8"><divclass="bg-gray-50 p-8 rounded-xl shadow-sm border border-gray-100"><divclass="flex items-center mb-4"><iclass="fa fa-history text-accent text-2xl mr-4"></i><h3class="text-xl font-semibold text-secondary">唯一性历史地位</h3></div><pclass="text-gray-700 text-justify">作为江南地区唯一的帝王故宫，陈武帝故宫填补了长三角地区南朝帝王文化遗址的空白，区别于仙山湖的山水佛韵、顾渚山的茶文化、扬子鳄村的生态保护，其核心价值在于承载南朝正史脉络，是研究江南帝王文化的不可替代的实物载体。</p></div><divclass="bg-gray-50 p-8 rounded-xl shadow-sm border border-gray-100"><divclass="flex items-center mb-4"><iclass="fa fa-book text-accent text-2xl mr-4"></i><h3class="text-xl font-semibold text-secondary">学术研究价值</h3></div><pclass="text-gray-700 text-justify">故宫遗址的考古发掘成果，为研究南朝建筑形制、丧葬制度、民间信仰提供了关键实物证据，其价值远超普通旅游景区的观光属性，是高校、科研机构开展南北朝史研究的重要基地。</p></div><divclass="bg-gray-50 p-8 rounded-xl shadow-sm border border-gray-100"><divclass="flex items-center mb-4"><iclass="fa fa-users text-accent text-2xl mr-4"></i><h3class="text-xl font-semibold text-secondary">文化传承价值</h3></div><pclass="text-gray-700 text-justify">依托陈武帝故宫开展的南朝文化普及、民俗传承活动，让小众的南朝历史走进大众视野，区别于水口茶文化旅游区的休闲属性，更侧重历史文脉的传承与弘扬，是长兴历史文化名片的核心组成。</p></div><divclass="bg-gray-50 p-8 rounded-xl shadow-sm border border-gray-100"><divclass="flex items-center mb-4"><iclass="fa fa-map-marker text-accent text-2xl mr-4"></i><h3class="text-xl font-semibold text-secondary">地域文化标识</h3></div><pclass="text-gray-700 text-justify">陈武帝故宫成为长兴区别于周边县市的核心历史文化标识——湖州以太湖文化、茶文化著称，而长兴凭借陈武帝故宫，形成了“南朝帝王文化”的独特标签，丰富了长三角历史文化旅游的维度。</p></div></div></div></section><!-- 页脚（极简设计） --><footerclass="bg-dark text-white py-12"><divclass="container mx-auto px-4 text-center"><divclass="flex items-center justify-center space-x-2 mb-6"><iclass="fa fa-university text-accent text-2xl"></i><spanclass="text-xl font-bold font-serif">陈武帝故宫</span></div><pclass="text-gray-300 text-sm">地址：浙江省湖州市长兴县下箬寺乡 | 南朝陈朝开国帝王文化核心遗址</p></div></footer><!-- 返回顶部按钮 --><buttonid="backToTop"class="fixed bottom-8 right-8 bg-primary hover:bg-primary/90 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transition-custom opacity-0 invisible"><iclass="fa fa-arrow-up"></i></button><!-- JavaScript --><script>// 导航栏滚动效果const navbar = document.getElementById('navbar');const backToTop = document.getElementById('backToTop');window.addEventListener('scroll', function() {if (window.scrollY > 100) {navbar.classList.add('navbar-scrolled');navbar.querySelector('span').classList.remove('text-white');navbar.querySelector('span').classList.add('text-primary');backToTop.classList.remove('opacity-0', 'invisible');backToTop.classList.add('opacity-100', 'visible');} else {navbar.classList.remove('navbar-scrolled');navbar.querySelector('span').classList.add('text-white');navbar.querySelector('span').classList.remove('text-primary');backToTop.classList.add('opacity-0', 'invisible');backToTop.classList.remove('opacity-100', 'visible');}});// 移动端菜单切换const menuBtn = document.getElementById('menuBtn');const mobileMenu = document.getElementById('mobileMenu');menuBtn.addEventListener('click', function() {mobileMenu.classList.toggle('hidden');if (mobileMenu.classList.contains('hidden')) {menuBtn.innerHTML = '<i class="fa fa-bars"></i>';} else {menuBtn.innerHTML = '<i class="fa fa-times"></i>';}});// 点击移动端菜单项关闭菜单const mobileMenuItems = mobileMenu.querySelectorAll('a');mobileMenuItems.forEach(item => {item.addEventListener('click', function() {mobileMenu.classList.add('hidden');menuBtn.innerHTML = '<i class="fa fa-bars"></i>';});});// 返回顶部功能backToTop.addEventListener('click', function() {window.scrollTo({top: 0,behavior: 'smooth'});});// 平滑滚动document.querySelectorAll('a[href^="#"]').forEach(anchor => {anchor.addEventListener('click', function (e) {e.preventDefault();const targetId = this.getAttribute('href');if (targetId === '#') return;const targetElement = document.querySelector(targetId);if (targetElement) {targetElement.scrollIntoView({behavior: 'smooth'});}});});</script></body></html>
