HTML+CSS陈武帝故宫网页!!附源码!!

<!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>