推荐阅读

CorelDRAW绘制绿色的森林一角场景
该实例制作了一幅森林场景画面,画面以绿色调为主,通过不同绿色之间的搭配关系营造出丰富的色彩关系。在处理手法上要注意表现画面的纵深感,并且要层次分明、主次有序。图3-2为本实例的完成效果。图3-2 本实例完成效果3.1.1 技术提示本实例的画面具有一定的纵深感,制作时通过为图形添加阴影效果,拉开了画面的层次,给人一种纵深的空间感。如图3-3所示,为本实例的制作流程。图3-3 本实例制作流程3.1.2 制作步骤:绘制远景植物(1)启动CorelDRAW,新建一个工作文档,在属性栏中将“微调偏移值”设为0.1mm,其他参数保持系统默认。然后使用“矩形”工具,在视图中绘制矩形。如图3-4所示。

Photoshop调出唯美冷色效果的外景人像
最终效果原图1、打开素材图片渐变映射调整图层,参数如下 选用较暖的明暗色作为叠加层,确定后把混合模式改为“叠加”,不透明度改为:30%,如下图。2、创建色彩平衡调整图层,参数及效果如下图。

(10-2):使用字符调板
1012以上是在文字工具的公共栏中出现的选项。在点击了字符调板按钮后即会出现字符调板【窗口_字符】,如下图。在其中可以对文字设定更多的选项。在实际使用中也很少直接在公共栏中更改选项,大多数都是通过字符调板完成对文字的调整的。其中的字体、字体形式、字号、颜色、抗锯齿选项就不重复介绍了。注意其中的为亚洲文本选项,需要在Photoshop首选项〖CTRL_K〗的常规选项中开启“显示亚洲文本选项”才会出现。1013拼写检查选项是针对不同的语言设置连字和拼写规则,如下右图显示了英国英语和美国英语对同样文字的不同连字方式。注意,末尾连字只有在框式文本输入时才有效。因为框式文本是自动换行的。通过手动换行的文字是不会有连字效果的。有关框式文本的输入方法在本节后面部分介绍。连字和拼写规则对于中文是没有意义的。因为汉字为单体结构,即一个汉字字符已携带完整含义,而字母系语言需要多个字符组合才能携带完整含义。也正是因为汉字携带的信息巨大,因此现在电脑的计算能力还不足以完美处理中文化的信息结构。-1014行间距控制文字行之间的距离,若设为自动,间距将会跟随字号的改变而改变,若为固定的数值时则不会。因此如果手动指定了行间距,在更改字号后一般也要再次指定行间距。如果间距设置过小就可能造成行与行的重叠。如下左图是自动行距与手动指定为12像素行距的比较。如果有重叠发生,下一行文字将会遮盖上一行。1015竖向缩放相当于将字体变高或变矮,横向缩放相当于变胖和变瘦,数值小于100%为缩小,大于100%为放大。如下右图中3个字分别为标准、竖向50%、横向50%的效果。-1016在字符调板中有比例间距和字符间距,它们的作用都是更改字符与字符之间的距离,但在原理和效果上却不相同。我们可以动手来理解它们的区别,新建一个足够大的图像,打上simple这几个字母,字体为黑体,大小为72像素。如下图左端所示,我们看到整个文字的宽度是由字符本身的字宽与字符之间的距离构成的。这两者都是在制作字体的时候就定义好的。有的字符本身较窄,但其左右的字距也较大,这样做是为了保证每个字符占用的宽度一致。否则,较窄的字符就只能占用较小的宽度。但这种设计却也造成了字符之间疏密不同。如下图中的mp之间与pl之间的疏密就不同。这种情况一般出现在使用中文字库输入字母的时候,Windows系统自带的黑体、宋体、楷体字体都存在这种现象。因此输入英文时应避免使用这些字体。字宽与字距间的比例将随着字号的大小相应改变,也就是说,对于同一个字体来说,字号越大,字符之间的距离也越大。反而反之。那么,字符间距选项的作用相当于对所有字距增加或减少一个相同的数量。可手动输入数值。如下图中将字符间距减去100,所有的字符间距都减去100,字符就互相靠拢了。但是这样做并没有改变疏密不同的情况,尽管mp已经是互相紧靠着密不透风,但pl还是有很大的距离。当然,如果继续减少字符间距也可以最终令pl之间也“密不透风”(设为-300左右),但mp之间却会产生重叠的效果了。我们可以用一个简单的算式来理解:假设mp原来的距离为100,pl之间的距离为300,当字符宽度设置为-100的时候,mp之间的距离为0,pl之间的距离还有200。要令pl之间的距离为0,字符宽度必须设置为-300,但同时mp的距离必须为-200,所以mp产生了重叠的现象。比例间距选项的作用是同比例地减少(注意,只能是减少而不能增大)字符的间距。按照上一个算式中的前提来假设计算的话就是:当比例间距设为50%,相当于所有字符间距减半(mp间距为50,pl间距为150),当设为33%的时候,所有字符间距减为原先的三分之一(mp间距约为30,pl间距为100),当设为100%的时候,所有字符的间距就都被降为0了。因此我们看到的效果是所有字符都彼此依靠(抗锯齿选项及字体形式的不同可能带来微小差异)。1017间距微调选项是用来调整两个字符之间的距离,使用方法与字符间距选项相同。但其只能针对某两个字符之间的距离有效。因此只有当文本输入光标置于字符之间时,这个选项才能使用。1018竖向偏移(也称基线偏移)的作用是将字符上下调整,常用来制作上标和下标。正数为上升,负数为下降。一般来说作为上下标的字符应使用较小的字号。如下图。1019强迫形式的名称是我们为了与文字形式相区别而起的,它的作用也和文字形式一样是将字体作加粗、加斜等效果,但选项更多。即使字体本身不支持改变形式,在这里也可以强迫指定。它与字体形式可以同时使用,效果加倍(更斜、更粗)。其中的全部大写字母选项的作用是将文本中的所有小写字母都转换为大写字母。而小型大写字母选项的作用也是将所有小写字母转为大写,但转换后的大写字母将参照原有小写字母的大小。如下图所示。上标与下标选项的作用与竖向偏移类似,就是增加了可同时缩小字号的功能。下划线选项与删除线选项的作用是在字体下方及中部产生一条横线。

用PS完美抠出复杂的羽毛头饰的简单教程
打开如下图片,复制图层,将 背景 层锁定。我们将在复制层进行抠图,隐藏背景层。选择 >> 色彩范围,打开色彩范围窗口,选择最左边的吸管工具并点击图像背景,这时在色彩范围窗口中你会发现被选择部分变成了白色,移动颜色容差滑杆,使得图像大部分区域变成黑色,并且背景易于选取。提示:要添加颜色到选区时,应使用中间的吸管工具点击要添加的色彩部分2 获得选区,在通道面板中,按下“将选区存储为通道”按钮,得到一alpha通道,取消选择(Ctrl+D),点击“Alpha 1”层,这时图像变成黑白色。提示:图像中的黑色区域是我们要保留的部分,白色为要扣除的部3 这时我们发现图像中还有部分灰色区域,这些将成为半透明区域,所以必须将他们调整为纯黑色或纯白色。图像 >> 调整 >> 色阶,打开色阶窗口,由左向右拖动黑色滑杆直到灰色区域变为纯黑色为止。由右向左移动白色滑杆将白色区域变的更清晰4 选择黑色笔刷并提高笔刷边缘硬度,涂抹需要保留的区域,用白色笔刷涂抹羽毛边缘,根据涂抹区域大小的不同使用不同粗细的笔刷
最新发布

首行空格、首行缩进效果的实现
首行空格、首行缩进效果的实现<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>首行空格_首行缩进</title> <style type="text/css"> P {text-indent: 2em;} </style> </head> <body> <p>加进天涯社区有一段时间了,但一直没有时间写点东西,今天写了一篇有关CSS布局的文章,并力求通过一种通俗的语言来说明知识点,还配以实例和图片,相信对初学CSS布局的人会带来一定的帮助。</p> </body> </html> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

