Yong work skin Shi Xian - TheTarr

Chapter 1

zte！

啊？

你这家伙不是天天自称程序猿吗？告诉我怎么直接把 txt 变成微信聊天体！

俺没有哇TT！海淀小学生比俺会编程……不过经过摸索现在差不多能用啦！

aka您可能发现了，技术原因这套CSS并不能做到微信那样收放自如。因此内容很短的气泡有大段空白，看上去比较丑……

等等，啥是CSS？

佛曰授人以鱼不如授人以渔，简单了解CSS后，您可以在ao3上自己制作想要的格式！太长不看版请直接跳过本块。我们平常看的网页都由三个部分组成，HTML，CSS和JS。HTML负责写好所有的信息，就像一个朴实无华的txt。CSS负责给文字上色，改变字号，文段的布局、位置，就像您可以在word文档里对文字做的那样。JS负责交互，比如说您点击网页上的kudos按钮，JS就向后端发送数据，让zte喜加1~

才不给你加1呢！废话少说，到底怎么做才能在ao3实现这个样式？

请您看下个chapter~别慌！有些代码需要复制。只要您按步骤一步步来，保证没问题！

Chapter 2

Step1:

在个人主页左侧边栏找到 skins-> my work skins -> 右上角 create work skin

title随便填一个，然后在CSS大空白框里粘贴以下内容

#workskin .pad {
  margin: 0 auto;
  max-width: 800px;
}

#workskin .left {
  position: relative;
  word-break: break-word;
  display: table;
  float: left;
  background: rgb(247,241,206);
  border-radius: 4px;
  margin-left: 3%;
  margin-right: 40%;
  padding: 10px;
  min-width: 200px;
}

#workskin .right {
  position: relative;
  word-break: break-word;
  display: table;
  float: right;
  background: rgb(197,213,93);
  border-radius: 4px;
  margin-left: 40%;
  margin-right: 3%;
  padding: 10px;
  min-width: 200px;
}

#workskin .left:before,
#workskin .right:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  position: absolute;
  top: 8px;
}

#workskin .left:before {
  border-right: 16px solid rgb(247,241,206);
  left: -20px;
}

#workskin .right:after {
  border-left: 16px solid rgb(197,213,93);
  right: -20px;
}

点击 submit 提交成功！

Step2:

post new-> 随便把该填的都填了 -> 在 Associations 栏目找到 Select Work Skin -> 选择您刚刚创建好的 work skin

把您的聊天体，每方块为一段粘贴在 Chapter Text 中，右上角切换 rich text 再切回 HTML

每个段落之前出现了一个方块标签p。

需要您手动在每个开头标签p后面，右括号中间加上class属性。左边就加left，右边加right。格式为：

空格+class="left"

或者

空格+class="right"

就像这样（这里书名号代表英文尖括号，不然打不出来。注意引号是英文引号）

《p class="left"》左边人说的内容《/p》

《p class="right"》右边人说的内容《/p》

最后，请在所有内容之前，就是第一个p标签之前，添加一个div标签开头

《div class="pad"》《p class="left"》左边人说的内容《/p》

请在所有内容之后，也就是最后一个p标签之后，添加一个div标签结尾

《p class="right"》右边人说的内容《/p》《/div》

以chapter1为例（第一对p标签自动加的，不用管她们）

example

点击 post 提交，大功告成！

Step3:（以下为进阶内容）

聊天气泡效果是实现了……这个红色的“Step”又是怎么回事？

您只需要在 work skin 底下添加一段

#workskin .tomato{
color: tomato;
}

用的时候，在p后添加class="tomato"即可。别的颜色只要调整class名称和颜色，更多颜色请看 -> 前端入门天堂

Step4:（以下为进阶冒险小虎队内容）

还有的玩法是：

太阳系总共有几个行星？

css 代码如下：

#workskin .tooltip {
position: relative;
display: inline-block;
border: 2px solid black;
border-radius: 5px;
}

#workskin .tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}

#workskin .tooltip:hover .tooltiptext {
visibility: visible;
}

HTML代码如下（所有书名号改成英文尖括号）：
《div class="tooltip"》
《p》鼠标移过来看答案《span class="tooltiptext"》8个！冥王星被踢了TT《/span》《/p》
《/div》

Step5:（以下为进阶社畜内容）

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300
Cleveland	Brown	$250

没错朋友，列表单也是可以滴！不过我实在想不到怎么在同人文里用这个功能……

Step6:（以下为论坛体）

700-牛

只能笑一下了哈哈

灵魂De驾驭者

YES!让你跟我抢走道，人不行必须抢不着^^

700-牛

大哥我跟办托运的人说了，我说给你走道，你没听见别乱说

灵魂De驾驭者

你丫该

700-牛

些特

以下为css代码

#workskin .block {
margin: 0;
padding-left: 40px;
padding-right: 40px;
padding-top: 20px;
padding-bottom: 20px;
background: rgb(101,132,156);
outline: 1px solid rgb(242,147,115);
outline-offset: -15px;
}

#workskin .name {
padding-left: 10px;
color: rgb(242,147,115);
}

#workskin .contenent {
padding: 20px;
background: rgb(111,142,166);
color: rgb(247,239,210);
}

#workskin .icon {
border-radius: 30px;
width: 50px;
height: 50px;
}

#workskin .layer {
float: right;
padding-right: 10px;
padding-top: 30px;
color: rgb(242,147,115);
}

以下为HTML示例：

Preface

用 work skin 实现聊天气泡教程

Chapter 1

Chapter 2

Afterword