Actions

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
中文-普通话 國語
Stats:
Published:
2026-06-27
Updated:
2026-06-27
Words:
941
Chapters:
1/2
Comments:
6
Kudos:
20
Bookmarks:
6
Hits:
268

AO3浏览器文章皮肤

Summary:

预览、CSS与HTML。

含默认字体（宋体、衬线、Times New Roman、Georgia）、浏览器页面、标题标签、点赞收藏评论显示和版权说明。可自适应窗口大小。

最近更新：20260629

Notes:

使用方法：Work Skins直接粘贴CSS。相应作品选择该皮肤，在需要使用的地方粘贴HTML并根据实际需要调整。不需要的地方还是正常输入就可以啦。

1. HTML部分，【黑框】都是可替换的内容。
2. CSS可调节元素大小、字号等；不需要的元素可在HTML删掉就不会显示了。例如不需要头像，就把avatar相关的代码都删掉。
3. 设备没有字体会自动替换成其他的。也可自行修改font-family。
4. 【图片地址】必须是以.jpg/.png/.jpeg等格式结尾。可直接用网上这类格式的图，也可先把图片上传Internet Archive（https://archive.org/）等公共存储网站，然后复制地址。注意版权哦。

有任何问题可以留言🤲之后可能会更新可以显示评论的版本。

(See the end of the work for more notes.)

Chapter 1

Chapter Text

  ●●●   ‹   ›   ↻   【搜索栏网址】☆   ⌂   ⋮

【文章名称】

【编号 No.】 ｜ 【时间】 ｜ 【已编辑】

  【#标签】   【#标签】   【#标签】

avatar

【正文】

【图片名称（不显示）】

【图片名称】

【正文】

收藏(111) 点赞(111) 评论(111)

*仅供站内阅读，请勿复制、搬运或截图外传。

【（版权说明）名称】 Archive © 2026

 

 

【CSS】

#workskin .browser-post {
  width: 98%;
  max-width: 760px;
  margin: 0.8em auto 1.8em auto;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  background: #ededed;
  color: inherit;
  overflow: hidden;
}

#workskin .browser-top {
  margin: 0;
  padding: 0.34em 0.7em;
  border-bottom: 1px solid #d8d8d8;
  background: #ededed;
  white-space: nowrap;
  line-height: normal;
}

#workskin .browser-top p {
  margin: 0;
  padding: 0;
  height: 2.85em;
  line-height: normal;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
}

#workskin .browser-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.28em;
  line-height: 1;
  flex: 0 0 auto;
}

#workskin .dot-red,
#workskin .dot-yellow,
#workskin .dot-green {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  font-size: 1em;
  line-height: 1;
  color: transparent;
  vertical-align: middle;
}

#workskin .dot-red {
  background: #dd746a;
  margin-right: 0.34em;
}

#workskin .dot-yellow {
  background: #d7bb5e;
  margin-right: 0.34em;
}

#workskin .dot-green {
  background: #82ad78;
  margin-right: 0;
}

#workskin .browser-nav,
#workskin .browser-home,
#workskin .browser-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.96em;
  height: 1.08em;
  margin: 0;
  color: #6f6f6f;
  font-size: 1.36em;
  line-height: 1;
  flex: 0 0 auto;
}

#workskin .browser-back {
  transform: translateY(-0.02em);
}

#workskin .browser-forward {
  margin-left: 0.03em;
  transform: translateY(-0.02em);
}

#workskin .browser-reload {
  margin-left: 0.06em;
  font-size: 1.25em;
  transform: translateY(-0.05em);
}

#workskin .browser-address {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  box-sizing: border-box;
  margin-left: 0.42em;
  margin-right: 0.36em;
  padding: 0.28em 0.68em 0.3em 0.68em;
  min-height: 2.12em;
  border: 1px solid #d2d2d2;
  border-radius: 999px;
  background: #ffffff;
  color: #6f6f6f;
  font-size: 0.88em;
  line-height: 1.35;
  overflow: hidden;
  white-space: nowrap;
}

#workskin .browser-url {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
  padding-bottom: 0.04em;
}

#workskin .browser-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.38em;
  color: #999;
  font-size: 1.12em;
  font-weight: normal;
  line-height: 1;
  flex: 0 0 auto;
  transform: translateY(-0.01em);
}

#workskin .browser-home {
  margin-left: 0;
  font-size: 1.3em;
  transform: translateY(-0.03em);
}

#workskin .browser-menu {
  margin-left: 0.14em;
  color: #777;
  font-size: 1.4em;
  transform: translateY(-0.02em);
}

#workskin .forum-header {
  position: relative;
  padding: 1em 6.5em 0.65em 1.3em;
  border-bottom: 1px solid #e0e0e0;
  background: #f8f8f8;
  overflow: hidden;
}

