CSS 免费用：公众号排版 6 大绝美主题

原创 向阳乔木 2025 年 03 月 19 日 13:53

字数 1538，阅读大约需 8 分钟

1. 背景

月初推荐过一款公众号排版神器。

我自从用了这款工具，顺利开启爆更模式。

为什么？

因为再也不用为公众号排版发愁，只需要专注于内容，写完复制粘贴到公众号发布即可。

没用过的强烈推荐看这篇

【推荐】微信公众号排版神器 + AI Prompt 技巧，应群友要求创作，耗时 3 小时。

https://mp.weixin.qq.com/s/kYOQT2GvCcITZcgKKDd5zw

官方 GitHub
https://github.com/doocs/md

官网工具：
https://md.doocs.org/

为方便自己写作，也搭了一套。
https://md.qiaomu.ai/

我让 AI 帮修了图片上传 BUG，然后安利给了很多朋友。

只有一点遗憾，默认主题配色虽多，
但 H 标签样式全一样，所以看起来千篇一律。

另外，不少朋友反馈，默认字体偏小。
这其实有点冤，主题设置能调字号。
但如果还觉得小呢？

图片

好就好在，作者提供了自定义 CSS 模板。
无论字体大小，还是界面样式风格。

1.1 一切都可以自定义

2. 那我不懂 CSS 怎么办？

没关系，我已经通过跟 AI 讨论。

一口气设计了六个新 CSS 主题风格。
中国传统、科技公司、时尚简洁、赛博朋克等主题全都有。

你只需要复制粘贴即可。

2.1 给你展示下这些风格

2.2 中国传统

图片

2.3 超级简洁

图片

2.4 字节跳动

图片

2.5 赛博朋克

图片

2.6 鲜明对比

图片

3. 如何使用？

打开官网或我搭建的 Markdown 编辑器
https://md.qiaomu.ai/

  1. 点击右上角的设置
  2. 自定义 CSS 面板，选择开启

图片

  1. 创建新样式，复制粘贴提供的 CSS 代码

图片

4. 还不满意怎么办？

复制已有风格 CSS，发给 AI，让它修改。

重点关注 H1~H3、blockquote、p、strong 这几个标签样式。

这些最常用，足够的样式差异，会形成不一样的风格。

图片

比如今天这篇用的风格叫 Brutalism，AI 对话偶然发现，特点鲜明：

Important

  • 特点：原始、粗犷、结构化、高对比度
  • 色调：黑色、白色、鲜艳原色等

CSS 代码如下：

/* 顶层容器样式 */
container {
  text-align: left;
  line-height: 1.75;
  font-family: "Space Mono", "Courier New", monospace;
  color: #000;
  background: #fff;
  padding: 25px;
  border: 6px solid #000;
  max-width: 900px;
  margin: 0 auto;
}

/* 一级标题样式 - 移除旋转，保留粗犷感 */
h1 {
  display: block;
  padding: 0.8em;
  margin: 1.5em 0;
  color: #fff;
  font-size: 2em;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  background: #000;
  border: 4px solid #000;
  outline: 2px solid #ff0;
  position: relative;
  letter-spacing: -0.03em;
  box-shadow: 8px 8px 0 #000;
  /* 移除旋转 */
  transform: none;
}

h1::before {
  content: "///";
  position: absolute;
  transform: translateY(-15px);
  left: 10px;
  color: #f00;
  font-size: 1.2em;
}

/* 二级标题样式 - 移除旋转，保留结构感 */
h2 {
  display: block;
  padding: 0.6em 1em;
  margin: 1.8em 0 1.2em;
  color: #000;
  background: #ff0;
  font-size: 1.6em;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  border: 3px solid #000;
  /* 移除旋转 */
  transform: none;
  box-shadow: 6px 6px 0 #000;
  position: relative;
  z-index: 1;
}

h2::after {
  content: "";
  position: absolute;
  transform: translateY(8px);
  left: 8px;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    #000,
    #000 5px,
    transparent 5px,
    transparent 10px
  );
  z-index: -1;
  opacity: 0.08;
}

/* 三级标题样式 - 移除旋转，保持一致性 */
h3 {
  padding: 0.5em 1em;
  font-size: 1.3em;
  line-height: 1.4;
  border: 2px solid #000;
  background: #0ff;
  color: #000;
  margin: 1.5em 0 1em;
  font-weight: 700;
  text-transform: uppercase;
  /* 移除旋转 */
  transform: none;
  box-shadow: 4px 4px 0 #000;
}

/* 四级标题样式 - 黑白对比风格 */
h4 {
  margin: 1.5em 0 1em;
  color: #fff;
  background: #000;
  font-size: 1.1em;
  font-weight: 700;
  padding: 0.4em 1em;
  display: inline-block;
  border: 2px solid #000;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 #888;
  position: relative;
}

