wjs-web-application - HTML/CSS 布局与业务页面实战笔记

2015

Table / Float 时代 - Table 居中布局、浮动两栏/三栏布局、文本省略等基础 CSS 工具类，主要服务于银行系统项目

2016

定位布局普及 - 粘性定位、圣杯布局、颜色/边框工具类，电商平台和 IM 系统项目大量实践

2017

Flexbox 革命 - Flex 弹性布局普及，后台管理布局成为标配，间距/阴影工具类完善，企业/医院管理系统项目

2018

CSS Grid 崛起 - Grid 网格布局、瀑布流布局，Flexbox/动画工具类，教育/金融平台项目

2019

响应式成熟 - Sticky Footer、响应式工具类、栅格系统，物流/政务系统项目

2020

数据可视化 - Dashboard 仪表盘布局，数据大屏项目实践，HR 系统项目

2021

移动端优先 - 移动端自适应布局、rem 适配方案，H5 项目大量实践

2022

CSS 变量时代 - CSS 变量主题系统、暗色模式支持，工程化主题切换方案

2024

容器查询时代 - CSS Container Queries 容器查询，根据父容器尺寸自适应布局

布局模式

CSS 工具类

直接参考布局模式的 HTML 结构，复制到你的项目中：

<!-- Table 居中布局 -->
<table class="login-table">
  <tr>
    <td>
      <div class="login-box">
        <!-- 你的内容 -->
      </div>
    </td>
  </tr>
</table>

在 HTML 中引入需要的 CSS 文件，直接使用类名：

<link rel="stylesheet" href="css-utils/01-text.css">
<link rel="stylesheet" href="css-utils/05-spacing.css">

<div class="text-ellipsis m-2 p-3">
  这是一段超长文本，超出部分会显示省略号...
</div>

纯原生 HTML/CSS

零依赖，开箱即用

20种经典布局模式

10个行业54个业务页面

10大类CSS工具类

完整注释，即学即用

全主流浏览器兼容

持续更新11年

🎨 wjs-web-application

📦 三大模块

📅 发展历程

📖 快速使用