Flex布局实现响应式导航栏：桌面端logo左、菜单右对齐；移动端转列布局并隐藏菜单项；企业简介用系统字体、行高1.6～1.75、段落间距1.25rem；服务卡片加grid-auto-rows修复Safari塌陷；表单成功后通过data-status切换显示状态。
用 Flex 布局快速实现响应式导航栏
企业介绍页的头部导航必须在手机和桌面端都保持可用，display: flex 是最直接可靠的方案。别用浮动或 inline-block 模拟，容易在小屏下换行错乱。
- 给
设置display: flex和justify-content: space-between，让 logo 左对齐、菜单右对齐 - 菜单项用
li设为list-style: none并设margin-left: 2rem（不要用float） - 加媒体查询：当屏幕宽度
时，把nav改为flex-direction: column，并隐藏菜单项，只留汉堡按钮
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
@media (max-width: 768px) {
nav {
flex-direction: column;
}
nav ul li {
display: none;
}
}
企业简介区块的字体与行高控制
企业介绍文字常被堆砌成大段落，用户根本不会读完。CSS 不是排版工具，而是阅读引导器——重点在可读性，不在“看起来很正式”。
- 正文用
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif，避免用"Microsoft YaHei"这类 Windows 专属字体，Mac/Linux 下 fallback 失败率高 -
line-height设为1.6～1.75，太小（如1.4）会让中文挤在一起，太大（如2）显得松散无力 - 段落首行不缩进，用
margin-bottom: 1.25rem分隔，比传统中文排版更符合现代阅读习惯
服务项目卡片网格在 Safari 中塌陷怎么办
用 display: grid 做三列服务卡片时，Safari 15.4 及更早版本对 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 支持不全，会导致所有卡片垂直堆叠。
- 临时解法：改用
repeat(3, 1fr)+ 媒体查询分断点，虽然不够弹性但兼容性稳 - 真正推荐：加一行
grid-auto-rows: minmax(150px, auto)，强制 Safari 知道每行最小高度，能触发正确渲染 - 别忘了给卡片加
box-shadow: 0 2px 6px rgba(0,0,0,0.08)，纯边框在 Retina 屏上显得廉价
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-auto-rows: minmax(150px, auto);
}
联系表单提交后页面跳转，怎么用 CSS 配合 JS 实现静默反馈
CSS 本身不能处理表单提交，但它能决定用户是否注意到“提交成功”这个关键状态。别依赖 JS 弹窗或 alert，那会打断浏览流。
立即学习“前端免费学习笔记（深入）”；
- 给表单容器加一个
data-status属性，初始为"idle"，JS 提交成功后改为"success" - 用属性选择器写反馈样式：
form[data-status="success"] .form-input { display: none; }，同时显示成功文案 - 加一个淡入动画：定义
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }，再用animation: fadeIn 0.3s ease-out - 注意：别用
visibility: hidden隐藏输入框，它仍占布局空间；用display: none更干净