h4::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 50%;
  height: 2px;
  background: #ff0;
}

/* 5级标题样式 - 条纹风格 */
h5 {
  margin: 1.5em 0 1em;
  color: #000;
  background: repeating-linear-gradient(
    45deg,
    #fff,
    #fff 10px,
    #eee 10px,
    #eee 20px
  );
  font-size: 1.1em;
  font-weight: 700;
  padding: 0.4em 1em;
  display: inline-block;
  border: 2px solid #000;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 #000;
}

/* 四级标题样式 - 橙色警示风格 */
h6 {
  font-weight: 700;
}

/* 段落样式 - 简化边框 */
p {
  margin: 1em 0;
  color: #000;
  text-align: left;
  line-height: 1.7;
  background: #fff;
  padding: 0.5em;
  /* 移除边框，提高可读性 */
  border: none;
  font-family: "Courier New", monospace;
}

/* 引用样式 - 移除旋转，保持一致性 */
blockquote {
  font-style: italic;
  padding: 1.2em;
  border: 2px solid #000;
  color: #000;
  background: #ddd; /* 稍微淡化背景色 */
  margin: 1.5em 0;
  font-weight: 700;
  /* 移除旋转 */
  transform: none;
  box-shadow: 4px 4px 0 #000;
  position: relative;
}

/* 添加引用标记 */
blockquote::before {
  content: "!";
  position: absolute;
  left: -15px;
  transform: translateY(-50%);
  background: #000;
  color: #fff;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  font-style: normal;
  font-weight: bold;
}

/* 链接样式 - 简化设计 */
a {
  color: #f00;
  text-decoration: none;
  font-weight: 700;
  padding: 0 2px;
  border-bottom: 2px solid #f00;
  /* 移除背景色，提高可读性 */
  background: transparent;
  transition: all 0.2s ease;
}

a:hover {
  background: #f00;
  color: #fff;
}

/* 按钮样式 - 移除旋转，保持一致性 */
.button {
  display: inline-block;
  padding: 0.8em 1.5em;
  background: #f00;
  color: #fff;
  border: 3px solid #000;
  font-weight: 700;
  text-transform: uppercase;
  /* 移除旋转 */
  transform: none;
  box-shadow: 4px 4px 0 #000;
  transition: all 0.2s ease;
  cursor: pointer;
}

.button:hover {
  /* 简化悬停效果 */
  transform: translateY(-2px);
  box-shadow: 4px 6px 0 #000;
}

.button:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

/* 列表样式 */
ul, ol {
  margin: 1em 0;
  padding-left: 1.5em;
}

li {
  margin: 0.5em 0;
  padding-left: 0.5em;
}

/* 自定义项目符号 */
ul {
  list-style: none;
}

ul li {
  position: relative;
}

ul li::before {
  content: "■";
  color: #000;
  position: absolute;
  left: -1.2em;
  font-size: 0.8em;
}

/* 代码块样式 */
pre {
  background: #000;
  color: #0f0; /* 终端绿色 */
  padding: 1em;
  margin: 1.5em 0;
  border: 2px solid #000;
  font-family: "Space Mono", "Courier New", monospace;
  overflow-x: auto;
  box-shadow: 4px 4px 0 #888;
}

/* 行内代码样式 */
codespan {
  background: #eee;
  padding: 0.2em 0.4em;
  border: 1px solid #000;
  font-family: "Space Mono", "Courier New", monospace;
  font-size: 0.9em;
}

/* 表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  border: 2px solid #000;
}

th {
  background: #000;
  color: #fff;
  padding: 0.8em;
  text-align: left;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.05em;
}

td {
  padding: 0.8em;
  border: 1px solid #000;
}

tr:nth-child(even) {
  background: #eee;
}

/* 分割线样式 */
hr {
  height: 4px;
  background: #000;
  border: none;
  margin: 2em 0;
}

/* 图片样式 */
img {
  max-width: 100%;
  border: 3px solid #000;
  box-shadow: 5px 5px 0 #000;
  margin: 1em 0;
}

/* 强调文本 */
strong {
  background: #ff0;
  padding: 0 3px;
  font-weight: 700;
}

em {
  font-style: italic;
  text-decoration: underline;
}

5. 后记

任何你不擅长做的事情，都可以找 AI 来试试，说不定有惊喜。

但是，仍不能停止学习。

你了解的概念和知识越多，才能越能发挥你的 AI 调用力 或 “AI 领导力”，即让 AI 帮你干活儿的能力。

另外，因 CSS 文件太长，不全放出来。

如果想要其他风格完整样式代码。

点击关注"向阳乔木推荐看"公众号。

回复 “CSS” 获取。