Chapter Text
这是一个标题
Chapter 1
公元 30,000年
公主塞尔达末代去世后的第一百年
秋季的第三个月
-
公元 30,000年
公主塞尔达末代去世后的第一百年
秋季的第三个月
罗恩
公元 10,302年
解放者塞尔达女王统治元年
春季的第三个月
沃尔夫
公元 11,669年
复兴者塞尔达女王统治第十七年
春季的第二个月
阿德勒
公元 10,572年
海盗纪元第432年
夏季的第二个月
露西尔
HTML
<p class="goldtitle" align="center"><strong>Chapter 1</strong></p>
<p class="blueheader" align="right"><strong>公元 30,000年</strong></p>
<p class="blueheader" align="right"><strong>公主塞尔达末代去世后的第一百年</strong></p>
<p class="blueheader" align="right"><strong>秋季的第三个月</strong></p>
<p class="blueheader5" align="right"><strong>公元 30,000年</strong></p>
<p class="blueheader5" align="right"><strong>公主塞尔达末代去世后的第一百年</strong></p>
<p class="blueheader5" align="right"><strong>秋季的第三个月</strong></p>
CSS
/*用于定义金色题头样式，是文本里那个不是系统自带的那个Chapter标题*/
#workskin .goldtitle {
color: #f2be54;
font-weight: bold;
font-size: 30px;
font-family: Georgia,Times,Times New Roman,serif;
text-align: center;
text-shadow: -1px 1px 3px #191a1d, 1px -1px 3px #191a1d;
transform: skewY(-.3deg);
}
/*用于定义第一种蓝色的题头样式，带有金色的小边*/
#workskin .blueheader {
text-shadow: 1px 1px 2px black, -1px -1px 4px #191a1d;
color: #489ab8;
font-size: 1.1em;
font-family: Georgia,Times,Times New Roman,serif;
border-radius: 2px;
border-right: 10px solid #fad384;
padding-right: 15px;
padding: 11px;
transform: skewY(-.5deg);
margin: 0px auto;
}
/*用于定义第一种蓝色题头样式的悬停效果，可以看到右边的金色小边上会有一个亮金色的突出显示*/
#workskin .blueheader:hover {
border-right: 10px solid #feff4d;
}
/*用于定义第二种蓝色题头样式，与第一种的区别是金色小边的样式，加了一个阴影偏移*/
#workskin .blueheader5 {
text-shadow: 1px 1px 2px black, -1px -1px 4px #191a1d;
color: #489ab8;
font-size: 1.1em;
font-family: Georgia,Times,Times New Roman,serif;
border-radius: 2px;
border-right: 10px solid #fad384;
padding-right: 15px;
padding: 10px;
background: linear-gradient(90deg, #1d718200 98%, rgba(242,190,84,1) 100%);
transform: skewY(-.3deg);
margin: 0px auto;
}
/*以下是一堆分界线样式，具体不多说了可以参考这个，但是在那个作品里没有悬停设置*/
#workskin hr {
background: linear-gradient(90deg, rgba(50,190,196,0) 0%, rgba(50,190,196,1) 34%, rgba(50,243,255,1) 70%, rgba(50,190,196,0.47383720930232553) 93%, rgba(75,190,196,0) 100%);
height: 3px;
border: none;
width: 100%;
}
#workskin hr:hover {
background: linear-gradient(90deg, rgba(75,190,196,0) 0%, rgba(75,190,196,1) 34%, rgba(12,243,255,1) 70%, rgba(75,190,196,0.47383720930232553) 93%, rgba(75,190,196,0) 100%);
}
#workskin .hr {
height: 30px;
width: 250px;
max-width: 100%;
background-image: URL(https://archive.org/download/Kooloolimpah/Kooloolimpah.png);
border: 0;
position: sticky;
top: 0;
}
#workskin .hry {
height: 30px;
width: 250px;
max-width: 100%;
background-image: URL(https://archive.org/download/kooloolimpah-y/KooloolimpahY.png);
border: 0;
}
/*值得注意的是：hr与.hr并不是一个东西，前者是块级元素，后者只是前者下的一个class元素（完整写法为：hr.hr），需要在使用hr的时候另外调用；并且由于hr定义的分割线高度过小，无法触发悬停手势。*/