; Elaine0211
HOME TUTORIALS MATERIALS LINKS FOLLOW CHATBOX

# 课程; 指着图案时有页面出现 (BS)
2012/10/19 22:21 ♥ 1 SARANG(s)


Tutorials Require By Hue Peng.

原本想要连Blog Template 的方法一起放出来
不过我还没研究出语法 @@
加上考试时期没啥时间研究 ><
不过待考试完毕我一定更新 Blog Template的语法给你们 /.\
前提; 要我研究到了才能更新哦 >3<

---------------------------------------
效果 :: 





Blogskin

在 </style> 的上面添加以下的code

#side{
position:absolute;
top:300px;
border-radius:10px;
left:150px;
opacity:0;
width:100px;
height:100px;
padding:3px;
-webkit-transition:0.4s;
-moz-transition: 0.4s;}
#side:hover {
position:absolute;
top:300px;
border-radius:10px;
left:50px;
opacity:10;
width:200px;
height:100px;
padding:3px;
-webkit-transition:0.4s;
-moz-transition: 0.4s;}
.navi {
font-size: 11px;
background:#fff;
color:#000;
opacity:0.4;
border:1px solid #C9C9C9;
padding: 3px;
margin:1px;
width:80px;
display:inline-block;
text-align:center;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;}
.navi:hover{
background: #fff;
color: #000;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;}

Explain ;
side : 

紫色代码 - 数字越小,navigation 就越高
深紫色代码 - 数字越小,navigation 就离图片越远 [view ↓]

 
数字大

 
数字小

Width & Height - 宽度 & 高度,可自行更改

navi : 

橙色代码 - 背景颜色

黄色代码 - 字体的颜色

粉橘色代码 - 框框线条粗细,样式,颜色

width - 宽度,可自行更改

浏览看看有没有出现乱码,
没有的话就save 起来.

然后在 </style> 的下面添加以下的code

<img src="图案 Direct link/ URL" style="border:1px solid #000; padding:2px; background:#fff; position:absolute; left:150px; top:280px;" width="130" />
<div id="side" style="float:left;padding:3px; ">
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('页面 ID').innerHTML" title="">显示字体</a> <br/>
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('页面 ID').innerHTML" title="">显示字体</a> <br/>
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('页面 ID').innerHTML" title="">显示字体</a> <br/>
</div>

Explain ;
浅青色代码 - 框框线条粗细,样式,颜色
青色代码 - 数字越小, 图片越靠近左边
深青代码 - 数字越小, 图片越高
width - 图片的宽度
页面ID - 页面的"认证码"
在页面都找得到[view ↓]




如果要点击的时候是进入网站的话
就把以下的代码放进去

<a class="navi"href="Website">显示字体</a>

- 如果要页面漂浮在右边, 就把left 改去right
- top 和 left 根据自己的blog 来调

---------------------------------------

Extra ;
如果你的Bs 已经有了美化navigation 的代码
可以选择把.navi {.....} 删掉 :)

---------------------------------------

成功要说,
不成功也要说
好让我知道有没有弄错代码 @@
感谢您的收看 [电视节目咩=-=]
下次记得来看我 ! :P


标签: , ,

◁ NEWER
OLDER ▷
© 2017 Designed By Elaine0211.