<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>儒家"五常" - 实验10</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", "SimSun", sans-serif;
}
body {
background-color: #f8f8f8;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* 顶部区域 */
.top-section {
background-color: #fff;
border-bottom: 2px solid #8B4513;
padding: 15px 0;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.logo-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 15px;
}
.logo {
width: 80px;
height: 80px;
background-color: #e0d6c9;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20px;
border: 2px solid #8B4513;
}
.logo-text {
font-size: 36px;
font-weight: bold;
color: #8B4513;
}
.title h1 {
font-size: 32px;
color: #8B4513;
margin-bottom: 10px;
}
.title h4 {
font-size: 18px;
color: #666;
font-weight: normal;
}
.title span {
margin: 0 5px;
}
/* 导航栏 */
.navbar {
background-color: #8B4513;
padding: 10px 0;
margin-top: 15px;
}
.navbar ul {
display: flex;
justify-content: center;
list-style: none;
}
.navbar li {
margin: 0 15px;
}
.navbar a {
color: #fff;
text-decoration: none;
font-size: 16px;
padding: 5px 10px;
transition: all 0.3s;
position: relative;
}
.navbar a:hover {
background-color: #A0522D;
border-radius: 4px;
}
.navbar a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: #FFD700;
transition: width 0.3s;
}
.navbar a:hover::after {
width: 100%;
}
/* 中间区域 */
.middle-section {
display: flex;
margin: 30px 0;
gap: 30px;
}
.left-panel {
flex: 1;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.left-panel h2 {
color: #8B4513;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #e0d6c9;
}
.description {
margin-bottom: 20px;
text-align: justify;
}
.wuchang-list {
list-style-type: none;
}
.wuchang-list li {
margin-bottom: 12px;
padding: 8px;
border-left: 3px solid #8B4513;
background-color: #f9f5f0;
transition: all 0.3s;
}
.wuchang-list li:hover {
background-color: #f0e6d8;
transform: translateX(5px);
}
.wuchang-list a {
color: #333;
text-decoration: none;
display: block;
font-size: 16px;
}
.wuchang-list a:hover {
color: #8B4513;
font-weight: bold;
}
.right-panel {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.circle-diagram {
width: 300px;
height: 300px;
border-radius: 50%;
background: linear-gradient(135deg, #e0d6c9, #f9f5f0);
border: 2px solid #8B4513;
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.circle-diagram::before {
content: "";
position: absolute;
width: 320px;
height: 320px;
border-radius: 50%;
border: 1px dashed #8B4513;
opacity: 0.5;
}
.wuchang-center {
font-size: 28px;
font-weight: bold;
color: #8B4513;
text-align: center;
}
.wuchang-center div {
margin: 5px 0;
}
.mountain-bg {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,70 Q20,40 40,60 T80,30 L100,70 Z" fill="%238B4513" opacity="0.1"/></svg>');
background-size: cover;
opacity: 0.3;
}
.iframe-container {
width: 100%;
height: 380px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.iframe-container iframe {
width: 100%;
height: 100%;
border: none;
}
/* 底部区域 */
.bottom-section {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
margin-top: 20px;
}
.bottom-section p {
margin-bottom: 15px;
text-align: justify;
}
.navigation-links {
display: flex;
justify-content: center;
margin-top: 20px;
}
.navigation-links a {
color: #8B4513;
text-decoration: none;
margin: 0 15px;
padding: 5px 10px;
border-bottom: 1px solid transparent;
transition: all 0.3s;
}
.navigation-links a:hover {
border-bottom: 1px solid #8B4513;
font-weight: bold;
}
.copyright {
text-align: center;
margin-top: 20px;
color: #777;
font-size: 14px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.middle-section {
flex-direction: column;
}
.navbar ul {
flex-wrap: wrap;
}
.navbar li {
margin: 5px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- 顶部区域 -->
<div class="top-section">
<div class="logo-container">
<div class="logo">
<div class="logo-text">儒</div>
</div>
<div class="title">
<h1>儒家"五常"</h1>
<h4><span>仁</span><span>义</span><span>礼</span><span>智</span><span>信</span></h4>
</div>
</div>
<div class="navbar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">孔子 - 仁义礼</a></li>
<li><a href="#">孟子 - 仁义礼智</a></li>
<li><a href="#">董仲舒 - 仁义礼智信</a></li>
</ul>
</div>
</div>
<!-- 中间区域 -->
<div class="middle-section">
<div class="left-panel">
<h2>儒家五常的内涵</h2>
<div class="description">
<p>"仁义礼智信"为儒家"五常"，这五种品德贯穿于中华伦理的发展中，成为中国价值体系中的最核心因素。</p>
<p>孔子提出"仁、义、礼"，孟子延伸为"仁、义、礼、智"，董仲舒扩充为"仁、义、礼、智、信"，后称"五常"。</p>
</div>
<h2>五常详解</h2>
<ul class="wuchang-list">
<li><a href="#" onclick="loadImage('image-10-1-1.jpg')">仁：仁爱之心，推己及人</a></li>
<li><a href="#" onclick="loadImage('image-10-1-2.jpg')">义：正义之道，行事得当</a></li>
<li><a href="#" onclick="loadImage('image-10-1-3.jpg')">礼：礼仪之规，恭敬谦让</a></li>
<li><a href="#" onclick="loadImage('image-10-1-4.jpg')">智：智慧之明，明辨是非</a></li>
<li><a href="#" onclick="loadImage('image-10-1-5.jpg')">信：诚信之本，言行一致</a></li>
</ul>
</div>
<div class="right-panel">
<div class="circle-diagram">
<div class="mountain-bg"></div>
<div class="wuchang-center">
<div>仁</div>
<div>义</div>
<div>礼</div>
<div>智</div>
<div>信</div>
</div>
</div>
<div class="iframe-container">
<iframe id="contentFrame" src="about:blank"></iframe>
</div>
</div>
</div>
<!-- 底部区域 -->
<div class="bottom-section">
<p id="dynamicContent">仁义礼智信为儒家"五常"，孔子提出"仁、义、礼"，孟子延伸为"仁、义、礼、智"，董仲舒扩充为"仁、义、礼、智、信"，后称"五常"。这"五常"贯穿于中华伦理的发展中，成为中国价值体系中的核心因素。</p>
<div class="navigation-links">
<a href="#">首页</a>
<a href="#">孔子仁义礼</a>
<a href="#">孟子仁义礼</a>
<a href="#">董仲舒仁义礼智信</a>
<a href="#">五常内涵</a>
</div>
<div class="copyright">
© 2023 儒家文化研究 | 实验10：DIV+CSS页面布局
</div>
</div>
</div>
<script>
// 加载图片到iframe
function loadImage(imgSrc) {
const iframe = document.getElementById('contentFrame');
iframe.src = imgSrc;
// 更新底部区域内容
const dynamicContent = document.getElementById('dynamicContent');
const descriptions = {
'image-10-1-1.jpg': '仁：仁爱之心，推己及人。仁者爱人，是中华民族传统美德的核心，强调人与人之间的关爱与和谐。',
'image-10-1-2.jpg': '义：正义之道，行事得当。义者宜也，指思想和行为符合一定的标准，是处理人际关系的重要准则。',
'image-10-1-3.jpg': '礼：礼仪之规，恭敬谦让。礼者敬也，是社会行为的规范，体现对他人的尊重和社会秩序。',
'image-10-1-4.jpg': '智：智慧之明，明辨是非。智者知也，指正确认识事物、明辨是非的能力，是实践仁义礼信的基础。',
'image-10-1-5.jpg': '信：诚信之本，言行一致。信者诚也，是立身之本，强调言出必行、诚实不欺的道德品质。'
};
if (descriptions[imgSrc]) {
dynamicContent.textContent = descriptions[imgSrc];
}
}
// 导航悬停效果
const navLinks = document.querySelectorAll('.navbar a');
navLinks.forEach(link => {
link.addEventListener('mouseover', function() {
const dynamicContent = document.getElementById('dynamicContent');
const linkText = this.textContent.trim();
const hoverDescriptions = {
'首页': '欢迎访问儒家"五常"专题页面，这里展示了儒家核心思想的精髓。',
'孔子 - 仁义礼': '孔子（公元前551-479年），儒家学派创始人，提出"仁、义、礼"为核心的思想体系。',
'孟子 - 仁义礼智': '孟子（公元前372-289年），儒家代表人物，将儒家思想发展为"仁、义、礼、智"四德。',
'董仲舒 - 仁义礼智信': '董仲舒（公元前179-104年），汉代思想家，最终确立"仁、义、礼、智、信"为儒家五常。'
};
if (hoverDescriptions[linkText]) {
dynamicContent.textContent = hoverDescriptions[linkText];
}
});
link.addEventListener('mouseout', function() {
const dynamicContent = document.getElementById('dynamicContent');
dynamicContent.textContent = '仁义礼智信为儒家"五常"，孔子提出"仁、义、礼"，孟子延伸为"仁、义、礼、智"，董仲舒扩充为"仁、义、礼、智、信"，后称"五常"。这"五常"贯穿于中华伦理的发展中，成为中国价值体系中的核心因素。';
});
});
// 初始化页面
window.onload = function() {
// 默认加载第一张图片
loadImage('image-10-1-1.jpg');
};
</script>
</body>
</html>
