下面我将为你设计一个包含10个页面的家乡介绍网站，每个页面都有独立的HTML、CSS和JavaScript代码，并遵循现代、美观、响应式的设计原则。
（图片来源网络，侵删）
项目概述
我们将创建一个名为“我的家乡——[你的城市名]”的网站,由以下10个页面组成：
- 首页: 网站的门户,展示家乡的精华图片和快速导航。
- 家乡概览: 简要介绍家乡的地理位置、历史沿革和城市精神。
- 风景名胜: 展示家乡最著名的旅游景点,配有图片和介绍。
- 特色美食: 介绍家乡独有的美食和小吃,让人垂涎欲滴。
- 文化民俗: 探讨家乡的方言、传统节日、手工艺等文化瑰宝。
- 名人轶事: 介绍从家乡走出的历史名人或当代杰出人物。
- 经济发展: 展示家乡的产业特色、经济成就和未来规划。
- 现代风貌: 展示家乡的现代建筑、城市风光和市民生活。
- 旅行指南: 提供实用的旅游信息，如交通、住宿、最佳旅游时间等。
- 关于我们/留言板: 网站的结尾，表达对家乡的情感,并设置一个简单的留言互动功能。
通用设计风格
- 布局: 采用简洁的卡片式布局,信息清晰。
- 配色: 主色调选用代表家乡的颜色（如果家乡有“水城”之称，可以用蓝色系；如果是“山城”，可以用绿色系），辅助色为白色和灰色,确保文字清晰易读。
- 字体: 使用优雅的无衬线字体，如 "Noto Sans SC" (Google Fonts),支持中文显示。
- 响应式: 使用Flexbox和Grid布局，确保网站在手机、平板和电脑上都有良好的显示效果。
- 图标: 使用Font Awesome图标库,让界面更生动。
第1页：首页
这是网站的门面，需要大气、有吸引力。
文件名: index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的家乡 - 欢迎来到[你的城市名]</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--primary-color: #2c3e50; /* 深蓝色，代表稳重 */
--secondary-color: #e74c3c; /* 红色，代表热情 */
--light-color: #ecf0f1;
--dark-color: #34495e;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Noto Sans SC', sans-serif;
}
body {
background-color: #f4f4f4;
color: var(--dark-color);
}
.hero {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80') no-repeat center center/cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: white;
}
.hero h1 {
font-size: 4rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}
.hero p {
font-size: 1.5rem;
margin-bottom: 2rem;
text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}
.cta-button {
display: inline-block;
padding: 15px 30px;
background-color: var(--secondary-color);
color: white;
text-decoration: none;
border-radius: 50px;
font-weight: bold;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.cta-button:hover {
transform: translateY(-5px);
background-color: #c0392b;
}
.nav-links {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 50px;
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: var(--primary-color);
}
.nav-links ul {
list-style: none;
display: flex;
}
.nav-links ul li {
margin-left: 20px;
}
.nav-links ul li a {
text-decoration: none;
color: var(--dark-color);
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links ul li a:hover {
color: var(--secondary-color);
}
.features {
padding: 80px 20px;
max-width: 1200px;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.feature-card {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
text-align: center;
transition: transform 0.3s ease;
}
.feature-card:hover {
transform: translateY(-10px);
}
.feature-card i {
font-size: 3rem;
color: var(--secondary-color);
margin-bottom: 20px;
}
.feature-card h3 {
margin-bottom: 15px;
color: var(--primary-color);
}
</style>
</head>
<body>
<nav class="nav-links">
<div class="logo">我的家乡</div>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="overview.html">概览</a></li>
<li><a href="scenery.html">风景</a></li>
<li><a href="food.html">美食</a></li>
<li><a href="culture.html">文化</a></li>
<li><a href="celebrities.html">名人</a></li>
<li><a href="economy.html">经济</a></li>
<li><a href="modern.html">风貌</a></li>
<li><a href="travel.html">旅行</a></li>
<li><a href="about.html">lt;/a></li>
</ul>
</nav>
<section class="hero">
<h1>[你的城市名]</h1>
<p>一座有故事，有温度的城市</p>
<a href="overview.html" class="cta-button">探索我的家乡</a>
</section>
<section class="features">
<div class="feature-card">
<i class="fas fa-mountain"></i>
<h3>风景名胜</h3>
<p>山清水秀，风光旖旎，每一处风景都值得你驻足。</p>
</div>
<div class="feature-card">
<i class="fas fa-utensils"></i>
<h3>特色美食</h3>
<p>舌尖上的家乡，每一口都是熟悉的味道和记忆。</p>
</div>
<div class="feature-card">
<i class="fas fa-landmark"></i>
<h3>文化民俗</h3>
<p>传承千年的文化底蕴，独特的民俗风情等你来体验。</p>
</div>
</section>
</body>
</html>
第2页：家乡概览
提供关于家乡的基本信息。
（图片来源网络，侵删）
文件名: overview.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">家乡概览 - [你的城市名]</title>
<!-- 引入首页的CSS，保持风格统一 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
/* 复用首页的CSS变量和基础样式 */
:root {
--primary-color: #2c3e50;
--secondary-color: #e74c3c;
--light-color: #ecf0f1;
--dark-color: #34495e;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Noto Sans SC', sans-serif;
}
body {
background-color: #f4f4f4;
color: var(--dark-color);
}
/* 复用首页的导航栏样式 */
.nav-links {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 50px;
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: var(--primary-color);
}
.nav-links ul {
list-style: none;
display: flex;
}
.nav-links ul li {
margin-left: 20px;
}
.nav-links ul li a {
text-decoration: none;
color: var(--dark-color);
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links ul li a:hover {
color: var(--secondary-color);
}
/* 页面内容样式 */
.page-container {
max-width: 1200px;
margin: 100px auto 50px;
padding: 0 20px;
}
.page-header {
text-align: center;
margin-bottom: 50px;
}
.page-header h1 {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 10px;
}
.page-header p {
font-size: 1.1rem;
color: #7f8c8d;
}
.content-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
.content-card {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.content-card h2 {
color: var(--primary-color);
margin-bottom: 20px;
font-size: 1.8rem;
display: flex;
align-items: center;
}
.content-card h2 i {
margin-right: 15px;
color: var(--secondary-color);
}
.content-card p {
line-height: 1.8;
margin-bottom: 15px;
}
.content-card ul {
list-style-position: inside;
line-height: 1.8;
}
</style>
</head>
<body>
<nav class="nav-links">
<div class="logo">我的家乡</div>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="overview.html">概览</a></li>
<li><a href="scenery.html">风景</a></li>
<li><a href="food.html">美食</a></li>
<li><a href="culture.html">文化</a></li>
<li><a href="celebrities.html">名人</a></li>
<li><a href="economy.html">经济</a></li>
<li><a href="modern.html">风貌</a></li>
<li><a href="travel.html">旅行</a></li>
<li><a href="about.html">lt;/a></li>
</ul>
</nav>
<div class="page-container">
<div class="page-header">
<h1>家乡概览</h1>
<p>了解[你的城市名]的前世今生</p>
</div>
<div class="content-grid">
<div class="content-card">
<h2><i class="fas fa-map-marker-alt"></i>地理位置</h2>
<p>[你的城市名]位于[省份/地区]，地处[具体地理特征，如：长江中下游平原、沿海地区等]，东邻[城市A]，西接[城市B]，南连[城市C]，北靠[城市D]。</p>
<p>全市总面积约[数字]平方公里，地形以[地形特征，如：丘陵、平原]为主，气候属于[气候类型，如：亚热带季风气候]，四季分明，雨热同期。</p>
</div>
<div class="content-card">
<h2><i class="fas fa-history"></i>历史沿革</h2>
<p>[你的城市名]是一座历史悠久的文化名城，建制于[朝代]，距今已有[数字]年的历史。</p>
<ul>
<li>[古代时期]：曾是[某个朝代]的重要[军事/商业]重镇。</li>
<li>[近代时期]：见证了[某个历史事件]的发生。</li>
<li>[现代时期]：于[年份]设立为[地级市/直辖市]，开启了发展的新篇章。</li>
</ul>
</div>
<div class="content-card">
<h2><i class="fas fa-users"></i>人口与民族</h2>
<p>根据第七次全国人口普查数据，[你的城市名]常住人口约[数字]万人，人口密度为[数字]人/平方公里。</p>
<p>全市以汉族为主，同时有[数字]个少数民族在此聚居，如[列举1-2个少数民族]，各民族和睦相处，文化交融。</p>
</div>
<div class="content-card">
<h2><i class="fas fa-city"></i>城市精神</h2>
<p>[你的城市名]的城市精神是：“**[开放、包容、创新、务实]**”。</p>
<p>这种精神源于城市深厚的文化底蕴和一代又一代[你的城市名]人的奋斗，它激励着全市人民在新时代里，不忘初心，砥砺前行，共同建设更加美好的家园。</p>
</div>
</div>
</div>
</body>
</html>
第3页：风景名胜
展示家乡的旅游景点。
文件名: scenery.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">风景名胜 - [你的城市名]</title>
<!-- 引入首页的CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
/* 复用首页的CSS变量和基础样式 */
:root {
--primary-color: #2c3e50;
--secondary-color: #e74c3c;
--light-color: #ecf0f1;
--dark-color: #34495e;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Noto Sans SC', sans-serif;
}
body {
background-color: #f4f4f4;
color: var(--dark-color);
}
/* 复用首页的导航栏样式 */
.nav-links {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 50px;
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: var(--primary-color);
}
.nav-links ul {
list-style: none;
display: flex;
}
.nav-links ul li {
margin-left: 20px;
}
.nav-links ul li a {
text-decoration: none;
color: var(--dark-color);
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links ul li a:hover {
color: var(--secondary-color);
}
/* 页面内容样式 */
.page-container {
max-width: 1200px;
margin: 100px auto 50px;
padding: 0 20px;
}
.page-header {
text-align: center;
margin-bottom: 50px;
}
.page-header h1 {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 10px;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.gallery-item {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.gallery-item:hover {
transform: translateY(-10px);
}
.gallery-item img {
width: 100%;
height: 250px;
object-fit: cover;
}
.gallery-item-content {
padding: 25px;
}
.gallery-item-content h3 {
font-size: 1.5rem;
color: var(--primary-color);
margin-bottom: 15px;
}
.gallery-item-content p {
line-height: 1.6;
color: #555;
}
.tags {
margin-top: 15px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
background-color: var(--light-color);
color: var(--dark-color);
padding: 5px 12px;
border-radius: 20px;
font-size: 0.85rem;
}
</style>
</head>
<body>
<nav class="nav-links">
<div class="logo">我的家乡</div>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="overview.html">概览</a></li>
<li><a href="scenery.html">风景</a></li>
<li><a href="food.html">美食</a></li>
<li><a href="culture.html">文化</a></li>
<li><a href="celebrities.html">名人</a></li>
<li><a href="economy.html">经济</a></li>
<li><a href="modern.html">风貌</a></li>
<li><a href="travel.html">旅行</a></li>
<li><a href="about.html">lt;/a></li>
</ul>
</nav>
<div class="page-container">
<div class="page-header">
<h1>风景名胜</h1>
<p>探索[你的城市名]的自然与人文瑰宝</p>
</div>
<div class="gallery">
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="景点1">
<div class="gallery-item-content">
<h3>景点一：[山名/湖名]</h3>
<p>[这里是关于这个景点的详细介绍，描述它的历史、特色、为什么值得去，可以包括一些有趣的传说或者故事，这里不仅是著名的佛教圣地，也是登高望远、俯瞰全城风光的绝佳之地，]</p>
<div class="tags">
<span class="tag"><i class="fas fa-tree"></i> 自然风光</span>
<span class="tag"><i class="fas fa-landmark"></i> 人文古迹</span>
</div>
</div>
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1544735716-392fe2489ffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="景点2">
<div class="gallery-item-content">
<h3>景点二：[古镇/古街名]</h3>
<p>[这里是关于这个景点的详细介绍，描述它的历史、特色、为什么值得去，青石板路，白墙黛瓦，两旁是林立的商铺和飘香的美食，是体验[你的城市名]慢生活的好去处，]</p>
<div class="tags">
<span class="tag"><i class="fas fa-walking"></i> 历史街区</span>
<span class="tag"><i class="fas fa-utensils"></i> 美食天堂</span>
</div>
</div>
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="景点3">
<div class="gallery-item-content">
<h3>景点三：[公园/博物馆名]</h3>
<p>[这里是关于这个景点的详细介绍，描述它的历史、特色、为什么值得去，这里不仅是市民休闲健身的乐园，也是了解[你的城市名]近代历史的重要窗口，]</p>
<div class="tags">
<span class="tag"><i class="fas fa-tree"></i> 城市绿肺</span>
<span class="tag"><i class="fas fa-book"></i> 红色教育</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
第4页：特色美食
介绍家乡的美食。
文件名: food.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">特色美食 - [你的城市名]</title>
<!-- 引入首页的CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
/* 复用首页的CSS变量和基础样式 */
:root {
--primary-color: #2c3e50;
--secondary-color: #e74c3c;
--light-color: #ecf0f1;
--dark-color: #34495e;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Noto Sans SC', sans-serif;
}
body {
background-color: #f4f4f4;
color: var(--dark-color);
}
/* 复用首页的导航栏样式 */
.nav-links {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 50px;
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: var(--primary-color);
}
.nav-links ul {
list-style: none;
display: flex;
}
.nav-links ul li {
margin-left: 20px;
}
.nav-links ul li a {
text-decoration: none;
color: var(--dark-color);
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links ul li a:hover {
color: var(--secondary-color);
}
/* 页面内容样式 */
.page-container {
max-width: 1200px;
margin: 100px auto 50px;
padding: 0 20px;
}
.page-header {
text-align: center;
margin-bottom: 50px;
}
.page-header h1 {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 10px;
}
.food-menu {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.food-item {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
}
.food-item:hover {
transform: translateY(-10px);
}
.food-item img {
width: 100%;
height: 200px;
object-fit: cover;
}
.food-item-content {
padding: 25px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.food-item-content h3 {
font-size: 1.5rem;
color: var(--primary-color);
margin-bottom: 10px;
}
.food-item-content p {
line-height: 1.6;
color: #555;
flex-grow: 1;
}
.price {
font-size: 1.2rem;
font-weight: bold;
color: var(--secondary-color);
margin-top: 15px;
}
</style>
</head>
<body>
<nav class="nav-links">
<div class="logo">我的家乡</div>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="overview.html">概览</a></li>
<li><a href="scenery.html">风景</a></li>
<li><a href="food.html">美食</a></li>
<li><a href="culture.html">文化</a></li>
<li><a href="celebrities.html">名人</a></li>
<li><a href="economy.html">经济</a></li>
<li><a href="modern.html">风貌</a></li>
<li><a href="travel.html">旅行</a></li>
<li><a href="about.html">lt;/a></li>
</ul>
</nav>
<div class="page-container">
<div class="page-header">
<h1>特色美食</h1>
<p>品味[你的城市名]的独特风味</p>
</div>
<div class="food-menu">
<div class="food-item">
<img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="美食1">
<div class="food-item-content">
<h3>招牌菜：[特色菜名]</h3>
<p>[这里是关于这道菜的详细介绍，描述它的起源、独特的制作工艺、口感和风味，选用本地特产的[某种食材]，经过[某种独特烹饪手法]精心烹制，口感[外酥里嫩/鲜美无比]，是[你的城市名]宴席上必不可少的佳肴，]</p>
<div class="price">人均：¥50-80</div>
</div>
</div>
<div class="food-item">
<img src="https://images.unsplash.com/photo-1555939594-58d7cb561ad1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="美食2">
<div class="food-item-content">
<h3>街头小吃：[小吃名]</h3>
<p>[这里是关于这种小吃的详细介绍，描述它在[你的城市名]人心中的地位、常见场景和味道，清晨的[某个市场/某条街巷]，总能闻到它诱人的香气，外皮[酥脆/柔软]，内馅[香甜/咸鲜]，是几代[你的城市名]人的共同记忆，]</p>
<div class="price">¥5-15/份</div>
</div>
</div>
<div class="food-item">
<img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="美食3">
<div class="food-item-content">
<h3>传统点心：[点心名]</h3>
<p>[这里是关于这种点心的详细介绍，描述它的历史、制作特色和食用方法，起源于[某个朝代/某个事件]，是节庆期间招待贵客的点心，其特点是[形态精致/口味清甜]，配上一壶[本地名茶]，是绝佳的下午茶搭配，]</p>
<div class="price">¥20-40/盒</div>
</div>
</div>
</div>
</div>
</body>
</html>
第5页：文化民俗
探讨家乡的文化。
文件名: culture.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">文化民俗 - [你的城市名]</title>
<!-- 引入首页的CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
/* 复用首页的CSS变量和基础样式 */
:root {
--primary-color: #2c3e50;
--secondary-color: #e74c3c;
--light-color: #ecf0f1;
--dark-color: #34495e;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Noto 
