CSS特殊技巧整理

1.让滚动条变色
程序代码:
<style>
BODY{
scrollbar-base-color:#FFFFFF;
scrollbar-face-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#aecde7;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;}
</style>
其中#颜色值可以随自己喜

2.阴影文字

程序代码:
table style="FILTER: glow(color=#6699FF,direction=2)">
<font color=#ffffff size=2>你要的文字</font>
</table>

3.会移动的链接
程序代码:
请将以下代码拷贝至页面的<head>与</head>之间:

<STYLE TYPE="text/css">
A { text-decoration: NONE; color: #51bfe0}
A:hover { position: relative; left:1px; top:1px; }
</STYLE>

4.触到链接时出现虚线

程序代码:
请将以下代码拷贝至页面的<head>与</head>之间:

<STYLE TYPE="text/css">
A { text-decoration: NONE; color: #51bfe0}
A:hover {border-bottom:1px dashed #51bfe0 }
</STYLE>

5.给鼠标定义个性图片

程序代码:
活活,很多人问我主页的那个跟在鼠标后的小图是怎样实现的?嘿,其实简单的不得了,偶不喜欢太复杂的东西.
在<head>与</head>之间插入:

<style type=text/css>
a:hover {cursor:url('**.ani')}
BODY {cursor:url('**.ani')}
</style>

其中**是你的图标的名称,后缀名还可以是.cur和.ico的图标。

6.字体凹陷,调节下层文字的颜色和位移
HTML代码:
<style>
td{filter:DropShadow(Color=#efefef,OffX=1,OffY=1,);font-size: 14px;}
</style>

<body bgcolor="#CCCCCC">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td>OURSKY</td></tr></table>
</body>
</html>

7.字描边,加上CSS酷背景

HTML代码:
<style type="text/css">
body {
font:12px "Verdana";
filter:alpha(style=1,startY=0,finishY=100,startX=100,finishX=100);
background-color:#3366cc;
}
span {
position:absolute;
padding:4px;
filter:
Dropshadow(offx=1,offy=0,color=white)
Dropshadow(offx=0,offy=1,color=white)
Dropshadow(offx=0,offy=-1,color=white)
Dropshadow(offx=-1,offy=0,color=white);
}
#english {
font-size:9px;
}
</style>
<span id="english">This is the prospect of filter - dropshadow.</span>

<span>中文描边效果</span>

8.特色表格效果
HTML代码:
<table><tr>
<TD style="cursor:hand" onmouseover="this.style.backgroundColor='#eeeeee'"
onmouseout="this.style.backgroundColor='#ffffff'"
width="56%">我们的天空 </TD></tr>
<tr>
<TD style="cursor:hand" onmouseover="this.style.backgroundColor='#eeeeee'"
onmouseout="this.style.backgroundColor='#ffffff'"
width="56%">我们的天空 </TD></tr>
<tr>
<TD style="cursor:hand" onmouseover="this.style.backgroundColor='#eeeeee'"
onmouseout="this.style.backgroundColor='#ffffff'"
width="56%">我们的天空 </TD></tr>
<tr>
<TD style="cursor:hand" onmouseover="this.style.backgroundColor='#eeeeee'"
onmouseout="this.style.backgroundColor='#ffffff'"
width="56%">我们的天空 </TD></tr></table>

虚线
HTML代码:
<style>
#aa{
width:300px:
position:absolute;
}
#aa ul{
width:300px;
list-style-position:inside;
list-style-type:square;
}
#aa ul li{
margin:5px 0;
padding:2px 0;
border-bottom:1px dotted #ccc;:
}
</style>
<div id="aa" >
<ul>
<li>“寻找动漫M-ZONE人”动漫大赛 </li>
<li>“娇子杯”新春贺卡设计大赛</li>
<li>英特尔.2004年度中国数字盛典</li>
</ul>
</div>

标签:

分享:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

😉😐😡😈🙂😯🙁🙄😛😳😮:mrgreen:😆💡😀👿😥😎😕