-
许多制作blog的人都非常希望自己的blog能与别不同甚至能带点自己的味道:或玩世不恭或小心翼翼或罗曼蒂克...我的...是土八路(这个跳过= =b).所以这次会介绍一些比较能为你的blog增添点特色的CSS代码,5,说什么比较好呢?那就说"接招吧!"
【加入背景图片】
如何加入背景图片呢?加入背景图片又如何控制它的显示方法呢?看下面的CSS代码吧.
在内加入:style="background-image: url(图片地址)"
即:<body style="background-image: url(图片地址)">
background-attachment: fixed
拉动滚动条时背景不动(一般来说都会选择这个,背景图片跟着滚动条跑着实看了很累)
background-repeat:no-repeat
背景图片不重复(对于大的图片来说,改成"repeat"就是重复咯)
background-position:left
固定背景在左边(left可以尝试着替换成right或top left等等,来控制背景图片的显示基准位置)
关于这个基准位置,请参照下面:
background-attachment: fixed 背景固定
background-repeat: no-repeat 背景不重复
background-image: url() 背景图片地址
background-position: right bottom 背景右下角基准对齐
repeat : 背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
background-color:#ffffff 背景颜色
(#ffffff可以替换成其他的十六进制代码,一般是没有背景图片时采用,象我目前的背景就是用#000000)
把改为<body style=background:transparent>把背景透明(这个有点类似透明flash的嵌入)
【如何控制链接方式代码】
在学习这些代码前,先要看明白下面几个关于链接的代码
A:link
设置对象在未被访问前的样式表属性.哦,我希望你看懂了.
A:active
设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。目前IE5.5+仅支持CSS1中的:active。
A:visited
链接在一般情况下的显示状态:比如我的当前页面显示状态就是水红色,当然,还有种情况就是你的客户端计算机已经设置了链接颜色,那我也米有办法啊>///<
学术说法"设置a对象在其链接地址已被访问过时的样式表属性。 IE3将:link伪类的样式表属性作用于visited伪类。默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。对于无href属性(特性)的a对象,此伪类不发生作用。"
A:hover
鼠标移动到超链接上时的显示状态,可以控制鼠标的形状:比如在我的当前页面上,我控制的鼠标移动到超链接上时状态为双箭头.
比较学术的说法为"设置对象在其鼠标悬停时的样式表属性,在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。目前IE5.5+仅支持CSS1中的:hover。"
a:focus
这个目前很少看到有人用的代码,如果觉得感兴趣不妨尝试吧!
还是学术说法"设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式表属性。目前IE5.5尚不支持此属性。"
举个最简单的链接例子:
<STYLE type=text/css>
a:hover {cursor:url("http: //***.cur")} //鼠标链接状态图标,一般为.cur格式或.ani格式
BODY {cursor:url("http: //***.ani")} //无链接状态图标.
</STYLE>
a:link {color: #6B3678;
text-decoration: none;}
a:visited{text-decoration: none;
color: #6B3678;}
a:hover{text-decoration: ;//设置下划线或其他文本状态
color: #6B3678;//颜色设置
filter:blur(add="0",direction="90",strength="5");//这个效果目前就是我叶子上的链接效果
background-color:#ffffff;//背景色为白色
height: 0px;//高度,和上面的filter连用后的效果
}
a:active {text-decoration: none;
color: #74AFE9;}
这个是锐锐以前的叶子上关于链接状态和鼠标设定的CSS代码段.放在这里供参考.
【圆角表格制作代码】
是不是看腻了那些表格方方正正的叶子呢?不妨试着做个圆润的可爱表格吧!
<table width="100" cellpadding="0" cellspacing="0">
<tr>
<td>
<fieldset style="width:100"></fieldset>
</td>
</tr>
</table>
第一个WIDTH是指总表格的宽度,然后后一个WIDTH就是指里面圆角表格的宽度。另外,在<TABLE>里加入 bgcolor=颜色代码 可以更换表格的背景色。
可爱的表格学会了吗?
【在页面中新开页面的代码】
<A href="http: //" target=_blank> //加target=_blank这个就能在另外的也面中打开了.
这个用在屡刷不新的blogcn里头非常好用,象你现在点击左边的"GUEST BOOK"那一列都可以重新打开,避免等待和刷新.适用于有多个blog链接的博友.
【背景音乐每次刷新都可以自动更换】
是不是觉得你的叶子太安静了呢?不妨用音乐来是你的blog更加丰富多彩吧!
代码有点长,复制到#head_tag#和#end_tag#里就可以了.
<SCRIPT LANGUAGE="javascript">
<!--
var sound1="http: //歌曲地址" //歌曲可以到百度搜索,必须是音乐格式的如.mp3或.wma
var sound2="http: //歌曲地址"
var sound3="http: //歌曲地址"
var sound4="http: //歌曲地址"
var sound5="http: //歌曲地址"
var sound6="http: //歌曲地址"
var sound7="http: //歌曲地址"
var sound8="http: //歌曲地址"
var sound9="http: //歌曲地址"
var sound10="http: //歌曲地址"
var x=Math.round(Math.random()*10)
if (x==0) x=sound1
else if (x==1) x=sound2
else if (x==2) x=sound3
else if (x==3) x=sound4
else if (x==4) x=sound5
else if (x==5) x=sound6
else if (x==6) x=sound7
else if (x==7) x=sound8
else if (x==8) x=sound9
else x=sound10
if (navigator.appName=="Microsoft Internet Explorer"
document.write(<bgsound src=+"+x+"+ loop="infinite">)
else
document.write(<embed src=+"+x+"+hidden="true" autostart="true" loop="true">)
//-->
</SCRIPT>
这次就先讲这些吧,代码其实还有好多值得我们研究的地方,而且随着自己动手做的越来越多的blog样式后,你也会开始喜欢上自己做叶子,而不会一味地认为blog代码是种枯燥烦人的东西了,我也是从厌烦到现在自己琢磨着做叶子的.
当然叶子的特效越多也会越卡,这是没办法的事情,毕竟免费的东西你不能有太多的指望,东西做给别人看,最重要的还是先满足和充实自己,别人说是他们的事情,自得其乐才是bloger的精神嘛!唯有bloger才会理解彼此的心情吧>///<
下一次就专门讲将如何添加音乐播放器和透明flash吧!这两个是直接照成网页老是打不开的元凶啊,不过也是是你的叶子更加漂亮和充实的助手哦!期待的bloger就记住继续往后关注啊.
共19页
1 2 3 4 5 6 7 8 9 10 下一页 最后一页