AI摘要
展示社会主义核心价值观，采用红色主题，响应式设计，三层次展示，交互动效，适用于教育、企业、个人场景。
社会主义核心价值观展示页面 🏛️
🇨🇳 弘扬核心价值观，共建美好新时代
🎨 效果预览
📸 实际展示效果
✨ 设计亮点
- 🇨🇳 红色主题：采用中国红配色方案，庄重典雅
- 📱 响应式设计：完美适配手机、平板、电脑
- 🎯 三层次展示：国家、社会、个人层面清晰分区
- ⚡ 交互动效：悬停动画增强用户体验
🎯 功能特色
| 功能模块 | 技术实现 | 视觉效果 |
|---|---|---|
| 主题配色 | CSS3渐变+红色系 | 庄重典雅 🇨🇳 |
| 布局设计 | Flex弹性布局 | 自适应排列 📱 |
| 卡片效果 | Box-shadow阴影 | 立体层次感 🎴 |
| 交互反馈 | CSS3过渡动画 | 悬停放大效果 ✨ |
| 字体优化 | Noto Sans SC | 清晰易读 📖 |
🌟 使用场景
🏫 教育场景
- 学校官网：思政教育页面
- 培训机构：企业文化展示
- 党政机关：宣传栏展示
🏢 企业场景
- 公司官网：企业文化页面
- 内部系统：登录页展示
- 年会活动：背景展示墙
💻 个人场景
- 个人博客：爱国主题页面
- 学习笔记：思政学习记录
- 项目展示：前端作品展示
🏗️ HTML结构
完整HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>社会主义核心价值观</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700&display=swap" rel="stylesheet">
<style>
/* 全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans SC', Arial, sans-serif;
background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
/* 容器样式 */
.container {
max-width: 900px;
width: 100%;
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(211, 47, 47, 0.2);
border: 3px solid #d32f2f;
overflow: hidden;
}
/* 标题样式 */
.header {
background: linear-gradient(135deg, #d32f2f, #b71c1c);
color: white;
text-align: center;
padding: 40px 20px;
}
.header h1 {
font-size: 2.5em;
margin-bottom: 10px;
font-weight: 700;
}
.header p {
font-size: 1.2em;
opacity: 0.9;
}
/* 内容区域 */
.content {
padding: 40px 30px;
}
.intro {
text-align: center;
margin-bottom: 40px;
font-size: 1.1em;
line-height: 1.8;
color: #333;
}
/* 价值观卡片 */
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin: 30px 0;
}
.value-card {
background: #fff5f5;
border: 2px solid #b71c1c;
border-radius: 12px;
padding: 30px 20px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.value-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(211, 47, 47, 0.3);
}
.value-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s;
}
.value-card:hover::before {
left: 100%;
}
.value-card h3 {
color: #d32f2f;
font-size: 1.5em;
margin-bottom: 15px;
font-weight: 700;
}
.value-card p {
font-size: 1.1em;
color: #666;
line-height: 1.6;
}
/* 意义部分 */
.significance {
background: #fafafa;
border-left: 4px solid #d32f2f;
padding: 25px;
margin: 30px 0;
border-radius: 0 8px 8px 0;
}
.significance h2 {
color: #d32f2f;
margin-bottom: 15px;
font-size: 1.8em;
}
.significance p {
line-height: 1.8;
color: #444;
font-size: 1.1em;
}
/* 页脚 */
.footer {
background: #b71c1c;
color: white;
text-align: center;
padding: 30px 20px;
font-size: 1.1em;
}
.footer p {
margin-bottom: 10px;
}
.footer small {
opacity: 0.8;
font-size: 0.9em;
}
.footer a {
color: #ffcccb;
text-decoration: none;
transition: color 0.3s;
}
.footer a:hover {
color: white;
text-decoration: underline;
}
/* 响应式设计 */
@media (max-width: 768px) {
.header h1 {
font-size: 2em;
}
.values-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.value-card {
padding: 25px 15px;
}
.content {
padding: 30px 20px;
}
}
@media (max-width: 480px) {
body {
padding: 10px;
}
.container {
border-radius: 10px;
}
.header {
padding: 30px 15px;
}
.header h1 {
font-size: 1.8em;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>社会主义核心价值观</h1>
<p>🇨🇳 弘扬核心价值观，共建美好新时代</p>
</div>
<div class="content">
<div class="intro">
社会主义核心价值观是中国共产党在新时期提出的重要指导思想，是社会主义现代化建设的重要精神支柱。每个公民应当积极践行社会主义核心价值观，共建美好社会。
</div>
<div class="values-grid">
<div class="value-card">
<h3>🇨🇳 国家层面</h3>
<p>富强、民主、文明、和谐</p>
</div>
<div class="value-card">
<h3>🏛️ 社会层面</h3>
<p>自由、平等、公正、法治</p>
</div>
<div class="value-card">
<h3>👤 个人层面</h3>
<p>爱国、敬业、诚信、友善</p>
</div>
</div>
<div class="significance">
<h2>🌟 重要意义</h2>
<p>
社会主义核心价值观是每个公民应当遵循的道德准则，有助于推动国家富强，社会和谐，个人全面发展。
通过践行这些价值观，我们可以共同为实现中华民族伟大复兴的中国梦贡献力量。
</p>
</div>
</div>
<div class="footer">
<p>💪 践行社会主义核心价值观，共建美好未来</p>
<small>
© 2024 尋鯨錄
<br>
<a href="https://beian.miit.gov.cn/" target="_blank">滇ICP备2023007716号-1</a>
<br>
<a href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank">
<img src="https://beian.mps.gov.cn/img/logo01.dd7ff50e.png" alt="公安备案" style="height: 15px; vertical-align: middle; margin-right: 5px;">
公安备案号：滇公网安备53032202530370号
</a>
</small>
</div>
</div>
</body>
</html>🎨 个性化定制
🎯 颜色主题定制
| 主题色 | 修改位置 | 推荐场景 |
|---|---|---|
| 中国红 | #d32f2f | 党政官网 🇨🇳 |
| 金色 | #ffd700 | 企业展示 🏢 |
| 蓝色 | #1976d2 | 教育平台 🎓 |
| 绿色 | #388e3c | 环保主题 🌱 |
🔧 快速修改指南
/* 修改主题色示例 */
.container {
border-color: #1976d2; /* 改为蓝色主题 */
}
.header {
background: linear-gradient(135deg, #1976d2, #1565c0);
}
.value-card {
border-color: #1976d2;
}📱 响应式适配
💻 设备兼容性
| 设备类型 | 适配效果 | 测试建议 |
|---|---|---|
| 手机 | 单列布局 | iPhone/Android 📱 |
| 平板 | 双列布局 | iPad/安卓平板 📱 |
| 电脑 | 三列布局 | Chrome/Firefox 💻 |
| 大屏 | 居中展示 | 4K显示器 🖥️ |
📏 断点设置
/* 响应式断点 */
@media (max-width: 768px) {
/* 平板和手机样式 */
.values-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
/* 手机专用样式 */
.container {
margin: 10px;
}
}🚀 部署指南
📁 部署步骤
方式一：直接部署
# 1. 创建项目目录
mkdir socialist-values
cd socialist-values
# 2. 创建HTML文件
cp index.html ./
# 3. 上传到服务器
# 使用FTP、SCP或其他方式上传到网站根目录方式二：集成到现有网站
<!-- 在现有页面中嵌入 -->
<div id="socialist-values">
<!-- 复制完整HTML代码 -->
</div>
<!-- 引入样式 -->
<style>
/* 复制CSS样式代码 */
</style>🌐 部署环境支持
| 环境 | 支持情况 | 部署建议 |
|---|---|---|
| 静态托管 | ✅ 完美支持 | GitHub Pages/Vercel |
| 虚拟主机 | ✅ 完美支持 | 上传到public_html |
| 云服务器 | ✅ 完美支持 | Nginx/Apache配置 |
| CDN加速 | ✅ 支持 | 配置静态资源缓存 |