挺实用的伪类_CSS定义首行第一个字体突出效果
挺实用的伪类_CSS定义首行第一个字体突出效果<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>伪类_CSS定义_首行字体比较大_第一个字体比较的</title> <style type="text/css"> body { font:1em/150% Verdana, Arial, Helvetica, sans-serif;} #wrapper { width:200px; padding:0.8em; border:#ccc solid 1px;} .letter:first-letter { font-size:1.5em; font-family:"华文行楷"; color:#fc0;} p.line:first-line { font-weight:bold; color:#ff0000;} </style> </head> <body> <div id="wrapper"> <p class="letter">此外CSS2还定义了首字和首行(first-letter和first-line)的伪类,可以对元素的首字或首行设定不同的样式。</p> <p class="line">此外CSS2还定义了首字和首行(first-letter和first-line)的伪类,可以对元素的首字或首行设定不同的样式。</p> <div class="letter">此外CSS2还定义了首字和首行(first-letter和first-line)的伪类,可以对元素的首字或首行设定不同的样式。</div> </div> </body> </html> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

网页中实用的放大效果
网页中实用的放大效果<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>a</title> <style type="text/css"> ul#hovershow2{ list-style-type: none; margin: 50px; width:200px; float: left; display: inline; clear: both; } ul#hovershow2 li{ float: left; display: inline; width:20px; height: 20px; margin: 2px; } ul#hovershow2 li a { text-decoration: none; display: block; width:20px; height:20px; border:1px red solid; background-color: White; line-height: 20px; font-size: 12px; text-align: center; } ul#hovershow2 li a:hover{ position: absolute; width:40px; height: 40px; line-height: 40px; font-size: 32px; z-index:100; margin: -10px 0 0 -10px; } ul#hovershow2 li:hover + li a{ position: absolute; width:30px; height: 30px; line-height: 30px; font-size: 24px; z-index:99; margin: -5px 0 0 -5px; } </style> </head> <body> <ul id="hovershow2"> <li><a href="1#" title="test"><span>1</span></a></li> <li><a href="2#" title="test"><span>2</span></a></li> <li><a href="3#" title="test"><span>3</span></a></li> <li><a href="4#" title="test"><span>4</span></a></li> <li><a href="5#" title="test"><span>5</span></a></li> <li><a href="6#" title="test"><span>6</span></a></li> <li><a href="7#" title="test"><span>7</span></a></li> </ul> </body> </html> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

CSS Hack 汇总(学习css不能不看哦)
仅IE7与IE5.0可以识别 仅IE7可以识别 IE6及IE6以下识别仅IE6不识别,屏蔽IE6 仅IE6与IE5不识别,屏蔽IE6与IE5不屏蔽IE5.5仅IE5不识别,屏蔽IE5 盒模型解决方法 清除浮动截字省略号 只有Opera识别

非常不错的CSS页码效果
非常不错的CSS页码效果<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> <head> <title>代码基地博客站</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="Keywords" content="CSS页码链接" /> <meta name="Description" content="CSS制作的页码链接效果" /> <meta name="Author" content="jxdawei,jxdawei@gmail.com" /> <style type="text/css"> body{ font-size:62.5%; } h1{ font-size:1.4em; } h2{ clear:both; font-size:1.2em; } #pageClass{ clear:both; font-size:1.2em; } #pageClass ul{ list-style:none; } #pageClass li{ float:left; width:20px; height:20px; line-height:20px; border:1px solid silver; margin:0 3px; } #pageClass a{ display:block; text-align:center; } #pageClass a:link,#pageClass a:visited{ background:white; text-decoration: none; color:gray; } #pageClass a:hover,#pageClass a:active{ text-decoration: none; background:gray; color:white; } /*第二个效果*/ #pageClass2{ clear:both; font-size:1.2em; } #pageClass2 ul{ list-style:none; } #pageClass2 li{ float:left; width:20px; height:20px; border:1px solid silver; margin:0 3px; } #pageClass2 a{ display:block; text-align:center; } #pageClass2 a:link,#pageClass2 a:visited{ background:white; text-decoration: none; color:gray; } #pageClass2 a:hover,#pageClass2 a:active{ text-decoration: none; background:gray; color:white; line-height:14px; } /*第三个效果*/ #pageClass3{ clear:both; font-size:1.2em; } #pageClass3 ul{ list-style:none; } #pageClass3 li{ float:left; width:20px; height:20px; border:1px solid silver; background:#f60; margin:0 3px; } #pageClass3 a{ display:block; text-align:center; line-height:16px; } #pageClass3 a:link,#pageClass3 a:visited{ background:white; text-decoration: none; color:gray; } #pageClass3 a:hover,#pageClass3 a:active{ text-decoration: none; background:#f93; color:white; line-height:16px; } </style> </head> <body> <h1>页码效果</h1> <h2>这是我原本想要去做的效果</h2> <div id="pageClass"> <ul> <li><a href="http://www.iwcn.net/default.asp?cateID=3">1</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=4">2</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=5">3</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=6">4</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=8">5</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=9">6</a></li> <li><a href="http://www.iwcn.net/default.asp">7</a></li> </ul> </div> <h2>做完之后成这样了</h2> <div id="pageClass2"> <ul> <li><a href="http://www.iwcn.net/default.asp?cateID=3">1</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=4">2</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=5">3</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=6">4</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=8">5</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=9">6</a></li> <li><a href="http://www.iwcn.net/default.asp">7</a></li> </ul> </div> <h2>改了改成这样了</h2> <div id="pageClass3"> <ul> <li><a href="http://www.iwcn.net/default.asp?cateID=3">1</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=4">2</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=5">3</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=6">4</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=8">5</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=9">6</a></li> <li><a href="http://www.iwcn.net/default.asp">7</a></li> </ul> </div> </body> </HTML> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

符合web标准的下拉菜单
符合web标准的下拉菜单<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css"> *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { line-height: 24px; list-style-type: none; background:#666; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { float: left; width: 80px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 180px; position: absolute; } #nav li ul li{ float: left; width: 180px; background: #F6F6F6; } #nav li ul a{ display: block; width: 180px;width: 156px;text-align:left;padding-left:24px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; } #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #content { clear: left; } </style> <script type=text/javascript> function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } window.onload=menuFix; </script> </head> <body> <ul id="nav"> <li><a href="#">产品介绍</a> <ul> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> </ul> </li> <li><a href="#">服务介绍</a> <ul> <li><a href="#">服务二</a></li> <li><a href="#">服务二</a></li> <li><a href="#">服务二</a></li> <li><a href="#">服务二服务二</a></li> <li><a href="#">服务二服务二服务二</a></li> <li><a href="#">服务二</a></li> </ul> </li> <li><a href="#">成功案例</a> <ul> <li><a href="#">案例三</a></li> <li><a href="#">案例</a></li> <li><a href="#">案例三案例三</a></li> <li><a href="#">案例三案例三案例三</a></li> </ul> </li> <li><a href="#">关于我们</a> <ul> <li><a href="#">我们四</a></li> <li><a href="#">我们四</a></li> <li><a href="#">我们四</a></li> <li><a href="#">我们四111</a></li> </ul> </li> <li><a href="#">在线演示</a> <ul> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示演示演示</a></li> </ul> </li> <li><a href="#">联系我们</a> <ul> <li><a href="#">联系联系联系联系联系</a></li> <li><a href="#">联系联系联系</a></li> <li><a href="#">联系</a></li> <li><a href="#">联系联系</a></li> <li><a href="#">联系联系</a></li> <li><a href="#">联系联系联系</a></li> <li><a href="#">联系联系联系</a></li> </ul> </li> </ul> </body> </html> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

网站风格切换效果的实现
//Style Sheet Switcher version 1.0 Nov 9th, 2005//Author: Dynamic Drive: http://www.dynamicdrive.com//Usage terms: http://www.dynamicdrive.com/notice.htmfunction getCookie(Name) { var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pairif (document.cookie.match(re)) //if cookie foundreturn document.cookie.match(re)[0].split("=")[1] //return its valuereturn null}function setCookie(name, value, days) {var expireDate = new Date()//set "expstring" to either future or past date, to set or delete cookie, respectivelyvar expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";}function deleteCookie(name){setCookie(name, "moot")}function setStylesheet(title) {var i, cacheobjfor(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {if(cacheobj.getAttribute("rel").indexOf("style") != -1 && cacheobj.getAttribute("title")) {cacheobj.disabled = trueif(cacheobj.getAttribute("title") == title)cacheobj.disabled = false //enable chosen style sheet}}}function chooseStyle(styletitle, days){if (document.getElementById){setStylesheet(styletitle)setCookie("mysheet", styletitle, days)}}function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu var iif (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menuvar element=(element.type=="select-one") ? element.options : elementfor (i=0; i<element.length; i++){if (element[i].value==selectedtitle){ //if match found between form element value and cookie valueif (element[i].tagName=="OPTION") //if this is a select menuelement[i].selected=trueelse //else if it"s a radio buttonelement[i].checked=truebreak}}}}var selectedtitle=getCookie("mysheet")if (document.getElementById && selectedtitle!=null) //load user chosen style sheet if there is one storedsetStylesheet(selectedtitle)function externalLinks() { if (!document.getElementsByTagName) return; var anchors = document.getElementsByTagName("a"); for (var i=0; i<anchors.length; i++) { var anchor = anchors[i]; if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") anchor.target = "_blank"; } } window.onload = externalLinks;<!--document.writeln("<!--[if lte IE 6]>");document.writeln("<style type="text/css">");document.writeln(" a { behavior:url("/focus.htc"); }");document.writeln("</style>");document.writeln("<![endif]-->");

