首页 > 文章 > 前端

CSSMilligram快速搭建简洁网页

时间：2025-12-27 23:40:51 369浏览收藏

从现在开始，努力学习吧！本文《CSS Milligram快速搭建简洁页面》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

Milligram 是一个约 2KB 的极简 CSS 框架，支持响应式布局，适用于快速搭建轻量级页面；通过 CDN 引入即可使用，提供 container、row、column 等布局类及按钮、表单、表格默认样式，建议结合自定义 CSS 扩展，并注意 viewport 设置以优化体验。

css milligram小型框架快速搭建页面

Milligram 是一个极简的 CSS 框架，适合快速搭建轻量级、美观的页面。它文件小（仅约 2KB），无 JavaScript，提供干净的默认样式和响应式布局支持，非常适合做原型、小型项目或追求性能的站点。

引入 Milligram

使用 Milligram 非常简单，可以通过 CDN 快速引入：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">

将这行代码放入 HTML 文件的中即可开始使用。你也可以通过 npm 安装：

npm install milligram

基本页面结构示例

下面是一个使用 Milligram 快速搭建的简单页面：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>Milligram 示例</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">
</head>
<body>
  <div class="container">
    <h1>欢迎使用 Milligram</h1>
    <p>这是一个简洁、响应式的页面布局。</p>
<pre class="brush:php;toolbar:false;">&lt;form&gt;
  &lt;label for="email"&gt;邮箱&lt;/label&gt;
  &lt;input type="email" id="email" placeholder="your@email.com"&gt;

  &lt;label for="message"&gt;留言&lt;/label&gt;
  &lt;textarea id="message" placeholder="输入内容..."&gt;&lt;/textarea&gt;

  &lt;button type="submit" class="button-primary"&gt;提交&lt;/button&gt;
&lt;/form&gt;

&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;姓名&lt;/th&gt;
      &lt;th&gt;年龄&lt;/th&gt;
      &lt;th&gt;城市&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;张三&lt;/td&gt;
      &lt;td&gt;25&lt;/td&gt;
      &lt;td&gt;北京&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;李四&lt;/td&gt;
      &lt;td&gt;30&lt;/td&gt;
      &lt;td&gt;上海&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

常用类与布局技巧

Milligram 提供了一些实用的类来控制布局和样式：

.container：居中内容，最大宽度为 800px，带内边距
.row 和 .column：使用弹性布局实现响应式栅格。例如，两个等宽列可以这样写：

<div class="row">
  <div class="column">左侧内容</div>
  <div class="column">右侧内容</div>
</div>

.button 和 .button-primary：按钮样式，主操作推荐用 button-primary
文本对齐：支持 .text-left、.text-center、.text-right
间距控制：Milligram 默认间距合理，如需调整可自定义 margin 或 padding

自定义与扩展

Milligram 样式极简，实际项目中可能需要补充一些自定义样式。建议创建一个额外的 CSS 文件进行覆盖：

/* custom.css */
.container {
  max-width: 960px;
}
<p>.highlight {
background-color: #f0f8ff;
padding: 1rem;
border-radius: 4px;
}</p>

然后在页面中引入：

<link rel="stylesheet" href="custom.css">

这样既能保留 Milligram 的简洁，又能灵活扩展。

基本上就这些。Milligram 适合想快速出效果又不想引入大框架的场景，搭配原生 HTML 和少量 CSS 就能做出清爽的页面。不复杂但容易忽略细节，比如 viewport 设置和语义化标签的使用，注意这些体验会更好。

本篇关于《CSSMilligram快速搭建简洁网页》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！