这个课程说复杂、不是很复杂
说简单、又不是很简单
所以希望你们用心看完每个步骤
我试过很多次都是成功的
失败了请注明哪里失败 谢谢
> 此课程乃博主亲手操刀、不允许转帖!
> 抄袭此课程者必定在部落格公开.
> 请勿盗图!
----------------------------------------------------------------------------------------------
BT / BS 皆可使用
BT 使用者 ;
⒈ 模板 >> 修改HTML >> Ctrl+F 寻找 ]]></b:skin>
⒉ 在 ]]></b:skin> 的上面添加代码*1*
⒊ 浏览、确定没有出现乱码,,保存.
⒋ 然后在 布局 >> 添加小工具 >> HTML/JavaScript 添加代码*3*
⒌ 保存
BS 使用者 ;
⒈ 模板 >> Ctrl+F 寻找 </style>
⒉ 在 </style> 的上面添加以下的代码*1*
⒊ 然后在任何你想要的地方添加代码*2*
⒋ 保存.
代码 *1*
.nav {
font-family: '????', cursive;
font-size:14px;
color:#000;
line-height:50px;
}
.pic{
display: inline-block;
margin-left:15px;
width: 60px;
height: 60px;
-webkit-transition:0.6s;
}
#in{
margin-top:-60px;
text-align:center;
background: #ffffff;
width: 65px;
height: 65px;
opacity: 0.2;
padding:3px;
-moz-transform: scale(0) rotate(0deg);
-webkit-transform: scale(0) rotate(0deg);
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;
}
.pic:hover #in{
opacity:0.9;
-moz-transform: scale(1) rotate(360deg);
-webkit-transform: scale(1) rotate(360deg);
-moz-transition: 0.6s;
-webkit-transition: 0.6s;}
Explain ;
粉色 highlight ; 页面的代码 [ 字体美化 & 效果 ]
粉橘 highlight ; 图案的代码
粉黄 highlight ; 旋转出来页面的代码
浅青字体 ; 字体名字 [ 可查阅 这篇 ]
中青字体 ; 字体大小
深青字体 ; 字体颜色
青色字体 ; 字体的位置 [ 可高可低 ]
橙色字体 ; 横排 ( inline-block ) / 直排 ( block )
橘色字体 ; 距离左边的位置 [ left / right = 横排 ,, top / bottom = 直排 ]
黄色字体 ; 旋转出来页面距离图案的高 [ 依据 .pic{...} 的 height 来调 ]
深黄字体 ; 背景颜色 [ 灰色 / 白色最佳 ]
水蓝字体 ; 透明度
蓝色字体 ; 旋转度 [ 可更改 ]
* width & height 可自行更改、
更改了width & height ,, margin 代码自然要修改哦 *
----------------------------------------------------------------------------------------------
代码*2*
<div class="pic"><img src=" 图案direct link " width="70" height="70" />
<div id="in"><a class="nav"
onClick="document.getElementById('main').innerHTML=document.getElementById(' 页面ID ').innerHTML" title="">显示字体</a></div></div>
Explain ;
橙色字体 ; 高 & 宽
红色字体 ; 有些bs 的是 main 有些是post . 因BS而异 [ 亲们要pandai pandai 看清楚是什么哦 ]
在帖子代码里可找到
蓝色字体 ; 页面ID [ BS的每个页面都有专属的代码 如: about ,, entry ,, post 等等 ]
{ highlight 处 的 <div id=" xxxx "> ,, 通常都在post title 的上面 }
----------------------------------------------------------------------------------------------
代码*3*
<div class="pic"><img src=" 图案direct link " width="70" height="70" />
<div id="in"><a class="nav" href="页面网址" title="">显示字体</a></div></div>
Explain ;
橙色字体 ; 高 & 宽
----------------------------------------------------------------------------------------------
Extra ;
- 如果要鼠标指着页面时是另一个鼠标的话,,可以在 nav {...} 里面添加这个代码
cursor:url( 鼠标url );- 如果要指着页面时有出现小题目/标题
可以在代码②/③ 的title添加你要的字. [ 青色字体 ]
- nav {...} 里面的效果可自行更改
- 若要更出众可以增加 border-radius ,, border ,, shadow 等等.
----------------------------------------------------------------------------------------------
课程完毕、
如果有哪里不明白可以再此帖子留言询问
Cbox 询问将不回复哦 :)
就这样,,祝你们成功 ;)
{{ Tutorial writed by BabeX eling ,, 2013 / 03 / 26 . }}
