Actions

Work Header

用 work skin 实现聊天气泡教程

Chapter Text

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:(以下为进阶冒险小虎队内容)

还有的玩法是:

太阳系总共有几个行星?

 

 

鼠标移过来看答案
(手机端点一下)8个!冥王星被踢了TT

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:(以下为论坛体)

1L

700-牛

只能笑一下了哈哈

2L

灵魂De驾驭者

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

3L

700-牛

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

4L

灵魂De驾驭者

你丫该

5L

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示例: