推荐阅读
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 选择黑色笔刷并提高笔刷边缘硬度，涂抹需要保留的区域，用白色笔刷涂抹羽毛边缘，根据涂抹区域大小的不同使用不同粗细的笔刷
最新发布
HTML代码示例:可以搞死任何版本的IE
许多人都非常讨厌Internet Explorer，在西方万圣节即将到来之际，让我们来看一个真正吓人的东西——如何用一段简单的HTML和CSS，将任何版本的IE搞死。我们只需要简单地打开任意文本编辑器，将下面的代码复制进去，然后保存文件，例如SomeFilename.html。<html><head><style type="text/css">#a {margin:0 10px 10px;}#b {width:100%;}</style><title>IE Crasher</title></head><body><table><tr><td><div id="a"><form id="b"><input type="text" name="test"/></div></td><td width="1"></td></tr></table></body></html> 然后用Internet Explorer打开它——哈哈！它很惨地死给你看了。 这个bug几乎存在于现在流行的所有IE版本，从IE6到刚刚发布的Internet Explorer 9的第6个平台预览版。在IE6中，该页面往往显示为空白，但是整个窗口都无法交互。在IE8中，崩溃来得很彻底。而IE9 Beta增强了坚固性，经过我的实测，这个页面又是会导致整个进程无响应，而有时IE9会提示你网页存在的问题，但是这都无法避免崩溃的现实。 事实上，很早就有人发现过这个问题了，而且还有一个专门的网站（http://crashie8.com/，请谨慎传播此链接）。除了IE以外的浏览器打开那个页面都不会有任何问题，但是IE却莫名其妙地崩溃。当然，如果你细心的话，会发现上面的HTML代码中<form>标签没有闭合。我们需要在<input>标签后使用</form>闭合标签才能让这段代码符合规范。规范的代码就不会让IE崩溃了，这样看来似乎并不是IE的错。但是，当其他浏览器都能有很高的容错性时，IE没有，甚至到了IE9还是没有，这就是IE的悲剧了。
标签参考:前人知名网站H标签的用法
在html里的每一个标签都有其自身的意义，而H标签作为标题标签，它的意义更是至关重要。对于H标签的用法特别是h1的用法一直是个争议的问题，也是值得我们研究的问题。我在总结了前人经验的基础上结合自己对H标签的理解，写下了这篇文章，希望对大家有所帮助。什么是H标签？ W3C指出h1-h6标签可定义标题。h1定义最大的标题。h6定义最小的标题。h1，h2，h3，h4，h5，h6，作为标题标签，并且依据重要性递减。我认为遵循这样的原则是很有必要的，它能让页面的层级关系更清楚，让搜索引擎更好地抓取和分析出页面的主题内容等等。为了更好的理解，请看下面的代码：<body> <h1>一级标题</h1> <p>段落</p> <div> <h2>二级标题</h2> <p>...</p> <div> <h3>三级标题</h3> <p>...</p> <div> <h4>四级标题</h4> <p>...</p> </div> </div> </div> </body> 浏览器的默认样式也是依据重要性递减，字号从h1到h6由大变小。而不同的浏览器中的样式又有一些差别，介于这种差别，我们通常在布局中用CSS将其统一。大家怎么用的？ 现在很多网站（包括淘宝、新浪、搜狐等知名网站），都喜欢把h1用在LOGO上， 如图：
IE9beta版本浏览器对HTML5/CSS3的支持
IE9beta版本已经发布几天了，我也在第一时间体验了下，但是由于时间的问题，这篇日志一直没有发，嗯，最近比较忙，其实主要是没有大块大块的时间了，然后碎片时间利用的也不是很高效～～以至于最近博客的更新都比较慢…有人说IE9是微软的二次革命，我觉得这种说法一点都不过，从IE6开始，IE的更新就没有这么彻底过，完全支持DOM level 2，完全支持CSS2.1，界面更精简……当然，我们最关心的是，IE9对HTML5和CSS3的支持到底怎么样～～在微软自家的ietestcenter网站中，我们看到了这个图表：看到这个图我感到鸭梨很大啊，心里在想，IE9有这么牛x吗？认真看了说明之后才清楚，原来这里的测试项目只是微软提交给W3C的条目，并不是完整的内容，比如CSS3中，这里只包含了5项技术，而不是所有的CSS3内容——强烈的BS一下微软，差点上他的当了……其实，想要了解一个浏览器对HTML5/CSS3的支持很简单，上篇文章中介绍的Modernizr就是一个非常好的工具，我这里偷个懒，直接用访问findmebyip，即可看到IE9beta对它们的支持：可见，目前IE9beta对CSS3新特性的支持还是很弱的。IE9终于比较完整的支持CSS选择器了！
网页制作实例:图片真正居中的方法
图片的宽度和高度是未知的，没有一个固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中，想想感觉还是挺麻烦的，由于最近的项目可能会用到这个方案，所以把一些常用的方法都收集整理了一下。下图是理想中的效果图，外部容器的宽度和高度是固定的，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。但是实际中实现的效果并不是很完美，由于各浏览器的解析都各不相同，所以各浏览器都会有1px-3px的偏差。方法一 (XHTML 1.0 transitional)：该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。HTML结构部分： <div id="box"> <span><img src="images/demo.jpg" alt=""></span></div>CSS样式部分：
IE中奇怪的左右border断线现象
如果容器内有两个浮动，并用CLEAR清除浮动。在ie下拖动滚动条时最外层的border会消失，如果给最外层加上宽度或者高度就不会出现。这是一个奇怪的现象，目前还不能解释是什么原因所导致的。看下面的示例：<div style="margin:500px 100px 10px 100px;padding:50px;border:1px solid #ccc;line-height:300%"> <div style="float:left"> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> </div> <div style="float:right"> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> </div> <div style="clear:both"></div> </div> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 我们可以通过下面的办法解决： 1.在父元素中加入height:1% 2.加入一个宽度 3.加入一个背景色 看下面的例子，我们给父元素加上一个宽度就搞定了： <div style="width:660px; margin:500px 100px 10px 100px;padding:50px;border:1px solid #ccc;line-height:300%"> <div style="float:left"> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> </div> <div style="float:right"> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> </div> <div style="clear:both"></div> </div> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
制作网页时手写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文件中放在后面的类的属性起作用。3. CSS border的缺省值
总结:CSS在IE与Firefox下的兼容性
2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式，值得注意的是，一定要将xxxx !important 这句放置在另一句之上 6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以 8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。 9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px} 重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
CSS hack浏览器兼容一览表
CSS hack是指我们为了兼容各浏览器，而使用的特别的css定义技巧。这是国外摘来的一张CSS hack列表，显示了各浏览器对css hack的支持程度，对我们制作兼容网页非常有帮助。
IE与Firefox的CSS兼容大全
1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式，值得注意的是，一定要将xxxx !important 这句放置在另一句之上 6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以 8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。 9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px} 重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important; 10.IE5 和IE6的BOX解释不一致 IE5下div{width:300px;margin:0 10px 0 10px;} div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width /**/:340px;margin:0 10px 0 10px} 关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：） 11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;} 就能解决大部分问题 注意事项： 1、float的div一定要闭合。 例如：(其中floatA、floatB的属性已经设置为float:left;)<#div id="floatA" ><#div id="floatB" ><#div id="NOTfloatC" > 这里的NOTfloatC并不希望继续平移，而是希望往下排。 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。 在<#div class="floatB"><#div class="NOTfloatC"> 之间加上<#div class="clear"> 这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。 并且将clear这种样式定义为为如下即可：.clear{clear:both;} 此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。 例如某一个wrapper如下定义：.colwrapper{overflow:hidden;zoom:1;margin:5px auto;} 2、margin加倍的问题。 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决方案是在这个div里面加上display:inline;例如：<#div id="imfloat"> 相应的css为#IamFloat{float:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/} 3、关于容器的包涵关系 很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。 4、关于高度的问题 如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事） 5、最狠的手段 - !important; 如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下.tabd1{background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} 值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过.
CSS兼容IE6,IE7,FIREFOX的一些收集
第一种，是CSS HACK的方法height:20px; /*For Firefox*/*height:25px; /*For IE7 & IE6*/_height:20px; /*For IE6*/注意顺序。这样也属于CSS HACK，不过没有上面这样简洁。#example { color: #333; } /* Moz */* html #example { color: #666; } /* IE6 */*+html #example { color: #999; } /* IE7 */第二种是使用IE专用的条件注释<!--其他浏览器 --><link rel="stylesheet" type="text/css" href="css.css" /><!--[if IE 7]><!-- 适合于IE7 --><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]--><!--[if lte IE 6]><!-- 适合于IE6及一下 --><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->第三种css filter的办法，以下为经典从国外网站翻译过来的。.新建一个css样式如下：#item { width: 200px; height: 200px; background: red;} 新建一个div,并使用前面定义的css的样式：