教程 | 特别的 Status Bar (BT/BS)

十一月 23, 2021 | views
Comments 0
教程 | 特别的 Status Bar (BT/BS) - Before - - After - Blog Template 使用者 类型 ① - Bar type Status 1. 设计→ 修改 HTML 2. Ctrl + F 寻找代码 ]]/b:skin 3. 在 ]]/b:skin 上面添加以下代码： #context{ position: fix

教程 | 特别的 Status Bar (BT/BS)


- Before -

- After -
Blog Template 使用者
类型 ① - Bar type Status
1. 设计 → 修改 HTML

2. Ctrl + F 寻找代码 ]]></b:skin>

3. 在 ]]></b:skin> 上面添加以下代码：
#context{
position: fixed;
left: 40px;
top: 80px;
background: #fff; 
color: #888;
padding: 5px;
opacity:0;
overflow: hidden;
text-align: justify;
-webkit-transition: .5s;
-moz-transition: .5s
}

.status{
text-align: center;
width: 200px;
background: #fecdc9;  
border: 1px dotted #eee;
font: 8px arial;
padding: 3px;
opacity: 0.6; 
text-shadow: 1px 1px 1px #fff;
}

.status:hover #context{
-webkit-transition:width .2s,height .5s .2s,opacity .5s;
opacity: .8;
left: 40px;
width: 190px;
height: 50px;
}

#in{
position: fixed;
left: 35px;
top: 60px;
}
小解释
紫色代码：内容的位置（距离左边）
紫色代码：内容的位置（距离上边）
紫色代码：内容背景色
紫色代码：内容字体颜色
蓝色代码：Status Bar 的位置（center / left / right）
蓝色代码：Status Bar 的宽度
蓝色代码：Status Bar 的背景色
蓝色代码：Status Bar 边框的种类、颜色、粗度
蓝色代码：Status Bar 的字体大小、类型
红色代码：Hover 时内容的位置（距离左边）
红色代码：Hover 时内容的宽度
红色代码：Hover 时内容的高度
青色代码：Hover 时内容的位置（距离上边）*若将 status bar 往下移，px 会变大

4. 保存起来。到设计 → 页面元素 → 添加小工具 → HTML/JavaScript

5. 添加以下代码：
<div id="in">
<div class="status">Status Here.
<div id="context">
<div style="font-family: arial; font-size:8px; color: #757575;">
内容
</div>
</div></div></div>
小解释
紫色代码：Status Bar 里显示的字（图片）
紫色代码：内容的字体类型
紫色代码：内容的字体大小
紫色代码：内容的字体颜色
紫色代码：内容显示的字

类型 ② - Image type Status
注：步骤完全一样，只是一些代码需要修改，例子：将教程 ① 的.status 改成以下的代码。
更改一 -
.status {
width:200px;
font-family: arial;
font-size: 8px;
padding:3px;
text-shadow: 1px 1px 1px #fff;
}
更改二 -
<div id="in">
<div class="status"><img src="http://img.juhife542d.com图片网址">
<div id="context">
<div style="font-family: arial; font-size:8px; color: #757575;">
内容
</div>
</div></div></div>

Blogskin 使用者
1. 模板 → 修改 HTML

2. Ctrl + F 寻找代码 </style>, 然后将以下代码加入：

#context{
position: fixed;
left: 40px;
top: 80px;
background: #fff;
color: #888;
padding: 5px;
opacity:0;
overflow: hidden;
text-align: justify;
-webkit-transition: .5s;
-moz-transition: .5s
}
.status{
text-align: center;
width: 200px;
background: #fecdc9;
border: 1px dotted #eee;
font: 8px arial;
padding: 3px;
opacity: 0.6;
text-shadow: 1px 1px 1px #fff;
}
.status:hover #context{
-webkit-transition:width .2s,height .5s .2s,opacity .5s;
opacity: .8;
left: 40px;
width: 190px;
height: 50px;
}
#in{
position: fixed;
left: 35px;
top: 60px;
}

3. 然后在 <body> 下面，添加以下代码：

<div id="in">
<div class="status">Status Here.<div id="context">
<div style="font-family: arial; font-size:8px; color: #757575;">
内容</div>
</div></div></div>

注：Image Type Status 于 BS 者来说，是一样的步骤 =]

曰：
这个教程对于新手来说，或许有点复杂。其实仔细的去学的话，很简单而已。还有，另外那些美化的代码可以自己添加，不一定要跟着原本的，可以自己美化起来。如有任何不明白，欢迎你留言，我会尽量帮你的。Kamsa ♥

Categories: Bii の语法笔记, 关于小工具
美食家dbtag  

相关文章: