这是一个网页样式设计参考
色彩方案:科技感与现代感的融合
数码纪元采用了深蓝色(#0C2D48)作为主色,象征稳定与信任;搭配浅灰色(#F5F7FA),形成层次分明的背景效果。橙色(#FFA500)和绿色(#34C759)则用于点缀按钮及呼叫操作区域,增强视觉吸引力。这种配色方案不仅体现了科技感,还兼顾了用户的友好体验。
排版布局:12列网格系统与模块化设计
为了确保信息分块清晰且层次分明,数码纪元采用了12列网格布局。以下是一个简单的CSS代码示例:
.grid-container { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
动态交互:渐显动画与按钮反馈
为了提升用户体验,数码纪元融入了多种交互动效。页面滚动时触发渐显动画,按钮悬停时改变颜色并添加轻微阴影。以下是按钮悬停效果的一个示例:
.button { background-color: #FFA500; color: white; padding: 10px 20px; border: none; transition: all 0.3s ease; } .button:hover { background-color: #FFB90F; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
无障碍设计与响应式适配
数码纪元注重无障碍设计,确保各设备兼容性。以下是响应式设计的核心策略:
- 使用媒体查询调整不同屏幕尺寸下的布局。
- 保持字体大小适中,推荐使用现代化字体如Roboto。
- 利用弹性盒子(Flexbox)和网格系统优化移动端显示。
@media (max-width: 768px) { .grid-container { grid-template-columns: repeat(6, 1fr); } }