推荐阅读
Illustrator设计制作古典花纹图案教程
先来看下最终效果：一、绘制图案中的花形1、单击工具箱中的“星形工具”按钮，在页面中单击鼠标左键，弹出“星形”对话框，其参数设置如图(1)2、单击“确定”按钮，在页面中绘制一个星形，星形的轮廓色设置为橘黄色(R：255，G：204)，如图(2)3、选取绘制的星形，然后将星形由下向上添加白色到紫色(R：152，G：2，B：126)的放射状渐变色，添加渐变色后的图形如图(3)4、单击工具箱中的“转换描点工具”按钮，在星形的控制点上按下鼠标左键拖曳，此时将在控制点的两侧出现控制柄，状态如图(4)5、拖曳鼠标到合适位置后释放，在右侧出现的控制柄上按下鼠标左键拖曳，将其中的一个控制柄进行调整，其控制柄的调整状态如图(5)提示：当第一次在控制点上按下鼠标左键拖曳时，在控制点的两侧将出现两个控制柄，任意拖曳鼠标的位置，出现的控制柄将始终以控制点为对称点。当释放鼠标，再次调整任意一个控制柄时，另一个控制柄将处于锁定状态。当对图形调整后，再次在控制点上单击鼠标时，调整后的控制点将还原为没有调整时的形态。
Photoshop基础教程之浮动面板综合简介
这节课简单介绍下photoshop浮动面板的组成以及种类。各种浮动面板的使用技巧和方法。具体的使用我们在以后进行讲解。 ★.浮动面板的组成： 浮动面板是Photoshop中非常重要的辅助工具，它为图形图像处理提供了各种各样的辅助功能。下面是浮动面板的名称：
如何制作狐狸叫派对海报图片的PS教程
一首狐狸叫的网络歌曲红了全球，以此为创作的广告层出不穷。下面是以此为主题的派对海报制作。过程：先构思好内容，当然少不了狐狸，然后把派对的一些元素加进去，画面看上去有个性即可。最终效果 一、选一个有纹理的背景。 二、快速找个合适的人物素材，感觉差不多就行了，注意前提是要清晰一些的素材，毕竟作为画面的主体。 三、找一个狐狸素材，最好背景干净些容易抠图，如果毛发清晰，就用“通道载入选区”方法来抠图，如果不太好抠图就随意先抠图，然后下载“毛发笔刷”来填补周边的绒毛。
Photoshop CS2 入门之菜单介绍
虽然你毫无疑问地想要自己动手把照片做些处理，想要马上发挥你的潜能，但是我建议你最好先着重了解一下Photoshop是如何工作的。首先确保你的Photoshop CS2已经正确的安装，并且事先浏览此程序各个方面的功能以便使你对它的工具和布局有一个基本的了解，这样在将来我们真正操作的时候能更方便，更熟练。当准备好开始你的Photoshop之旅的时候，要事先通过双击Photoshop图标登陆此程序。当Photoshop加载完成之后，它的菜单条、工具箱以及四个控制浮动面板出现在屏幕上。图1显示了Photoshop cs2在windows下的外观，如图所示：如果宽度没有设置成500,高度没有设置成360,现在让我们输入这些值。通过点击“宽度”域来选择它，然后输入500。按下TAB键，移动光标到“高度”域，输入360。各域之间的光标移动可以通过用鼠标点击，也可以通过按Tab键进行切换。我们一般把“分辨率”设置为72象素/英寸。Photoshop CS2将72ppi作为缺省设置，因为大多数显示器在屏幕区域中每英寸显示72个象素。换句话说，文档设置的分辨率与显示器的分辨率一样。如果你的设置不是72ppi,将其改成72。如果加大了分辨率、高度或宽度的值，那么图象的尺寸也会随之增大。在我们实际操作中我们尽量避免大图像，因为大图象在操作的时候非常笨重，反应比较慢，而且它还会降低计算机的速度。在“模式”选项中，应该设置为RGB颜色(红/绿/蓝)。Photoshop CS2将RGB颜色作为缺省设置，因为RGB是视频显示器显示颜色的标准色彩模式。在RGB模式中，颜色由红、绿、蓝三种颜色组合而成。当设置成RGB颜色模式的时候，Photoshop CS2的所有绘图和编辑属性都是有效的。如果你的计算机没有设置为RGB颜色模式，可以通过点击“模式”的弹出式菜单选择“RGB颜色”来设置RGB颜色。如果你想要把新建的图层背景是白色的，请点击组合框的“白色”按钮。如果你选择了“背景色”选项，Photoshop CS2上次使用的背景色将作为你新建文档的背景色。如果你选择“透明”，你将工作于一个没有颜色值的背景层上，当我们点击“确定”按钮关闭新建对话框时，一个新的文档窗口将出现在你的屏幕上，在窗口的主题条中写着文件的名字(未标题)、当前的显示模式和放大比例。可以滚动、改变大小和关闭Photoshop CS2的窗口，也可以通过单击和拖动主题条的方法把窗口移动到你想要位置。我们还可以通过选择“视图”颉胺糯蟆被蛘甙聪CTRL＋“+”放大图片；选择“视图”颉八跣 被蛘甙聪CTRL＋“-” 来缩小图片。二、Photoshop CS2菜单 Photoshop CS2的菜单条包含9个下拉式菜单。越熟悉Photoshop CS2的功能，那么越会在操作Photoshop CS2时选择正确的工作路径。下面的部分将对Photoshop CS2菜单中9个下拉式菜单做一下介绍。1、“文件”菜单： “文件”菜单中的大部分命令用于对文件的存储、加载和打印这些命令，如“新建”、“打开”、“保存”、“另存为”、“页面设置”和“退出”命令在其他Windows中的应用程序中都是极其普遍的。我们先看一下“文件”下拉菜单中的界面，如图3所示：
最新发布
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的样式：