/* 
    页面整体样式设计 
    本样式旨在打造一个融合未来感与高级质感的图文并茂页面，通过运用CSS3的高级特性，如线性渐变、box-shadow、text-shadow、关键帧动画、平滑过渡等，营造出精致、现代、具有立体感和视觉层次的网页效果。页面采用响应式设计，确保在各种设备和屏幕尺寸下均有良好的显示效果，避免出现水平滚动条或内容被遮挡。

    1. 布局设计
    使用CSS Grid和Flexbox实现模块化布局，确保内容有序展示的同时，保持视觉上的独立性和创新性。通过媒体查询调整不同屏幕尺寸下的布局，确保在移动设备上也能提供良好的用户体验。

    2. 颜色搭配
    根据黄金比例配色法则，主色调选用深蓝色和灰色，辅色使用橙色和绿色，点缀色选用亮黄色。整体色彩丰富且协调，传达出专业性与可靠性的同时，增加视觉层次感和活力。

    3. 字体与排版
    采用现代、简洁且易读的Sans-serif字体，如Roboto和Inter，确保文字显示效果清晰。标题使用较大的字体和加粗效果，正文保持适中的字体大小和行高，提升可读性和层次感。

    4. 图片样式
    所有图片均采用圆角、阴影和悬浮效果，增强视觉美感和互动性。通过CSS3的transition和transform属性，实现平滑的悬浮动画，提升用户的操作反馈感。

    5. 动画与过渡
    使用关键帧动画和过渡效果，为页面增添动态元素，如按钮悬停时的缩放效果、滚动触发的淡入效果等，提升用户的浏览体验和页面的互动性。

    6. 导航栏设计
    导航栏固定在顶部，使用半透明背景和适当的阴影效果，确保在滚动时依然可见。导航链接使用flex布局，保证在不同屏幕尺寸下的对齐和间距一致。

    7. 代码块样式
    文章中的代码块采用深色背景和等宽字体，配以适当的内边距和圆角，使其与正文内容区分开来，同时保持整体风格的一致性。通过overflow属性确保代码在小屏幕设备上的可滚动性。

    8. 响应式设计
    利用媒体查询和弹性布局，确保页面在从320px到1920px的各种屏幕宽度下均有良好的显示效果。对于宽度小于500px的容器，调整内容布局或采用可折叠的内容展示方式，优化阅读体验。

    9. 点缀元素
    使用渐变线条、科技感装饰元素和适量的留白，营造出视觉上的呼吸感与平衡，避免页面过于线性和单调。通过组块与对齐，打造层次分明、视觉张力十足的科技美学体验。

    10. 交互动效
    为按钮、链接等可交互元素添加微动画，如颜色变化、阴影增减等，增强用户操作时的反馈感。滚动时触发内容区域的动画效果，如淡入、滑动、放大等，提升页面的动态感和用户的参与感。

    11. 图片布局
    利用CSS Grid和Flexbox实现图片的美观排列，通过适当的间距和对齐方式，使图片与文本内容和谐共存。为每张图片添加悬浮效果，增强视觉吸引力。

    12. 视觉一致性
    确保所有设计元素在颜色、字体、间距等方面保持一致，传达出统一的品牌形象和专业性。通过细致的样式调整，提升整体页面的高级感与和谐美。

    13. 用户引导
    在页面显著位置提示“这是一个网页样式设计参考”，通过醒目的字体和颜色，确保用户能够快速识别。利用CSS定位和样式调整，使提示信息融入整体设计而不显突兀。

    14. 无水平滚动
    通过设置适当的容器宽度和内边距，避免内容超出视窗范围，确保页面无水平滚动条。使用box-sizing: border-box，统一计算元素的尺寸，避免布局错乱。

    15. 图片描述属性
    所有装饰性图片的描述属性设为空（alt=""），通过CSS背景图或img标签的适当样式展示，确保页面的无障碍性和SEO优化。

    16. 链接属性
    所有内部链接均添加rel="nofollow"属性，防止搜索引擎追踪，同时保持页面的SEO友好性。链接样式统一，通过颜色和下划线区分。

    17. 转场动画
    页面各模块之间的过渡，通过平滑的动画效果连接，提升用户的浏览流畅度和页面的整体协调性。

    18. 技术实现细节
    确保CSS3代码的兼容性和有效性，避免使用过时或不支持的属性。通过结构清晰的CSS代码，便于后续的维护和扩展。

    19. 视觉平衡
    通过合理的留白和元素分布，保持页面的视觉平衡，避免信息过载或视觉疲劳。利用对齐和组块技术，确保内容的有序排列和视觉的舒适感。

    20. 代码优化
    精简CSS代码，避免冗余和重复，提升页面加载速度和性能。通过使用CSS变量和预处理器（如SASS）实现样式的复用和管理。

    总结：
    本样式设计通过综合运用CSS3的各种高级特性，结合现代设计理念和用户体验要求，打造出一个专业、可靠且具有高度视觉冲击力的网页页面。页面不仅在视觉上富有层次感和科技感，同时在功能和交互上也提供了流畅和愉悦的用户体验，满足目标用户群体的需求。
*/

/* 通用样式设置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 主体字体和背景 */
body {
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(135deg, #1E2F4A 0%, #F0F3F6 100%);
    color: #333;
    line-height: 1.6;
    padding: 20px;
}

/* 导航栏样式 */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(30, 47, 74, 0.9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 15px 0;
}

.navbar ul {
    display: flex;
    justify-content: center;
    list-style: none;
}

.navbar li {
    margin: 0 15px;
}

.navbar a {
    color: #F0F3F6;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s;
}

.navbar a:hover {
    color: #FF8C00;
}

/* 主要内容容器 */
.container {
    max-width: 1200px;
    margin: 100px auto 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* 卡片样式 */
.card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s;
}

.card img:hover {
    transform: scale(1.05);
}

.card-content {
    padding: 20px;
}

.card-title {
    font-size: 18px;
    margin-bottom: 10px;
    color: #1E2F4A;
}

.card-description {
    font-size: 15px;
    color: #555;
}

/* 提示信息样式 */
.notice {
    text-align: center;
    font-size: 20px;
    color: #FF8C00;
    margin-bottom: 40px;
    animation: fadeIn 2s ease-in-out;
}

/* 文章内容样式 */
article {
    background-color: rgba(240, 243, 246, 0.9);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

article h2 {
    font-size: 24px;
    color: #1E2F4A;
    margin-bottom: 20px;
}

article h3 {
    font-size: 20px;
    color: #2575FC;
    margin: 15px 0;
}

article p {
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
}

article pre {
    background-color: #2D2D2D;
    color: #F8F8F2;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    margin-bottom: 20px;
    font-size: 14px;
}

article code {
    font-family: 'Courier New', Courier, monospace;
}

/* 图片样式 */
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

.image-gallery img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

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

/* 响应式设计 */
@media (max-width: 768px) {
    .navbar ul {
        flex-direction: column;
    }

    .navbar li {
        margin: 10px 0;
    }

    .container {
        grid-template-columns: 1fr;
    }

    article {
        padding: 20px;
    }
}

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

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

/* 按钮样式 */
.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3EB489;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
}

.button:hover {
    background-color: #2575FC;
    transform: scale(1.05);
}

/* 折叠区域样式 */
.collapsible {
    background-color: #FF8C00;
    color: white;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    border-radius: 5px;
    margin-top: 10px;
    transition: background-color 0.3s;
}

.collapsible:hover {
    background-color: #e07b00;
}

.content {
    padding: 0 15px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
    border-radius: 5px;
    margin-bottom: 10px;
}