Milligram 是一个约 2KB 的极简 CSS 框架，支持响应式布局，适用于快速搭建轻量级页面；通过 CDN 引入即可使用，提供 container、row、column 等布局类及按钮、表单、表格默认样式，建议结合自定义 CSS 扩展，并注意 viewport 设置以优化体验。
Milligram 是一个极简的 CSS 框架，适合快速搭建轻量级、美观的页面。它文件小（仅约 2KB），无 JavaScript，提供干净的默认样式和响应式布局支持，非常适合做原型、小型项目或追求性能的站点。
引入 Milligram
使用 Milligram 非常简单，可以通过 CDN 快速引入：
将这行代码放入 HTML 文件的 中即可开始使用。你也可以通过 npm 安装：
npm install milligram
基本页面结构示例
下面是一个使用 Milligram 快速搭建的简单页面：
立即学习“前端免费学习笔记（深入）”；
Milligram 示例 欢迎使用 Milligram
这是一个简洁、响应式的页面布局。
zuojiankuohaophpcnformyoujiankuohaophpcn zuojiankuohaophpcnlabel for="email"youjiankuohaophpcn邮箱zuojiankuohaophpcn/labelyoujiankuohaophpcn zuojiankuohaophpcninput type="email" id="email" placeholder="your@email.com"youjiankuohaophpcn zuojiankuohaophpcnlabel for="message"youjiankuohaophpcn留言zuojiankuohaophpcn/labelyoujiankuohaophpcn zuojiankuohaophpcntextarea id="message" placeholder="输入内容..."youjiankuohaophpcnzuojiankuohaophpcn/textareayoujiankuohaophpcn zuojiankuohaophpcnbutton type="submit" class="button-primary"youjiankuohaophpcn提交zuojiankuohaophpcn/buttonyoujiankuohaophpcn zuojiankuohaophpcn/formyoujiankuohaophpcn zuojiankuohaophpcntableyoujiankuohaophpcn zuojiankuohaophpcntheadyoujiankuohaophpcn zuojiankuohaophpcntryoujiankuohaophpcn zuojiankuohaophpcnthyoujiankuohaophpcn姓名zuojiankuohaophpcn/thyoujiankuohaophpcn zuojiankuohaophpcnthyoujiankuohaophpcn年龄zuojiankuohaophpcn/thyoujiankuohaophpcn zuojiankuohaophpcnthyoujiankuohaophpcn城市zuojiankuohaophpcn/thyoujiankuohaophpcn zuojiankuohaophpcn/tryoujiankuohaophpcn zuojiankuohaophpcn/theadyoujiankuohaophpcn zuojiankuohaophpcntbodyyoujiankuohaophpcn zuojiankuohaophpcntryoujiankuohaophpcn zuojiankuohaophpcntdyoujiankuohaophpcn张三zuojiankuohaophpcn/tdyoujiankuohaophpcn zuojiankuohaophpcntdyoujiankuohaophpcn25zuojiankuohaophpcn/tdyoujiankuohaophpcn zuojiankuohaophpcntdyoujiankuohaophpcn北京zuojiankuohaophpcn/tdyoujiankuohaophpcn zuojiankuohaophpcn/tryoujiankuohaophpcn zuojiankuohaophpcntryoujiankuohaophpcn zuojiankuohaophpcntdyoujiankuohaophpcn李四zuojiankuohaophpcn/tdyoujiankuohaophpcn zuojiankuohaophpcntdyoujiankuohaophpcn30zuojiankuohaophpcn/tdyoujiankuohaophpcn zuojiankuohaophpcntdyoujiankuohaophpcn上海zuojiankuohaophpcn/tdyoujiankuohaophpcn zuojiankuohaophpcn/tryoujiankuohaophpcn zuojiankuohaophpcn/tbodyyoujiankuohaophpcn zuojiankuohaophpcn/tableyoujiankuohaophpcnhtml>
常用类与布局技巧
Milligram 提供了一些实用的类来控制布局和样式：
左侧内容右侧内容
- .button 和 .button-primary：按钮样式，主操作推荐用 button-primary
- 文本对齐：支持 .text-left、.text-center、.text-right
- 间距控制：Milligram 默认间距合理，如需调整可自定义 margin 或 padding
自定义与扩展
Milligram 样式极简，实际项目中可能需要补充一些自定义样式。建议创建一个额外的 CSS 文件进行覆盖：
/* custom.css */ .container { max-width: 960px; }.highlight { background-color: #f0f8ff; padding: 1rem; border-radius: 4px; }
然后在页面中引入：
这样既能保留 Milligram 的简洁，又能灵活扩展。
基本上就这些。Milligram 适合想快速出效果又不想引入大框架的场景，搭配原生 HTML 和少量 CSS 就能做出清爽的页面。不复杂但容易忽略细节，比如 viewport 设置和语义化标签的使用，注意这些体验会更好。
相关文章
css引入顺序写错会有哪些问题_可能导致样式被覆盖或失效
css指定第n个元素样式怎么写_使用css:nth child精确定位
css flex 布局中多行内容对齐异常怎么办_使用 align content 控制多行
css 选择器性能会影响页面吗_大型项目优化建议
css 原生写样式和框架差别在哪_理解 css 框架解决的问题
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
更多热门AI工具
