; Elaine0211
#navbar-iframe {display: none;}
body{
background:#D5F5E3;
font:13px ekarla;
line-height:1.3;
color:#aca69a;
cursor: url(https://i.imgur.com/J4f5nY5.png), progress;}
::-moz-selection {
background:#aca69a;
color:#fff;}
::selection {
background:#aca69a;
color:#fff;}
::-webkit-scrollbar {width:7px;}
::-webkit-scrollbar-button:start:decrement{height:5px; display:block; background:none;}
::-webkit-scrollbar-button:end:increment{height:5px; display: block; background:none;}
::-webkit-scrollbar-track-piece {background-color:#D5F5E3;}
::-webkit-scrollbar-thumb{ background:#fff ;}
a:link,a:visited {
background-image: url(https://imgur.com/ezmTdwc.gif);
background-size:100px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-decoration:none;
-webkit-transition: .3s;
-moz-transition: .3s;}
a:hover {
-webkit-transition: .3s;
-moz-transition: .3s;
cursor: url(https://i.imgur.com/hDbujhU.png), progress;}
b{text-decoration:bold; }
u{
text-decoration:underline;
border-bottom:1px dotted #dae2e3;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}
u:hover{
border-bottom:1px dashed #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}
i{-webkit-transition: .4s;}
i:hover{letter-spacing:2px;-webkit-transition: .4s;}
/* blockquote
----------------------------------------------- */
blockquote {
font-size:10px;
padding: 5px 15px;
background:#D5F5E3;
border:6px solid #fff;
outline: 2px solid #D5F5E3;
-webkit-transition: .4s;
-moz-transition: .4s;}
blockquote:hover {
background:#ABEBC6;
outline: 2px solid #ABEBC6;
-webkit-transition: .4s;
-moz-transition: .4s;}
/* post
----------------------------------------------- */
#title{
background:#D5F5E3;
line-height: 15px;
padding:2px 4px;
padding-left:20px;
height: 15px;
text-align:left;
border-radius:3px;}
.date{
background:#fff;
border:1px solid #D5F5E3;
font-size:10px;
letter-spacing:1px;
line-height: 15px;
padding:2px 4px;
height: 13px;
width:210px;
margin-top: -19px;
float:right;
text-align:center;
border-radius:3px;}
.on{
font-size:11px;
text-align:center;
color:#aca69a;}
.on a{-webkit-background-clip: none; -webkit-text-fill-color: #aca69a;}
/* other
----------------------------------------------- */
tu {
text-shadow:8px 0 #fff, -8px 0 #fff;
-webkit-transition: all 0.6s;}
tu:hover{
color:#fff;
text-shadow: -1px 0 #bad4e1, 0 1px #bad4e1, 1px 0 #bad4e1, 0 -1px #bad4e1;
-webkit-transition: all 0.6s;}
ma {
padding:2px;
border-radius:2px;
background:#bad4e1;
color:#fff;
-webkit-transition: all 0.6s;}
ma:hover {
color:#dae2e3;
background:#fff;
-webkit-animation: flash 0.8s linear;
-moz-animation: flash 0.8s linear;
-ms-animation: flash 0.8s linear;
animation: flash 0.8s linear;}
@-webkit-keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0.2;}
}
@keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0.2;}
}
mt {
color:#fff;
font-style:bold;
padding:3px;
text-shadow: -1px 0 #aca69a, 0 1px #aca69a, 1px 0 #aca69a, 0 -1px #aca69a;}
/* links
----------------------------------------------- */
a.li {
-webkit-background-clip: none;
-webkit-text-fill-color: #aca69a;
text-align:center;
border:1px solid #bad4e1;
padding: 2px;
display:inline-block;
width:100px;
margin: 2px;
background: #fff;
overflow: hidden;}
a.li > span {display:inline-block; padding: 2px 0;}
a.li:hover > span:nth-child(odd) {
-webkit-animation: anim-nanuk-1 0.5s forwards;
animation: anim-nanuk-1 0.5s forwards;}
a.li:hover > span:nth-child(even) {
-webkit-animation: anim-nanuk-2 0.5s forwards;
animation: anim-nanuk-2 0.5s forwards;}
a.li:hover > span:nth-child(odd), a.li:hover > span:nth-child(even) {
-webkit-animation-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
transition-animation-function: cubic-bezier(0.75, 0, 0.125, 1);}
@-webkit-keyframes anim-nanuk-1 {
0%,100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);}
49% {
opacity: 1;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);}
50% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
color: inherit;}
51% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
color: #fff;}
100% {color:#ccc;}
}
@keyframes anim-nanuk-1 {
0%,
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);}
49% {
opacity: 1;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);}
50% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
color: inherit;}
51% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
color: #fff;}
100% {color:#ccc;}
}
@-webkit-keyframes anim-nanuk-2 {
0%,100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);}
49% {
opacity: 1;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);}
50% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
color: inherit;}
51% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
color: #fff;}
100% {color:#ccc;}
}
@keyframes anim-nanuk-2 {
0%,100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);}
49% {
opacity: 1;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);}
50% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
color: inherit;}
51% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
color: #fff;}
100% {color:#ccc;}
}
a.li:hover > span:nth-child(1) {-webkit-animation-delay: 0s;animation-delay: 0s;}
a.li:hover > span:nth-child(2) {-webkit-animation-delay: 0.05s;animation-delay: 0.05s;}
a.li:hover > span:nth-child(3) {-webkit-animation-delay: 0.1s;animation-delay: 0.1s;}
a.li:hover > span:nth-child(4) {-webkit-animation-delay: 0.15s;animation-delay: 0.15s;}
a.li:hover > span:nth-child(5) {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}
a.li:hover > span:nth-child(6) {-webkit-animation-delay: 0.25s;animation-delay: 0.25s;}
a.li:hover > span:nth-child(7) {-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}
a.li:hover > span:nth-child(8) {-webkit-animation-delay: 0.35s;animation-delay: 0.35s;}
a.li:hover > span:nth-child(9) {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}
a.li:hover > span:nth-child(10) {-webkit-animation-delay: 0.45s;animation-delay: 0.45s;}
a.li:hover > span:nth-child(11) {-webkit-animation-delay: 0.5s;animation-delay: 0.5s;
}
/* navi
----------------------------------------------- */
.maintitle{
background-color:#fff;
padding:15px;
text-align:center;
width:700px;
height:80px;
margin-left:200px;
margin-top:-2px;
font:32px ehands;
line-height:0.1;
}
.header {
background-color:#D5F5E3;
padding: 15px;
text-align: center;
width:700px;
height:90px;
border-radius:3px;
margin-left:200px;
margin-top:0px;
font-size:14px;
letter-spacing: 1px;
word-spacing: 1px;
text-transform: uppercase;
}
#navibar {
overflow: hidden;
background-color: #fff;
border-radius:3px;
width:140px;
padding:5px;
margin-left:200px;
}
#navibar a {
float: left;
margin-left:-10px;
width: 140px;
display: block;
background-image: none;
-webkit-background-clip: text;
-webkit-text-fill-color: #aca69a;
font-size:12px;
text-align: center;
padding: 10px;
text-decoration: none;
letter-spacing: 1px;
word-spacing: 1px;
border-bottom:2px solid #D5F5E3;
}
#navibar .mine {position: relative; }
#navibar .mine img {
width: 110px;
height: 110px;
border-radius:100px;
float:center;
margin-top:-3px;}
#navibar a:last-child {
margin-bottom: 0px;
border-bottom: 0px solid #fff; }
#navibar a:hover {
background-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: #ddd; }
.sticky {
position: fixed;
top: 0px;
width: 100%;}
.sticky .content {
padding-top: 0px;}
.content{
width:540px;
background:#fff;
border-radius:3px;
padding:10px;
padding-bottom:20px;
margin-top:-317px;
bottom:40px;
left:370px;
position:relative;}
#main{
width:auto;
background:#fff;
margin-top:-28px;}
@font-face {
font-family: "etiny";
src: url('https://dl.dropbox.com/s/d8j5u8ksqhcve4e/tiny.ttf'); }
@font-face {
font-family: "ekarla";
src: url('https://dl.dropbox.com/s/zju7lx23vq3qlla/Karla-Regular.ttf');}
@font-face {
font-family: "ehands";
src: url('https://dl.dropbox.com/s/d4rgrtrc139hvg7/HandsOn-Regular.ttf');}
Say Cheese!
# 课程 ; 编辑Bs模板 1
这个课程 是给对BS运用还不熟悉的藽咕
当然所有的代码都是依据我的经验而写
失误指数应该很少 毕竟现在打出来的代码都是从我旧的模板拿出来的
既然以前的设计都没问题 那代码应该也没问题才对
当然 我也不确定几时会写比较复杂一点的
所以你们就去bs.com找skin 然后自己摸索吧
不罗嗦 开始课程咯 :)
> 此课程乃博主亲手操刀、不允许转帖!
> 抄袭此课程者必定在部落格公开.
> 请勿盗图!
----------------------------------------------------------------------------------------------
今天先给个基本的bs 模板
可以查看我的 代码部落格
没有什么很 "隆重" 的effect 就简单的有post & post-title
在<style type="text/css"> 和 </style>之间添加任何你要的代码
就如基本的 body {...} .post-body{...} .post-title{...} 等等
当然你也可以加highlight的代码 & scrollbar 的代码
只要你喜欢 XD
Extra ; 如果你要整片只有code
就可以把 width & height 放100%
post-title ,, top & left 那些就可以不用放了
最后呢 ,, 在</style> 的下面添加 blogger 代码
<blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div> ←post-title的代码 ( 不要可以删掉 )
<div class="post-body"> ← post 的代码 ( post 的border 那些 ,, 不要可以删掉 )
<p>
<$BlogItemBody$> ← 帖子的代码 ( 必要! )
</p>
</div>
</blogger>
你添加代码进模板的时候 记得要把箭头的字删掉啊!
好了之后 只要在发布帖子的地方 直接打出你要显示的内容就ok 啦!!
Extra : 如要是要代码的话 就不要在HTML mode 打出代码
不然你的代码将会变成模板形式的
![]()
最后只要按发布就可以啦 :P
----------------------------------------------------------------------------------------------
课程完毕、
如果有哪里不明白可以再此帖子留言询问
Cbox 询问将不回复哦 :)
{{ Tutorial writed by BabeX eling ,, 2014 / 02 / 03 . }}
标签： 分享, 教學課程, Blogskin
# 课程 ; 编辑Bs模板 1 ♥
这个课程 是给对BS运用还不熟悉的藽咕
当然所有的代码都是依据我的经验而写
失误指数应该很少 毕竟现在打出来的代码都是从我旧的模板拿出来的
既然以前的设计都没问题 那代码应该也没问题才对
当然 我也不确定几时会写比较复杂一点的
所以你们就去bs.com找skin 然后自己摸索吧
不罗嗦 开始课程咯 :)
> 此课程乃博主亲手操刀、不允许转帖!
> 抄袭此课程者必定在部落格公开.
> 请勿盗图!
----------------------------------------------------------------------------------------------
今天先给个基本的bs 模板
可以查看我的 代码部落格
没有什么很 "隆重" 的effect 就简单的有post & post-title
在<style type="text/css"> 和 </style>之间添加任何你要的代码
就如基本的 body {...} .post-body{...} .post-title{...} 等等
当然你也可以加highlight的代码 & scrollbar 的代码
只要你喜欢 XD
Extra ; 如果你要整片只有code
就可以把 width & height 放100%
post-title ,, top & left 那些就可以不用放了
最后呢 ,, 在</style> 的下面添加 blogger 代码
<blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div> ←post-title的代码 ( 不要可以删掉 )
<div class="post-body"> ← post 的代码 ( post 的border 那些 ,, 不要可以删掉 )
<p>
<$BlogItemBody$> ← 帖子的代码 ( 必要! )
</p>
</div>
</blogger>
你添加代码进模板的时候 记得要把箭头的字删掉啊!
好了之后 只要在发布帖子的地方 直接打出你要显示的内容就ok 啦!!
Extra : 如要是要代码的话 就不要在HTML mode 打出代码
不然你的代码将会变成模板形式的
![]()
最后只要按发布就可以啦 :P
----------------------------------------------------------------------------------------------
课程完毕、
如果有哪里不明白可以再此帖子留言询问
Cbox 询问将不回复哦 :)
{{ Tutorial writed by BabeX eling ,, 2014 / 02 / 03 . }}
标签： 分享, 教學課程, Blogskin
