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- 鲜明对比

3- 如何使用？

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

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

3. 创建新样式，复制粘贴提供的 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%;
  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” 获取。

#前端开发 #CSS

#主题 #CSS #微信公众号 #排版

Cursor + MCP：一键克隆网站、自动调试错误上一篇

Yourware一键创建自己的 AI 编程作品集下一篇