css项目实战_开发一个简单的企业介绍页面

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 更干净

企业介绍页最容易被忽略的不是视觉效果，而是信息密度控制——每块内容是否真的需要？有没有把“我们成立于2010年”这种无效信息放在首屏？CSS 能美化，但不能替代内容裁剪。