效果图如上 ▲
Blog Template 使用者
1. 布局 - 添加小工具 - HTML/JavaScript
2. 把以下代码添加进去
Blogskin 使用者
1. 模板 - edit HTML
2. Ctrl + F 寻找代码 </style>
3. 在 </style> 下面添加以下代码
.b-musicbox {
position: fixed;
top: 0px;
left: 30px;
background: #eee;
color: #000;
font-family: tinytots;
font-size: 8px;
letter-spacing: 1px;
padding: 5px;
-webkit-transition-duration: .7s;
}
.b-musicbox:hover {
margin-top: -20px;
-webkit-transition-duration: .7s;
}
.b-musicbox:hover .playbox {
top: 3px;
-webkit-transition-duration: .7s;
}
.playbox {
position: fixed;
top: -30px;
left: 34px;
width: 50px;
padding: 3px;
border: 1px solid #ccc;
background: white;
overflow-x: hidden;
z-index: 1000;
-webkit-transition-duration: .7s;
}
<div class='b-musicbox'>HOVER HERE
<div class='playbox'>内容</div>
</div>
解释会分成两个部分来说，一个是 before hover, 另一个是 after hover 哦。
小解释
Before hover （灰色背景框）
紫色代码：小工具距离左边有多远 *改成right就会出现在部落格右手边哟
深紫代码：小工具背景色
浅蓝代码：HOVER HERE 字体颜色
浅蓝代码：HOVER HERE 字体颜色
蓝色代码：小工具多大，margin-top - 的号码就会越大，如果没有更改我预设的大小，这个就可以忽略喽 :)
After hover （灰色边框）
红色高亮：框框距离 top 有多远
橙色高亮：框框距离左边有多远 *改成right就会出现在部落格右手边哟
绿色高亮：边框种类、粗度（可参考框框的种类）
蓝色高亮：框框的背景色
红色代码：小工具内的内容
绿色代码：Before hover 的内容（HOVER HERE）*可自行更改
备注：
此款小工具适用于置放音乐播放器
如果想要置放其他小工具，如：欢迎词等等，可自行调整小工具的大小哟 :D
因为涉及更改小工具大小，代码上可能会出现错误，可以留言下大家的问题，会尽快回复 :)
After hover （灰色边框）红色高亮：框框距离 top 有多远
橙色高亮：框框距离左边有多远 *改成right就会出现在部落格右手边哟
绿色高亮：边框种类、粗度（可参考框框的种类）
蓝色高亮：框框的背景色
红色代码：小工具内的内容
绿色代码：Before hover 的内容（HOVER HERE）*可自行更改
备注：
此款小工具适用于置放音乐播放器 如果想要置放其他小工具，如：欢迎词等等，可自行调整小工具的大小哟 :D 因为涉及更改小工具大小，代码上可能会出现错误，可以留言下大家的问题，会尽快回复 :)Categories: Bii の語法筆記, 自創教程, 關於小工具
因为那个哈，真的好忙啊啊啊啊 （望天 看来我还是不适合参加那么多活动啥么的 叹 反正呢，现在手上还有两个 events, 忙完了就相对的轻松了，也可以开始为 final 努力一把了（握拳
）
但是，
）
接近考試的那幾天，我是整個人處於完全沒有 mood 的狀態，不想說話，不想吃東西，只想把自己關在房間裡讀書讀書再讀書。加上最近一直在忙著 event 的準備事宜，對於 test 1 的準備僅僅是約莫一個星期，但認真說起來，也只有幾天。
我要赚零花钱
我要打发时间
我要学习新的东西