#workskin .forum-head-left {
  display: block;
  width: auto;
}

#workskin .forum-avatar {
  position: absolute;
  right: 1.3em;
  top: 50%;
  width: 4.4em;
  height: 4.4em;
  margin-left: 0;
  margin-top: -2.2em;
  border: 1px solid #d6d6d6;
  background: #eeeeee;
  overflow: hidden;
}

#workskin .forum-avatar p {
  margin: 0;
  padding: 0;
  line-height: 0;
}

#workskin .forum-avatar img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}

#workskin .forum-title {
  margin: 0.2em 0 0.2em 0;
  font-size: 1.5em;
  color: #333;
  font-weight: bold;
  line-height: 1.35;
}

#workskin .forum-meta {
  margin: 0;
  font-size: 0.86em;
  color: #888;
  line-height: 1.35;
}

#workskin .forum-tags {
  margin: 0.45em 0 0 0;
  font-size: 0.86em;
  line-height: 1.35;
}

#workskin .forum-tag-hash {
  display: inline-block;
  margin: 0 0.85em 0.2em 0;
  color: #6f7f8f;
  font-weight: normal;
}

#workskin .forum-body {
  padding: 1.5em 1.5em 1em 1.5em;
  background: #ffffff;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

#workskin .forum-body p:not(.forum-actions) {
  font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
}

#workskin .forum-body p {
  margin: 0 0 1.5em 0;
  text-align: justify;
  text-justify: inter-ideograph;
}

#workskin .responsive-img {
  width: 70%;
  max-width: 70%;
  height: auto;
  display: block;
  margin: 1.5em auto;
}

#workskin .forum-body p.forum-img-caption {
  margin: -0.8em 0 1.5em 0;
  text-align: center;
  text-justify: auto;
  color: #777;
  font-size: 0.86em;
  line-height: 1.35;
  font-weight: normal;
  font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
}

#workskin .forum-body p:last-child {
  margin-bottom: 0;
}

#workskin .forum-body p.forum-actions {
  margin: 2em 0 0 0;
  text-align: right;
  text-justify: auto;
  color: #777;
  font-size: 0.86em;
  line-height: 1.25;
  font-weight: bold;
}

#workskin .forum-action {
  display: inline;
  margin-left: 1.1em;
}

#workskin .forum-footer {
  padding: 0.42em 1.5em;
  border-top: 1px solid #e0e0e0;
  background: #f8f8f8;
  color: #777;
  font-size: 0.86em;
  line-height: 1.25;
}

#workskin .site-note,
#workskin .site-mark {
  color: #999;
  font-size: 0.86em;
  line-height: 1.2;
  text-align: right;
  font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
}

#workskin .site-note {
  margin: 1em 0 0.25em 0;
}

#workskin .site-mark {
  margin: 0 0 1em 0;
}

 

 

【HTML】

<div class="browser-post"><div class="browser-top">

<p>
  <span class="browser-dots"><span class="dot-red">●</span><span class="dot-yellow">●</span><span class="dot-green">●</span></span>
  <span class="browser-nav browser-back">‹</span>
  <span class="browser-nav browser-forward">›</span>
  <span class="browser-nav browser-reload">↻</span>
  <span class="browser-address"><span class="browser-url">【搜索栏网址】</span><span class="browser-star">☆</span></span>
  <span class="browser-home">⌂</span>
  <span class="browser-menu">⋮</span>
</p></div><div class="forum-header"><div class="forum-head-left">

<p class="forum-title">【文章名称】</p>

<p class="forum-meta">【编号 No.】 ｜ 【时间】 ｜ 【已编辑】</p>

<p class="forum-tags">
  <span class="forum-tag-hash">【#标签】</span>
  <span class="forum-tag-hash">【#标签】</span>
  <span class="forum-tag-hash">【#标签】</span>
</p></div><div class="forum-avatar">

<p><img src="【头像链接（需要是.png/.jpg/.jpeg等图像后缀）】" alt="avatar"></p></div></div><div class="forum-body">

<p>【正文】</p>

<p><img class="responsive-img" width="70%" src="【图片地址】" alt="【图片描述】"></p>
<p class="forum-img-caption">【图片名称】</p>

<p>【正文】</p>

<p class="forum-actions"><span class="forum-action">【收藏(111)】</span> <span class="forum-action">【点赞(111)】</span> <span class="forum-action">【评论(111)】</span></p></div><div class="forum-footer">

<p class="site-note">【*仅供站内阅读，请勿复制、搬运或截图外传。】</p>

<p class="site-mark">【（版权说明）名称】 Archive © 2026</p></div></div>

Notes:

20260629 更新了图片HTML，可调节缩放大小。