核心模块排版规范实操落地针对动网站常见模块、头部导航、Banner、内容区、底部、排版规范确保多端适配一致，同时结合动态交互提

升体验：

一、头部导航排版：

1.  PC端横向导航Logo居左，导航菜单居右菜单项间距20-30px，字体大小14-16px hover时添加轻微动态效果、颜色变化、下划线过渡、

可添加下拉菜单下拉菜单排版整齐，间距均匀。

2.  移动端隐藏横向导航，替换为汉堡菜单居右，Logo居左点击汉堡菜单展开纵向导航，菜单项全屏宽度高度44px，间距10px选中项添加

高亮效果，导航展开时不遮挡核心内容。

3.  适配注意导航栏固定时，PC端可保持完整导航，移动端滚动时可简化导航，仅保留Logo与汉堡菜单避免遮挡页面内容。

二、Banner排版

1.  尺寸适配Banner宽度100%，高度随屏幕调整PC端高度400-500px，平板端300-400px移动端200-300px，保持Banner比例一致，如

16:9避免拉伸。

2.  内容排版文字居中或左对齐，位于Banner中上部，避免遮挡核心图片元素，标题字体加粗颜色与Banner背景对比强烈，浅色背景用深

色文字，深色背景用浅色文字动态Banner，轮播切换时文字过渡流畅，不出现卡顿与错位。

3.  CTA按钮按钮位于文字下方，PC端按钮尺寸适中移动端按钮全屏宽度，按钮文字清晰与背景对比明显，点击时添加动态反馈，缩放颜色

变化。

三、核心内容区排版

1.  卡片式排版卡片间距均匀PC端20-30px，移动端10-15px卡片宽度自适应，PC端多列排列小屏单列排列，卡片内文字左对齐标题加粗，

正文简洁，图片居上、文字居下，动态效果、悬浮缩放不破坏卡片排版。

2.  文章资讯排版正文宽度适配屏幕，PC端宽度600-800px居中，小屏宽度100%左右留边15px，段落间距20-30px标题与正文间距30px，

图片居中，宽度100%避免图片过宽导致横向滚动。

3.  动态内容排版滚动加载的内容，排版保持一致加载时添加轻量动态过渡，渐入效果分页排版，PC端用数字分页移动端用下拉加载或简易

分页、上一页、下一页、避免分页按钮拥挤。

四、底部排版

1.  布局适配PC端底部采用多列布局3-4列，展示联系方式、导航链接、版权信息等、移动端切换为纵向排列，每列居中对齐间距15px。

2.  文字排版底部文字字体偏小，PC端12-14px移动端10-12px，颜色偏浅、灰色、版权信息居中位于底部最下方。

3.  适配注意底部不添加复杂动态效果，确保文字清晰可读链接可点击，避免小屏出现内容重叠。