/* 
  主色调采用深绿色（#2E7D32）作为整体背景色，营造专业且稳重的氛围。
  辅色使用米白色（#FAFAFA）作为主要的文本和次要背景颜色，增强可读性与层次感。
  点缀色选用紫色（#AB47BC），用于按钮、链接及重点信息的突出，提升整体视觉吸引力。
  全局字体使用现代无衬线字体（如Roboto），确保页面在不同设备上的清晰易读。
  
  导航栏设计固定在页面顶部，采用半透明背景，结合阴影效果，增加视觉深度。
  导航链接拥有悬停下划线动画，提升用户互动感。
  
  头部区域采用全屏背景图，并叠加提示文字“这是一个网页样式设计参考”，以引导用户注意。
  使用Flex布局实现内容的垂直水平居中，确保在不同屏幕尺寸下的响应式展示。
  
  主体内容采用12列CSS Grid网格系统，确保布局的灵活性与模块化。
  文章内容与侧边栏分别占据不同的网格列数，保证内容的独立性与整体布局的协调。
  
  文章内的代码块使用深色背景，并配以圆角和内阴影，区分于正文内容，提升可读性。
  代码示例前添加标签，明确其功能，同时避免遮挡正文内容。
  
  侧边栏中的图片采用圆角、阴影及悬停放大效果，增强视觉层次与互动性。
  图片间保持适当间距，避免页面拥挤，提升整体美观度。
  
  页面底部设计简洁，包含订阅表单与社交链接，通过Flex布局实现内容左右分布。
  表单元素采用全宽设计，确保在不同设备上的一致性与易用性。
  社交链接添加悬停颜色变化，突出互动性。
  
  整体页面遵循响应式设计原则，利用媒体查询在不同屏幕宽度下调整布局，确保无水平滚动条，内容始终完整可见。
  使用高级CSS3特性如渐变、阴影、过渡与关键帧动画，提升页面的现代感与用户体验。
  
  强调留白的运用，确保页面视觉上的“呼吸感”，避免信息过载，同时通过模块化设计与对齐方式，打造层次分明、视觉张力十足的科技美学体验。
  
  所有内部链接均添加rel="nofollow"属性，确保SEO优化与网站安全。
  
  图文并茂的设计风格，结合现代简约与科技感，呈现专业可信的企业形象，提升用户信任感与品牌影响力。
*/

/* 定义颜色变量 */
:root {
  --main-color: #2E7D32; /* 深绿色 */
  --secondary-color: #FAFAFA; /* 米白色 */
  --accent-color: #AB47BC; /* 紫色 */
}

/* 全局样式 */
body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  background-color: var(--main-color);
  color: var(--secondary-color);
  line-height: 1.6;
  scroll-behavior: smooth;
}

/* 导航栏样式 */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(46, 125, 50, 0.9);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;
}

.navbar a {
  color: var(--secondary-color);
  text-decoration: none;
  margin: 0 15px;
  position: relative;
}

.navbar a::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: var(--accent-color);
  transition: width .3s;
}

.navbar a:hover::after {
  width: 100%;
}

/* 头部区域样式 */
.header {
  height: 100vh;
  background: url('https://images.gptkong.com/demo/sample1.png') center center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.header::before {
  content: '这是一个网页样式设计参考';
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 18px;
}

.header h1 {
  color: var(--secondary-color);
  font-size: 48px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* 容器网格布局 */
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;color: #333;
  padding: 120px 40px 60px 40px; /* 上面留出导航栏高度 */
}

@media (max-width: 1200px) {
  .container {
    grid-template-columns: repeat(8, 1fr);
    padding: 100px 30px 50px 30px;
  }
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: repeat(6, 1fr);
    padding: 80px 20px 40px 20px;
  }
}

@media (max-width: 480px) {
  .container {
    grid-template-columns: repeat(1, 1fr);
    padding: 60px 10px 30px 10px;
  }
}

/* 文章内容样式 */
article {
  grid-column: span 8;
  background-color: rgba(250, 250, 250, 0.9);
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

article h2, article h3 {
  color: var(--main-color);
}

article p {
  font-size: 16px;
  margin-bottom: 20px;
}
.nav-links {width:650px;}
.nav-links a {float:left;}
article pre {
  background: #2E7D32;
  padding: 15px;
  border-radius: 5px;
  overflow: auto;
  position: relative;
}

article pre code {
  color: #FAFAFA;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
}

/* 代码示例标签 */
.code-label::before {
  content: '代码示例';
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--accent-color);
}

/* 文章内图片样式 */
.article-image {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s, box-shadow 0.3s;
  margin-bottom: 20px;
}

.article-image:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

/* 侧边栏样式 */
.sidebar {
  grid-column: span 4;
}

.sidebar .image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.sidebar .image-grid img {
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.sidebar .image-grid img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* 底部样式 */
.footer {
  grid-column: span 12;
  background-color: var(--main-color);
  color: var(--secondary-color);
  padding: 40px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer h3 {
  margin-bottom: 20px;
}

.footer a {
  color: var(--accent-color);
  text-decoration: none;
  margin: 5px 0;
  display: block;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: darken(var(--accent-color), 10%);
}

/* 表单样式 */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  border-radius: 4px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #999;
}

/* 社交链接样式 */
.social-links a {
  display: inline-block;
  margin-right: 10px;
}

/* 关键帧动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid var(--accent-color);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1.5s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 数据可视化图表样式 */
.chart {
  display: flex;
  align-items: flex-end;
  height: 300px;
  padding: 20px;
  background-color: var(--main-color);
}

.bar {
  flex: 1;
  margin: 0 10px;
  background: linear-gradient(180deg, var(--accent-color) 0%, rgba(171, 71, 188, 0.7) 100%);
  position: relative;
  transition: transform 0.3s ease;
}

.bar:hover {
  transform: scaleY(1.1);
}

.bar::after {
  content: attr(data-value) '%';
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-weight: bold;
}

/* 平滑滚动效果 */
html {
  scroll-behavior: smooth;
}