文字应用css滤镜集锦
文字应用css滤镜集锦<style> <!--a:hover { color: #000000; text-decoration: underline}--> <!--a:active { color: #000000; text-decoration: none}--> <!--a:link { color: #2F2D37; ; text-decoration: none}--> <!--a:visited { color: #2F2D37;; text-decoration: none}--> .abc { line-height: 22px} .t12 { font-family:华文行楷; font-size: 15px; font-weight: lighter; color: ##C3C1C1; Filter: dropshadow(color=#ffffff,offx=1,offy=1); TEXT-ALIGN: center; TEXT-DECORATION: none } </style> <BODY BGCOLOR=#C3C1C1 style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=green,endColorStr=white);"> <TABLE WIDTH=760 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0> <TR> <TD COLSPAN=10 class="t12"> <div align="center"> | <a href="dns.asp">懒的逍遥</a> | <a href="vis.asp">心有灵犀</a> | <a href="FreeEmail.asp">爱在东海</a> | <a href="CorEmail.asp">无忧制造</a> | <a href="moneylist.asp">我佛山人</a> | <a href="WebDesign.asp">萧萧小雨</a> | <a href="ad.asp">紫色真情 </a> | <br> </div></TD> <TD> </TD> </TR> </table> <br><br><center> <TABLE><TR><TD style="FILTER: glow(color:#308148,strength=5);color: #ffffff;font-size:18px;font-family:隶书"> PI}不是走多h,而是,你是否具有足远ǖ囊庵竞托拍碜哌@l路,o他有多h。</TD></TR></TABLE> <br><br> <center><span style="color:#09ff11;font: italic 900 16pt 隶书;width: 220;filter: shadow(color=red,direction=135);">自己动手 丰衣足食</span> <br><br><br> <table bgcolor=#aaaaaa style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=green,endColorStr=white);"><tr><td style="filter:dropshadow(offX=1,offY=1,color=#000000);color:#ffffff;font-size:18px;font-family:华文行楷">雅语独喃<b><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></b></td></tr></table> <br><br><br><br> <style type="text/css">.3dfont { FILTER: glow(color=lime,strength=0) shadow(color=lime,direction:135); WIDTH: 678;font-family:隶书;font-size:16px; } </style> <center> <table border="0" width="569"><tr><td width="100%" class="3dfont"><font color="#008040">身高不过1米68,腰圆腿粗像西瓜,头大嘴小鼻梁趴,一张大嘴缺门牙!</font></td></tr></table> <br> <table width="400" border="1" cellspacing="0" cellpadding="0" align="center" bordercolor="#999999" bgcolor="#D1D2A4"> <tr> <td style="padding:15px;letter-spacing:3px; COLOR: #6b6c35; FILTER: dropshadow(color=#ffffcc,offx=1,offy=1);" >北国风光,千里冰封,万里雪飘。望长城内外,惟馀莽莽;大河上下,顿失滔滔。山舞银蛇,原驰蜡象,欲与天公试比高。须晴日,看红妆素裹,分外妖娆。</td> </tr> </table> <br> <table width="312" height="123" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#ffdf03"><div style="filter:progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, color=black);color:orange;width:100%;font-family:华文新魏;font-size:17px;"><center>织梦好,蚂蚁好;蚂蚁好,织梦更好</div></td> </tr> </table> <br> <center> <!-------Z 法 _ 始-------> <SPAN style="FILTER: Chroma(Color=green) glow(color:6655ff,strength=3);height:1"> <input type=button value="按 耐 不 住 的 冲 动" onClick=window.open("http://dob.tnc.edu.tw/index.php","_blank") style="background-color:green;border:1px solid white;font-size:12px;color:white;height:22;"> </SPAN> <!-------Z法Y束-------> <br><br><br> <table width="234" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="filter:blur(add=1,direction=135,strength=7)"> <tr> <th scope="row" style="font-family:华文行楷;font-size:18px;color:red;">我想让里面的字正常显示</th> </tr> </table> <br><br> <table> <tr> <td width="510"> <div style="height:1;width:100%; font-family:impact;font-size:14pt;color:deeppink;display:block; filter:progid:DXImageTransform.Microsoft.wave(Strength=3)"> <p align="center">看小蜜的身材怎么样?您是否已爱上了她! </div></td> </tr> <tr> </table> <table> <tr> <td width="510"> <div style="filter:progid:DXImageTransform.Microsoft.engrave(bias=0.5); height:1;font-size:20pt;font-family:impact;background-color:blue"> <p align="center"> I just couldn"t help it.</div></td> </tr> <tr> <td width="510"> <div style="filter:progid:DXImageTransform.Microsoft.emboss(bias=0.5); height:1;font-family:impact;font-size:20pt;background-color:blue"> <p align="center">We"d better be off.</div></td> </tr> <tr> </table> <br><br> <table> <tr> <td style="FILTER: alpha(opacity=100,finishiopacity=0,style=1) shadow(color=blue,direction=135,strength=6)" align="center"><font color="blue" size="7" face="华文新魏">文章版权归我站和作者共有</font></td> </tr> <tr> <td style="FILTER: glow(color=#bb0909,strength=2) shadow(color=#22BB09,direction=135)" align="center"><font color=#E1E4EC size=6 face="华文新魏"><b>让自己不至于在等待回贴的过程中血气上涌</b></font></td> </tr> <tr> <td style="FILTER: glow(color=yellow,strength=4) mask(color=green) chroma(color=#B4BBCF)" align="center" height=54><font color=#fa2233 size=6 face="华文彩云"><b>一个神奇的测试,更能加深彼此的感情 </b></font></td> </tr> </table> <br><br> <style type="text/css"> .a1 { font-size: 32px; font-family: "华文行楷"; color: red; filter: dropshadow(color=#fa00fd,offX=1,offY=1,positives=true); height: 20px; } </style> <center> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center"><div class="a1">看书 看棋 看美人 赏花 赏月 赏秋香</div></td> </tr> </table> <br><br> <div style="font-family:Courier">+ +++ + + +++++ + + +++ + + +++++ +++ ++++ +++++ + + +++++ ++++ <br>+ + + + + + + + + + + + + + + + + + + + + + + <br>+ + + + + + + + + + + + + + + + + + + + + + + <br>+ + + + + ++++ + + + + + ++++ + + ++++ ++++ + + ++++ ++++ <br>+ + + + + + + + + + + + + + + + + + + + + + <br>+ + + + + + + + + + + + + + + + + + + + + + <br>+++++ +++ + +++++ + +++ +++ + +++ + + +++++ + +++++ + + <br></div> <br> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

关于text-indent 隐藏文字 出现虚线框outline的问题
链接用图片做背景,text-indent:-9999px; 隐藏文字,此效果在 IE 中是正常的,但在 Firefox 里,鼠标点击该链接时,虚线框却会包住被缩进的文字,结果显示为虚线框 N 长。 因为平时是用overflow:hidden; 属性的,所以一直也没有注意到这个问题的存在,但当你需要使用 JS 来实现某种交互时,强烈建议不要使用 overflow:hidden; 属性,因为会给你带来很多意想不到的麻烦。 虚线框,其实就是 CSS 中的 outline 属性,这也说明 IE 和 Firefox 对于 outline 和 border 的解析范围并不一致:IE 认为虚线框就是border的边缘,而 Firefox 则认为虚线框应该是文字范围。 那 W3C 中是如何定义 outline 的呢?

CSS模块化设计从空格谈起
引子:今天在蓝点看了Yang的博客《CSS样式表中继承关系的空格与不空格》,思考了一下,本来想写《CSS样式的复合定义与复合调用及简单的模块化设计》,但是内容太大,还是来点简单的实惠。所以改叫《CSS样式――从空格谈起》吧。一、空格运算符(1)CSS语言简单地说,CSS语言类似JS语言,是通过客户端下载后,通过本地浏览器解析。而CSS语言又是非常低级的“弱类型”语言,离JS这种基于对象的比较完善的“弱类型”语言,还差相当一段距离。要知道CSS样式是定义出来的,而样式的呈现是根据文档流顺序和CSS优先级别,浏览器自己识别计算后显示出来的。而浏览器又有忽略和纠错功能(尤以IE为甚),所以样式定义的语法有错误,并不影响浏览器正常工作,只不过显示不出应有的效果罢了。在我们设计定义样式的时候,排错是比较令人苦恼的,其本质原因是于这种弱类型CSS语言本身的不严禁性有关系的,所以我们就更应该注重CSS定义的严禁,才能出较少的错误,较快更好的完成工作(2)CSS的运算符首先说,CSS语言的运算符就不多,有.#{}:";还有一个非常重要的空格。这几个运算符,都是常用的定义声明符号。而在CSS样式定义中,空格就有点特殊,我们可以把它视为在.Net或Java中命名空间或类包定义中的 . 运算符。换句话说,我们可以把空格视为路径指向的箭头,表明HTML标签的父子级别关系。CSS是与HTML想关联的,也就是说,CSS的每一个定义都与“某个HTML标签”或“某段模块化HTML代码”相对应,而HTML可以调用多个样式类。一个CSS样式类可以根据HTML代码来“复合定义”;一个HTML标签也可以“复合调用”多个样式类。所以说,CSS样式定义的复杂性与关联的HTML是密不可分。(3)实例说明 <style type="text/css">td .b { color:#00ff00; }th.b { color:#ff0000; font-family:黑体; font-size:20px;}.b { color:#0000ff; font-size:12px;}</style><table> <tr> <td><div class="b">第一个类b的类路径是th .b</div></td> <th class="b">第二个类b的类路径是th.b</td> <td class="b">第三个类b的类路径是 .b</th> </tr></table><div class="b">第三个类b的类路径是 .b</div>