推荐阅读
详细解析通过设计让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秒
最新发布
WEB2.0标准教程:第十天 自适应高度
如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面)： <style type="text/css"> #pagebox{ margin:0px; PADDING:20px; BACKGROUND: #FFF; FONT-FAMILY: arial,'宋体','新宋体',verdana,sans-serif; WIDTH:600px; } #header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;} #mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF; } #menu{ FLOAT: right; MARGIN: 2px 0px 2px 0px; PADDING:0px 0px 0px 0px; WIDTH: 400px; BACKGROUND: #ccd2de; } #content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;} #sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; } #footer{ CLEAR: both; MARGIN: 0px 0px 0px 0px; PADDING: 5px 0px 5px 0px; BACKGROUND: #ccd2de; HEIGHT: 40px; WIDTH: 580px; } </style> <div id="pagebox">Body <div id="header">这里是#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;}</div> <div id="mainbox"> 这里是#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF; }包含了#menu,#sidebar和#content <div id="menu">这里是#menu{ FLOAT: right; MARGIN: 2px 0px 2px 0px; PADDING:0px 0px 0px 0px; WIDTH: 400px; BACKGROUND: #ccd2de; }</div> <div id="sidebar"><p>这里是#sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; }，背景颜色用的是#main的背景色</p></div> <div id="content"><p>这里是#content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;}</p> <p>这里是主要内容，根据内容自动适应高度</p><p>这里是主要内容，根据内容自动适应高度</p> <p>这里是主要内容，根据内容自动适应高度</p> </div> </div> <div id="footer">这里是#footer{ CLEAR: both; MARGIN: 0px 0px 0px 0px; PADDING: 5px 0px 5px 0px; BACKGROUND: #ccd2de; HEIGHT: 40px; WIDTH: 580px; }。</div> </div> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 这个例子的页面主要代码如下：具体样式表都写在相应版块里了。重点在于#mainbox层嵌套了#menu,#sidebar和#content三个层。当#content的内容增加，#content的高度就会增高，同时#mainbox的高度也会撑开，#footer层就自动下移。这样就实现了高度的自适应。另外值得注意的是：#menu和#content都是浮动在页面右面"FLOAT: right;",#sidebar是浮动在#menu层的左面"FLOAT: left;"，这是浮动法定位，还可以采用绝对定位来实现这样的效果。这个方法存在另一个问题，就是侧列#sidebar的背景无法百分之百。一般的解决办法就是用body的背景色来填充满。(不能使用#mainbox的背景色，因为在Mozilla等浏览器中#mainbox的背景色失效。)好了，主要的框架已经搭建完毕,剩下的工作只是往里面添砖加瓦。
阻碍你学习CSS的因素 思维的转变 HTML结构化
我们通常采用DIV元素来将这些结构定义出来，类似这样： 以下是代码片段：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.suncss.com</title> <style type="text/css"> <!-- .code{ color:#666666; } table {border-collapse:collapse;} td,th {border:#000 solid 1px;} --> </style> </head> <body bgcolor="#FFFFFF"> <table border="0" cellspacing="0"> <tbody> <tr> <th>HTML属性 </th> <th>CSS方法 </th> <th>说明</th> </tr> <tr> <td class="code">align="left"<br /> align="right" </td> <td class="code">float: left; <br /> float: right;</td> <td><p>使用CSS可以浮动 <em>任何元素</em>:图片、段落、div、标题、表格、列表等等 </p> <p>当你使用float属性，必须给这个浮动元素定义一个宽度。 </p></td> </tr> <tr> <td><span class="code"><strong><font face="Verdana" color="#60a179">marginwidth="0" leftmargin="0" marginheight="0" topmargin="0"</font></strong></span></td> <td><span class="code"><strong><font face="Verdana" color="#60a179">margin: 0; </font></strong></span></td> <td><p>使用CSS, <span class="code"><strong><font face="Verdana" color="#60a179">margin</font></strong></span>可以设置在<em>任何</em>元素上, 不仅仅是body元素.更重要的，你可以分别指定元素的top, right, bottom和left的margin值。 </p> </P></td> </tr> <tr> <td><span class="code"><strong><font face="Verdana" color="#60a179">vlink="#333399" alink="#000000" link="#3333FF"</font></strong></span></td> <td><p><span class="code"><strong><font face="Verdana" color="#60a179">a:link #3ff;<br /> a:visited: #339;<br /> a:hover: #999;<br /> a:active: #00f; </font></strong></span> </p></td> <td><p>在HTML中，链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器，页面不同部分的链接样式可以不一样。 <span class='Hbz109'></span> </p></td> </tr> <tr> <td><span class="code"><strong><font face="Verdana" color="#60a179">bgcolor="#FFFFFF"</font></strong></span></td> <td><span class="code"><strong><font face="Verdana" color="#60a179">background-color: #fff; </font></strong></span></td> <td><p>在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table元素。 </p> </P></td> </tr> <tr> <td><span class="code"><strong><font face="Verdana" color="#60a179">bordercolor="#FFFFFF"</font></strong></span></td> <td><span class="code"><strong><font face="Verdana" color="#60a179">border-color: #fff;</font></strong></span></td> <td><p>任何元素都可以设置边框(boeder)，你可以分别定义top, right, bottom和left </p> </P></td> </tr> <tr> <td><span class="code"><strong><font face="Verdana" color="#60a179">border="3"<br /> cellspacing="3" </font></strong></span></td> <td><span class="code"><strong><font face="Verdana" color="#60a179">border-width: 3px; </font></strong></span></td> <td><p>用CSS，你可以定义table的边框为统一样式，也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。 </p> </P> <p>你可以使用 <span class="code"><strong><font face="Verdana" color="#60a179">table</font></strong></span>, <span class="code"><strong><font face="Verdana" color="#60a179">td</font></strong></span> or <span class="code"><strong><font face="Verdana" color="#60a179">th</font></strong></span> 这些选择器. </p> </P> <p>如果你需要设置无边框效果，可以使用CSS定义：<span class="code"><strong><font face="Verdana" color="#60a179"> border-collapse: collapse;</font></strong></span> </p> </P></td> </tr> <tr> <td><p><span class="code"><strong><font face="Verdana" color="#60a179"><br clear="left"><br /> <br clear="right"><br /> <br clear="all"> </font></strong></span> </p> </P></td> <td><p><span class="code"><strong><font face="Verdana" color="#60a179">clear: left;<br /> clear: right;<br /> clear: both; </font></strong></span> <span class='Hbz109'></span> </p></td> <td><p>许多2列或者3列布局都使用 <span class="code"><strong><font face="Verdana" color="#60a179">float</font></strong></span>属性来定位。如果你在浮动层中定义了背景颜色或者背景图片，你可以使用<span class="code"><strong><font face="Verdana" color="#60a179">clear</font></strong></span>属性. </p> </P></td> </tr> <tr> <td><span class="code"><strong><font face="Verdana" color="#60a179">cellpadding="3"<br /> vspace="3"<br /> hspace="3" </font></strong></span></td> <td><span class="code"><strong><font face="Verdana" color="#60a179">padding: 3px; </font></strong></span></td> <td><p></p></td> </tr> <tr> <td><span class="code"><strong><font face="Verdana" color="#60a179">align="center"</font></strong></span></td> <td><p><span class="code"><strong><font face="Verdana" color="#60a179">text-align: center;</font></strong></span> </p> </P> <p><span class="code"><strong><font face="Verdana" color="#60a179">margin-right: auto; margin-left: auto; </font></strong></span> </p> </P></td> <td><p><span class="code"><strong><font face="Verdana" color="#60a179">Text-align</font></strong></span> 只适用于文本. </p> </P> <p>象div，p这样的块级怨毒可以通过<span class="code"><strong><font face="Verdana" color="#60a179">margin-right: auto; </font></strong></span>和<span class="code"><strong><font face="Verdana" color="#60a179">margin-left: auto;</font></strong></span>来水平居中 <span class='Hbz109'></span> </p></td> </tr> </tbody> </table> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 一些令人遗憾的技巧和工作环境 由于浏览器对CSS支持的不完善，我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS实现传统方法同样的效果。例如块级元素有时侯需要使用水平居中的技巧，盒模型bug的技巧等等。所有这些技巧都在Molly Holzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中有详细说明。 另外一个关于CSS技巧的资源站点是Big John和Holly Bergevin的“Position is Everything”。 理解浮动行为 Eric Meyer的《Containing Floats》将帮助你掌握如何使用float属性布局。float元素有时候需要清除(clear)，阅读《How To Clear Floats Without Structural Markup》将非常有帮助。
Web标准化之form语义结构的实例
除了以上方法，我们还可以用label套嵌整个表单组件和文本标签，如： 4、使用optgroup标签 optgroup标签的作用是在选择列表中定义了一组选项。我们可以选用optgroup标签给select元素的options分类，并使用label属性，属性值会在下拉列表（select）里显示为一个不可选的、缩进标题。注意：optgroup 不支持嵌套。 IE6.0 中存在一个小Bug（FireFox 中不存在）：使用键盘方向键进行选择时，在 IE 中，当选中项由一个optgroup的选项换成另一optgroup 的选项时，不会触发onchange。解决办法是：增加 onkeydown 或 onkeyup 事件协助解决。5、使用button标签 定义与用法 定义为一个提交按钮。在button元素内你可以放置内容，像文本（text）或者图片（images）。这是这个元素和input元素按钮的区别。
关于使用CSS居中(包括水平/垂直)
用CSS如何使DIV层水平居中这两天开始对网志进行大刀阔斧的页面更改.今天碰到个很棘手的问题,DIV本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.可是事实上这样的方法科学吗?经过网络搜索和亲自实验得出以下结论:正确的也是对页面构造没有影响的设置如下:对需要水平居中的DIV层添加以下属性:margin-left: auto;margin-right: auto; 经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中!郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模一样.问题到底出在哪里呢?感谢网友乐天无用帮忙找出了这个邪门问题的原因.原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档.问题并不在CSS而在XHTML网页本身.需要加上这样的代码才能使得上述设置有效果: 说明：首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。如何使图片在DIV 中垂直居中用背景的方法。举例：
同一个页面用多个id有什么影响
我们知道在样式表定义一个样式的时候，可以定义id也可以定义class，例如：id一个页面只可以使用一次，class可以多次引用。有网友问，id和class好象没什么区别，我在页面中用了多个id在IE中显示也正常，用多个id有什么影响吗？回答：第一影响就是不能通过W3的校验。在页面显示上，目前的浏览器还都允许你犯这个错误，用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id来控制这个div，那就会出现错误。id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆； class是一个样式，可以套在任何结构和内容上，就象一件衣服；概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。web标准希望大家用严格的习惯来写代码，例如：你可以用<b></b>显示粗体，也可以用<strong></strong>来显示，但W3C 建议大家用<strong>，因为<strong>更有语义如果对这些细节问题不重视，觉得无所谓，那么你就没必要向xml过渡了，也没必要学习web标准了，因为web标准应用就是从这些小细节上的改变开始，否则用现在的html不是也可以？
巧用expression区分只读文本框和普通文本框的背景色
当然,我们可以改变只读文本框的背景颜色来加以区分,这个时候就需要程序员自己判断这个文本框是不是只读,然后再引入相应的css,无疑加大了工作量. 这里,使用expression来提供一种解决方案,只需要每个页面引入这个css即可,其它的都由程序自己判断,如下:<style> input{background-color:expression((this.readOnly && this.readOnly==true)?"#cccccc":"")} </style> <INPUT TYPE="text" NAME=""> <INPUT TYPE="text" NAME="" readonly> <INPUT TYPE="text" NAME=""> <INPUT TYPE="text" NAME="" readonly> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
你知道这些css网页设计技巧吗
1.CSS字体属性简写规则一般用CSS设定字体属性是这样做的：font-weight:bold;font-style:italic;font-varient:small-caps;font-size:1em;line-height:1.5em;font-family:verdana,sans-serif;但也可以把它们全部写到一行上去：font: bold italic small-caps 1em/1.5em verdana,sans-serif;真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。2. 同时使用两个类一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：<p class="text side">...</p>同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。
用CSS层叠样式表完成可以控制的闪烁效果
上面这个示例就能实现上面所的效果，由于这里是抓取的一张图片，不能看到动态效果，只要按下面介绍的方法，制作一个试试，其效果是一目了然的。其制作思路是:采用了CSS的“Glow”滤镜产生光晕效果，利用CSS的属性可动态改变的特性，用一小段javascript程序来每一秒钟改变一次属性值，从而实现闪烁的效果，再用两个事件(onmouseover和onmouseout)调用Javascript程序来控制是否闪烁。 制作方法: 1、制作一个Glow滤镜，CSS滤镜的设置方法请参看“CSS滤镜应用技巧”的有关文章。在此不再重复。不是使用Dreamweaver的网友，请把下面的代码复制到网页源代码的〈head〉与〈/head〉之间: 〈style type="text/css"〉 〈!-- .glow1 { filter:glow(color=#FF0000,strengh=2)} --〉 〈/style〉 2、插入一个图层，取名为:bob。在图层上写上一段文字。再在图层上加载一个Glow滤镜，并加上两个事件以实现当鼠标移到文字上时强制停止闪烁，当鼠标移开文字时继续闪烁。代码:onclick="stopflash(this)"，这句代码的作用是:一旦鼠标移到文字上，将调用程序的“stopflash(this)”函数来停止闪烁; onmouseout="init()"，这句代码的作用是:一旦鼠标移开文字，将调用程序的“init()”函数来使光晕闪烁。本例完成后图层标记的代码是这样的: 〈div id="bob" style="position:absolute; width:572px; height:35px; z-index:1" class="glow1" onmouseover="stopflash(this)" onmouseout="init()"〉
用CSS代码轻松Diy你的网页滚动条
网页滚动条代码及其解释如下：（复制时请将大写尖括号改为小写） 以下是引用片段：＜Style type="text/CSS"＞ ＜!-- Body { scrollbar-face-color:#C0C0C0; （表面） scrollbar-highlight-color:#FFFFFF;（亮边） scrollbar-3dlight-color:#C0C0C0;（3D亮边） scrollbar-darkshadow-color:#000000; （3D暗边） scrollbar-Shadow-color:#808080;（阴影） scrollbar-arrow-color:#000000; （箭头） scrollbar-track-color:#E0E0E0;（滚动区） } --＞ ＜/Style＞ 以上的代码，从Body以下的，凡是#号后面的，都是颜色代码，颜色代码为16进制。而括号内的文字是对左边代码的注释，在加入网页代码时不要输入。这样一来，你就可以DIY自己的网页滚动条了。