My imagination are strong enough for me to hold on.
Hello 2017

#Tutorial : Hover Status
Saturday 2 January 2016 @ 02:10


大家好呀
这是2016第一篇写的教程
也是第一篇用华语来写的教程
还真有点不习惯 



Live Preview

现在要分享给大家一个简单的部落格状态（如图）
字体，颜色，形状，大小，内容都可以更改哦



1.开模板⇒修改模板 HTML
2.按 Ctrl+F (苹果电脑按 Command+F)
3.找 </style>
4.把这些代码放在</style>前面
#statusholder {
    position: absolute;
    z-index: 9;
    top: 10px;
    left: 10px;
    width: 70px;
    padding: 0px;
}
#status {
    margin-top:18px;
    margin-left:150px;
    width: 70px;
    height: 20px;
    line-height: 16px;
    font-size: 9px;
    font-family: sans-serif;
    font-weight:200;
    text-transform: uppercase;
    overflow: hidden;
    text-align: center;
    letter-spacing: 1px;
    padding-top:5px;
    background: #e5e5ff;
    color: #fff;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
#status:hover {
    font-weight:200;
    width: 100px;
    height: 75px;
    font-size: 11px;
    overflow: auto;
    line-height: 12.5px;
    padding: 5px;
}
#status1 {
    margin-top:0px;
    margin-left:150px;
    width: 70px;
    height: 20px;
    line-height: 16px;
    font-size: 9px;
    font-family: sans-serif;
    font-weight:200;
    text-transform: uppercase;
    overflow: hidden;
    text-align: center;
    letter-spacing: 1px;
    padding-top:5px;
    background: #e5e5ff;
    color: #fff;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
#status1:hover {
    font-weight:200;
    width: 100px;
    height: 75px;
    font-size: 11px;
    overflow: auto;
    line-height: 12.5px;
    padding: 5px;
}
#status2 {
    margin-top:0px;
    margin-left:150px;
    width: 70px;
    height: 20px;
    line-height: 16px;
    font-size: 9px;
    font-family: sans-serif;
    font-weight:200;
    text-transform: uppercase;
    overflow: hidden;
    text-align: center;
    letter-spacing: 1px;
    padding-top:5px;
    background: #e5e5ff;
    color: #fff;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
#status2:hover {
    font-weight:200;
    width: 100px;
    height: 75px;
    font-size: 11px;
    overflow: auto;
    line-height: 12.5px;
    padding: 5px;
}

5.再按 Ctrl+F (苹果电脑按 Command+F)
6.找 <head>
7.把这些代码放在<head>后面</head>之间
<div id="statusholder">
<div id="status">
    题目<br>
内容
</div>
<div id="status1">
    题目<br>
内容
</div>
<div id="status2">
   题目<br>
内容
</div>
</div>


青色⇒字体颜色
粉色⇒背景颜色
靛色⇒题目
紫色⇒内容


有什么不明白的话，留言吧，我都会尽力帮你们解决 

Labels: