上一篇
下一篇
CSS实用技巧
作者:cmscn 日期:2005-04-11
1。半透明表格
实现这个效果很简单啦，请将以下代码拷贝至 <TABLE> 里面
style="FILTER: alpha(opacity=50)"
例如：
<table style="FILTER: alpha(opacity=50)" width="200" border="0" cellspacing="0" cellpadding="2" bgcolor="#CCFFFF"></table>
2。{背景图的设定}背景属性一览
background-color:#F5E2EC /*背景色彩*/
background-image : url(image/bg.gif) /*背景图片*/
background-attachment : fixed /*背景固定*/
background-repeat : repeat /*重复排列*/
background-repeat : no-repeat /*不重复排列*/
background-repeat : repeat-x /*上边重复排列*/
background-repeat : repeat-y /*左边重复排列*/
background-position : 90% 90% /*背景图片固定在右下方*/
bottom:下,top:上,left:左,right:右,center:中.
下为像素与英文的对照：
top left = left top = 0% 0%
top = top center = center top = 50% 0%
right top = top right = 100% 0%
left = left center = center left = 0% 50%
center = center center = 50% 50%
right = right center = center right = 100% 50%
bottom left = left bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100%
bottom right = right bottom = 100% 100%
在<head>和</head>间插入：
<style type=text/css>
body{
background-image : url(../icon/133.gif); /*背景图片*/
background-repeat : no-repeat; /*不重复排列*/
background-position : 90% 90%; /*图片位置*/
background-attachment : fixed;/*图片固定*/}
</style>
3. 链接样式范例
去掉链接的下划线
<STYLE TYPE="text/css">
A { text-decoration: none;color: #808080}
</STYLE>
让链接变色
<STYLE TYPE="text/css">
A {text-decoration: none;color: #808080}
A:hover {color: #3399FF}
</STYLE>
增强链接的力度
<STYLE TYPE="text/css">
A { text-decoration: none; color: #808080}
A:hover {font-weight:bold}
</STYLE>
链接时出现虚线
<STYLE TYPE="text/css">
A { text-decoration: none; color: #808080}
A:hover{border-bottom:1px dashed #808080}
</STYLE>
会移动的链接
<STYLE TYPE="text/css">
A { text-decoration: none; color: #808080}
A:hover{position: relative; left:1px; top:1px;}
</STYLE>
给链接添加背景色
<STYLE TYPE="text/css">
A { text-decoration: none; color: #808080}
A:hover{ background-color: #CCFFFF;}
</STYLE>
4. 边框样式范例
实线：
<TEXTAREA STYLE="border:1px solid #999999">
输入内容
虚线：
<TEXTAREA STYLE="border:1px dashed #999999">
输入内容
点线：
<TEXTAREA STYLE="border:2px dotted #999999">
输入内容
设置文本域的背景图,将以下代码拷贝至页面合适位置：
<TEXTAREA STYLE="background-attachment: fixed; background-image: url(背景图所处位置)">
输入内容
注: fixed可以固定背景图，如不需要可不用。
设置文本域的背景色,请将以下代码拷贝至页面合适位置：
<TEXTAREA STYLE="background-color:#ffffff">
输入内容
注:background-color可自行设定，如设为transparent ，则背景透明
设置文本域的字体,请将以下代码拷贝至页面合适位置：
<TEXTAREA STYLE="font:12px;font-family:Verdana;color:#666666">
输入内容
注:字体(font-family)还可以选用Arial,Tahoma等等；color可自行设定
5. {跟随鼠标移动的模糊轨迹图片}
自行修改图片。
在<head>和</head>间插入：
<style type="text/css">
BODY {overflow: scroll; overflow-x: hidden;}
</style>
<script LANGUAGE="Javascript1.2">
<!-- Begin
var trailLength = 8;
var path = "images/a.gif"; // 图片地址
var isIE = false, isNav = false, range = "all.", style = ".style", i, d = 0;
var topPix = ".pixelTop", leftPix = ".pixelLeft", images, storage;
if (document.layers) {
isNav = true, range = "layers.", style = "", topPix = ".top", leftPix = ".left";
} else if (document.all) {
isIE = true;
}
function initTrail() {
images = new Array();
for (i = 0; i < parseInt(trailLength); i++) {
images = new Image();
images.src = path;
}
storage = new Array();
for (i = 0; i < images.length*3; i++) {
storage = 0;
}
for (i = 0; i < images.length; i++) { // make divs for IE and layers for Navigator
(isIE) ? document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images.src + '"></div>') : document.write('<layer name="obj' + i + '" width="0" height="0" z-index="100"><img src="' + images.src + '"></layer>');
}
trail();
}
function trail() {
for (i = 0; i < images.length; i++) {
eval("document." + range + "obj" + i + style + topPix + "=" + storage[d]);
eval("document." + range + "obj" + i + style + leftPix + "=" + storage[d+1]);
d = d+2;
}
for (i = storage.length; i >= 2; i--) {;
storage = storage[i-2];
}
d = 0;
clearTimeout(timer);
var timer = setTimeout("trail()", 10);
}
function processEvent(e) {
if (isIE) {
storage[0] = window.event.y+document.body.scrollTop+10;
storage[1] = window.event.x+document.body.scrollLeft+10;
} else {
storage[0] = e.pageY+12;
storage[1] = e.pageX+12;
}
}
if (isNav) {
document.captureEvents(Event.MOUSEMOVE);
}
if (isIE || isNav) {
initTrail();
document.onmousemove = processEvent;
}
// End -->
</script>
6. 图片套用滤镜
灰暗效果：
<img border="0" src="图片地址" style="filter: gray">
X光效果：
<img border="0" src="图片地址" style="filter: Xray">
柔边效果：
<img border="0" src="图片地址" style="filter:alpha(opacity=100, finishOpacity=0,style=2)">
马赛克效果：
<img border="0" src="图片地址" style="filter:progid:DXImageTransform.
Microsoft.Pixelate(maxsquare=3)">
反色效果：
<img border="0" src="图片地址" style="filter:invert">
6.{字体样式范例}
*阴 影 文 字*
<table style="FILTER: glow(color=#6699FF,direction=2)">
<font color=#ffffff size=2>你要的文字</font>
</table>
注: color 是阴影的颜色，可以配合网页色调改变，direction 是设置阴影的强度。font color是原字体的颜色。
+模糊阴影+
首先，在<head>~</head>之間加入：
<style>filter:shadow(color=#cccccc,direction=150)">;color=#000000
</style>
然后，在<body>~</body>之間加入：
<p class="filter">加入你喜欢的文字！</p>
注: color 是阴影的颜色，可以配合网页色调改变，direction 是设置阴影的强度。font color是原字体的颜色。
浮雕的效果 OK吗？自己试下
首先，在<head>~</head>之間加入：
<style type="text/css">
.font{
FILTER: dropshadow(color=#FF9999, offx=1, offy=1, positive=1); FONT-FAMILY: "Verdana"; FONT-SIZE: 10pt; width:100%; COLOR: #66CCFF;}
</style>
然后，在<body>~</body>之間加入：
<a class="font" href=#>浮雕的效果</a>
<--连接中使用 -->
<p class="font">OK吗？自己试一下</p>
<--普通状态下使用-->
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 5 | 引用: 5 | 查看次数: 625
发表评论
