推荐阅读
详细解析通过设计让APP变快的6个方法
我们都知道不管网页还是移动应用，响应速度都是最重要的体验指标之一，并且移动应用的网络环境不稳定，速度的体验显得尤为重要。其实速度优化不仅是程序员的事，设计，也能够让APP变得更快。1.后台执行这是一条很通用，也容易理解的方法。用户不会愿意盯着进度条傻傻地等待，除了“取消”没有其他选择。在系统处理一些网络任务的时候，完全可以允许用户做一些其他的事情。各大平台的发微博，都采用了后台执行。云阅读的离线下载也采用后台执行。而微博的看长图(或视频)，是个反例。网络不给力时，要么等待1分钟让图加载完，要不就只好放弃看图。为什么不能让图加载的同时，用户可以看其他微博呢?2.在载入前显示内容客户端与web的一个不同点，客户端的显示内容包括本地数据和网络数据两部分。在设计界面时，将更多的信息放在本地，在网络数据未载入时即显示本地数据，让用户产生一种“已经载入一半了”的错觉，即使最终的耗时一样，心理感受也会更快。当然把数据过多地写在本地，会牺牲一些灵活性，需要根据具体情况考虑。具体请看twitter、Facebook、Vine等优秀产品的启动画面，虽然同是静态图片，但它们不使用LOGO而假装已经载入了“导航栏”和“标题栏”，让人感觉“点击后立即就启动了”。
CS5快速给偏暗的人物磨皮
本教程运用历史记录画笔磨皮的方法跟用蒙版磨皮方法大致相同，先把图片稍微调亮后，对图片模糊处理，然后设置好快照位置，用历史记录画笔涂抹脸孔即可。 1、打开原图素材，按ctrl+J复制一层，选择复制层，设置图层样式为“滤色”，不透明度为“50%”。按“ctrl+E”合并两个图层。 参数设置如下图 2、执行 滤镜 < 模糊 < 高斯模糊，根据皮肤的好坏调节像素， 参数设置如下图
UGA5.5实例教程【文字淡出淡入】
2.点祯-“添加条幅文本”输入文字(佛前青莲).文字大小-25.颜色-白色.字体随意.在预览中把文字拖至画布左侧中间位置3.选-效果-进入场景选择-减弱-画面桢设为10;退出场景选-画面-画面桢设为10;开始预览-满意后点确定-创建单一对象如图:梅风剑提示:为使文字竖直,可以每输入一个字回车一下的位置4.点最后一祯(12祯),重复第2步/第3步操作.依此点祯-“添加条幅文本”依此输入文字(梅风剑)/(一花一世界)/(一佛一如来)/(梦寻佛踪影)/(莲香溢梦中)/(风弄花瓣雨)/(迷失莲花丛)/(佛伴我心眠)/(一睡五百年)梅风剑提示:记住不是一次性把文字复制粘贴,而是--依此分别重复第2第3步操作如图添加好
摄影时如何让森林美女更神秘一些
面对偌大的森林场景，影友们经常会觉得找不到神秘感觉的拍摄思路，其实只要紧记着几个拍摄要点就能拍出不少好片子，这次我们挑了三张照片与专业摄影师一起探讨在森林里面拍出神秘感觉人像的小技巧吧。 佳能EOS 5D，EF28-70mm，F2.8，ISO100，1/60秒 摄影教程 “树林中光线比较幽暗，因为树林的上空大部分都被树叶挡住了，所以我选择了一块透光性较好的地方拍摄;此外我还使用了外拍灯为人物打逆光和侧逆光;这种做法足够展现出森林里的大气感觉吗?” 有层次的光线过渡非常重要 这张片子的整体氛围让我眼前一亮，照片很好地展现了森林的那种神秘、低调的感觉。首先摄影师运用了柔和光比，配合上摄影师选择的场景，使得场景，在一棵有杈的树下同时有密有疏的绿叶中，女模特一身白色连衣婚纱显得特别出彩，主次分明。而且镜头畸变控制非常好，较少的焦外变形以及模特修长的身形显得这张图特别的高档。 在我看来唯一不足的在后期方面，阳光从树荫之中射入的光线可以更有层次些，从明到暗的画面过渡会更加出彩，大概作者在做后期的时候稍微有一点偷懒了，只是用画笔工具将左上角、右上角以及人物部分的局部光线简单地加亮了，没有留意到暗部以及亮部之间的衔接，使得两者过渡有点含糊了。总的来说，该作品还是很好看的，无论是构图还有裁图方面都很有心思，让观图者看上去很舒服。 佳能EOS 5D,105mm,F2.8,ISO500,1/60秒
最新发布
首行空格、首行缩进效果的实现
首行空格、首行缩进效果的实现<!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>