CSS示例：常见布局与样式思路

数码系统

相机 win10

测评 win11

手机智车

华为 Tesla

小米理想

苹果蔚来

游戏软件

LOL 抖音

原神微信

当前位置：首页

前端开发

CSS示例：常见布局与样式思路

作者:实验室老王时间：2026-09-01

转载

本文整理高频CSS示例，涵盖双栏布局、居中、卡片网格、文字层级、按钮状态、表单输入与响应式规则。通过HTML结构、CSS代码与效果说明，帮助开发者快速建立可复用的样式库，提升页面搭建效率。

学习CSS时，仅记忆属性难以应对真实页面需求。本文围绕布局、文字、按钮、卡片、表单与响应式六大高频场景，提供可直接复用的HTML结构与CSS代码，并说明适用场景与效果，帮助开发者快速建立样式库，提升开发效率。

高频布局模式与实现

布局是CSS最先解决的问题。现代页面优先使用弹性布局（Flexbox）和网格布局（Grid），相比早期浮动方案更直观且易于维护。编写布局时，应先确定父容器的排列方式，再处理子元素的宽度、间距与对齐，确保代码结构清晰。

双栏布局

适用于资讯页、博客详情页或文档页面。左侧内容区自适应，右侧侧栏固定宽度，结构稳定且便于后续响应式调整。

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}
.content, .sidebar {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
}
.sidebar {
  position: sticky;
  top: 24px;
}

固定宽度容器居中

适用于登录框、文章页主体或活动介绍模块。在大屏保持舒适阅读宽度，在小屏自动预留两侧间距，避免内容紧贴边缘。

内容

.container {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
}

水平垂直居中

适用于空状态页、欢迎区或加载提示区。无需额外定位代码即可稳定实现双向居中。


  暂无数据

.empty-state {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
}
.panel {
  padding: 32px 40px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
}

卡片网格布局

适用于功能入口、商品列表或文章推荐区。统一列数和间距后，页面更整洁且易于扩展响应式。

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.card {
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}

文字层级与按钮状态管理

文字与按钮的样式最能体现页面质感。文字需统一字号、行高与颜色层级；按钮需兼顾可读性、点击反馈与禁用状态。建议将常用样式沉淀为类名规范，便于后续复用。

文字层级

适用于文章页、说明页或功能介绍区。标题、导语与正文层级清晰，阅读节奏更稳定。

标题
导语
正文

.page-title {
  font-size: 32px;
  line-height: 1.25;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 16px;
}
.lead {
  font-size: 18px;
  line-height: 1.8;
  color: #334155;
  margin: 0 0 14px;
}
.text {
  font-size: 16px;
  line-height: 1.9;
  color: #475569;
  margin: 0 0 12px;
}

主按钮与次按钮

主按钮用于提交、购买等核心操作，次按钮用于取消、返回等辅助操作。两者需形成视觉层级区分，避免次按钮抢夺主操作权重。

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}
.btn-primary {
  background: #2563eb;
  color: #fff;
}
.btn-primary:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}
.btn-primary:disabled {
  background: #93c5fd;
  cursor: not-allowed;
  transform: none;
}
.btn-secondary {
  background: #fff;
  color: #1e293b;
  border-color: #cbd5e1;
}
.btn-secondary:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

若按钮紧跟段落，可使用操作区容器管理间距：

.actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

卡片与表单组件写法

卡片与表单在企业站、后台和内容页面中出现频率极高。卡片需平衡边距、阴影与圆角；表单需明确输入状态、边框与聚焦反馈。以下提供可直接修改字段名与颜色值的基础写法。

基础卡片

适用于新闻摘要、商品信息或功能介绍模块。默认简洁，悬停时产生轻微层次变化，适合列表页展示。


  标题
  摘要内容

.info-card {
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.info-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  color: #0f172a;
}
.info-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #475569;
}
.info-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
}

表单输入框与文本域

适用于登录、注册、资料填写或搜索筛选。尺寸统一、输入清晰，聚焦反馈明确。文本域与按钮组合适合留言、反馈或简介编辑页。


  用户名

.field {
  display: block;
}
.field span {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}
.input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  color: #0f172a;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input::placeholder {
  color: #94a3b8;
}
.input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.form-card {
  padding: 24px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
}
.textarea {
  width: 100%;
  min-height: 140px;
  padding: 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  resize: vertical;
  font-size: 15px;
  line-height: 1.7;
  outline: none;
}
.textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

常见坑处理：为输入框设置 width: 100% 时，建议全局声明 * { box-sizing: border-box; }，避免 padding 导致宽度溢出。

响应式规则与状态管理

参考实例时，应理解每段样式解决的具体问题。建议按类别建立示例库，并在备注中标注适用场景，以便快速复用。以下为响应式与状态管理的补充规则。

响应式适配

适用于双栏布局、卡片列表或移动端内容页。在平板和手机下自动切换为单列，标题字号同步收缩，避免页面拥挤。

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
  }
  .card-grid {
    grid-template-columns: 1fr;
  }
  .page-title {
    font-size: 26px;
  }
}