推荐阅读
Photoshop给人物图片添加怀旧暖色调美化教程
素材图片也是以暖色为主，不过暖色部分还不够明显，处理的时候可以适当加强图片的暖色部分。同时再给天空部分增加一些青色，这样画面会更清爽。 最终效果原图一、点击图层区最下边的【创建新的调整图层按钮】我特别喜欢用这个方法调色，可以随时改动，调整可选颜色。
调出梦幻深蓝色田园背景婚纱照片的PS教程
素材图片背景有点杂乱，人物部分不够突出。处理的时候可以考虑把杂乱的部分模糊或者加深处理，然后把主色调统一，这样画面就干净很多。 最终效果 原图 一、Photoshop打开素材图片，创建可选颜色调整图层，对红、黄、绿进行调整，参数设置如图1 - 3，效果如图4。这一步主要把图片中的黄绿色转为教暗的青绿色。
PS利用图层样式制作唯美的星光蓝色字体
效果图1、创建650*450PX大小图层，选择渐变工具，拖拉出一个暗蓝渐变。如下图2、执行滤镜>素描>水彩画纸 进行调整。参数设置如下图。4、双击文字图层，对外发光进行调整。参数设置如下图5、按ctrl点击文字，得出文字选区。右键击>建立工作路径 如下图6、选择画笔工具，对画笔预设进行调整。新建空白图层，选择文字路径>描边路径 如下图8、新建空白图层，再选择画笔工具对预设进行调整，再次描边路径。如下图
如何拍摄出打火机的电光火石
这张照片看起来好魔幻啊，怎样拍摄到呢?其实并不困难，看看相机设定U快门1/3200、光圈f/2.8、ISO 6,400。再看看下图的实拍情况U 其实就是打火的一刻，同时按下快门就可以了!由于快门速度极高，所以同步时间要非常准确，但只要多练习，也没有想像中的困难。还有另一种方法的，就是使用慢快门，那样就更容易捕捉到火光，但是出来的火并不是粉状，而是像烟火那种一条条的，没有那么梦幻，再者手部也会因为慢快门而变得蒙糊，所以还是用高速快门+ 高ISO 组合比较理想。 另外，虽然照片看起来很黑，但其实现场并不需要真的很黑，因为快门速度高，所以一般室内光线其实还可以接受的，而且太黑的话，你也很难对焦呢。是的，因为打火动作关系，用手动对焦并不是太理想的方法，还是逐次自动对焦最有效。 最后，我所用的是60mm 微距镜，贪其放大率较高，所以照片毋须再剪裁，这也是方便之处，但其他镜头一样可以的哦，留心最短对焦距离即可。 要拍出漂亮的作品，成功率大概有10-20%，所以不要灰心，慢慢练习吧。 以上照片以SAMSUNG NX300 拍摄 注：更多请关注摄影教程栏目，三联摄影群:182959594欢迎你的加入
最新发布
CSS实现完美垂直居中
之前看到很多人一直都问这个问题，不过当时我没当一回事，因为在 CSS 中要垂直居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，看上去比较舒服，而且实现的方法也不少，不一定要拘泥于和 table 布局一样。不过最近有人问了几个例子，看来对此的需求还不少。现在就把我经验拿出来分享一下，希望大家鼓鼓掌。首先，要有一个概念：凡是 table 布局可以实现的，CSS 一定可以实现。CSS 可以实现的，table 未必能做到。现在来几个例子：一、单行内容的居中只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了优点：1. 同时支持块级和内联极元素2. 支持所有浏览器缺点：1. 只能显示一行2. IE中不支持<img>等的居中要注意的是：1. 使用相对高度定义你的 height 和 line-height2. 不想毁了你的布局的话，overflow: hidden 一定要为什么？请比较以下两个例子：上一个高度是用的绝对单位px，并且没有隐藏溢出，下一个高度用的单位是相对单位em，并且隐藏了溢出。如果你的浏览器支持放大字体，那么尽情地放大字体，看看会出现什么效果。二、多行内容居中，且容器高度可变也很简单，给出一致的 padding-bottom 和 padding-top 就行优点：1. 同时支持块级和内联极元素2. 支持非文本内容3. 支持所有浏览器缺点：容器不能固定高度三、把容器当作表格单元CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。可惜IE不支持这些属性，不过在其他浏览器上显示效果非常完美。要注意的是：和一个合法的<td>元素必须在<table>里一样，display: table-cell 元素必须作为 display: table 的元素的子孙出现。
网页表单的Web标准解决方案
进入eYou.com后，马上就给新版的邮件界面转化成XHTML+CSS的工作，还好平时基本功还够扎实，有条不紊的干了下来。当然会遇到新的问题，比如，平时做网页，因为没有跟程序打过什么交道，较少使用表单。还好，世界还有Google，让我可以轻松应对新挑战。一些经验，写出来大家分享。 基于易用性（accesibility）的考虑，表单的标准写法应该在<form>和</form>之中包含fieldset和legend（说明），让用户明白该表单域的内容概要。简单的结构如下： 在某些场合或许你不愿意让也许fieldset和legend影响你的设计方案中的美观，好办，在CSS中把fieldset的border设置为0，legend的display设置为 none就行了。 在绝大多数情况下，表单的布局分两列，左边是标记（label），右边是输入框(input type="text"...)。如此简单的两列布局，我强烈建议不要使用表格。参考http: //stylephreak.frogrun.com/uploads/source/cssform.php和http: //www.aplus.co.yu/css/forms/?css=1（绝对有价值的两个参考，你已经可以不必往下看了），我们发现，Web标准通用的解决方法是，为label和input type="text"...的外围加上一个div，并把把该div的display设置为block。把label设为float: left;（这也是要把div设置为display: block;的原因）之后就可以让标记跟输入框同一行上了。让label 对齐的一个小窍门是，固定label的宽度，然后根据需要使用text-align向左或者向右对齐。设定宽度的小窍门是，使用单位em根据标记的最大字数来定宽度，不必辛苦测试px。 为了使我的阐述更容易理解，我简单写些代码： Chinaz~com XHTML：（部分） 中.国.站长站 <form> <fieldset> <legend>表单实例</lengend> <div><label for="name">姓名：</label><input type="text" id="name" /></div> <div><label for="etc">其他等等：</label><input type="text" id="etc" /></div> <div class="submit"><input type="submit" value="提交" /></div> </fieldset></form>CSS：（部分） Www.Chinaz.com
关于CSS实现自动换行的小技巧
css自动换行有什么技巧？大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！ 大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！ 对于div 1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。 #wrap{white-space:normal; width:200px; }或者 #wrap{word-break:break-all;width:200px;} <div id="wrap">ddd111111111111111111111111111111</div> 效果：可以实现换行 2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！ #wrap{white-space:normal; width:200px; overflow:auto;}或者#wrap{word-break:break-all;width:200px; overflow:auto; } <div id="wrap">ddd1111111111111111111111111111111111111111</div> 效果：容器正常，内容隐藏 对于table
用DIV+CSS编写出的网页中的圆角矩形
用CSS+DIV编写的实现在网页中显示圆角矩形的代码！希望对大家有用！谢谢支持！ <style>div.bg{background:#ffc20e;width:50%}b{display:block;}/*将所有B标签转成块级元素*/ Www~Chinaz~comdiv b.topb b,div b.bottomb b{height:1px;overflow:hidden;background:#ffc20e;}/*div标签内类名为topb/bottomb的那个b标签的css属性值--高为1px，溢出部份隐藏,背景色同div.bg的背景色*/ div b.topb,div b.bottomb{ background-color:white}/*div标签内类名为topb/bottomb的背景色要与body背景色一致*/ b.t1{margin:0 5px}/*标签margin值将决定溢出的多少值被隐藏*/b.t2{margin:0 3px}b.t3{margin:0 2px}b.t4{margin:0 1px;height:2px;} </style> <div align="center"><div class="bg">
清除浮动的最优方法
在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动，嘿嘿，这个方法不单使用简单，而且FF、OP、IE7都支持，从此可以告别那又长兼容性又差的FF清浮动的方法了。方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。CSS代码ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;}li{float:left;width:80px;height:80px;background-color:#83B1DF;}.demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;}.overflow{overflow:auto;zoom:1;background-color:#43FF73;}ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;}li{float:left;width:80px;height:80px;background-color:#83B1DF;}.demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;}.overflow{overflow:auto;zoom:1;background-color:#43FF73;}HTML代码<div class="demo"><ul class="overflow"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="demo"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div>其中zoom是为了IE6准备的。完整的Demo注：忘了一个很重要的内容，并不是所有的overflow属性都可起来一样的效果，比如visible属性就只能对IE起作用。例子可以看这里Demo2这样的话就有一个问题啦，如果要有高度，而且内容超出高度的时候，定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案：对于IE6及以下版本的IE，可以直接定义高度；对于IE7、FF、OP，可定义min-height。CSS代码
实用的CSS常见的问题和技巧总结
1、善用css缩写可以减少页面文件大小，提高下载速度，同时使代码简洁可读。如： 再如： 可以改写为： 3、明确定义单位，除非值为0忘记定义尺寸是css初学者新手普遍存在的问题。在html我们可以写width=”100”，但在css中应该给出一个准确的单位。如：width:100px;height:50px;font-size:9pt ，0值除外，因为不论对于任何单位。0值的大小都是相等的。注意：不要在数值和单位之间加空格。
解决div在firefox下高度自动适应问题
属性: overflow:hidden <div id="Box" style="width:100%;background-color:green;overflow:hidden ;"> <div id="left" style="float:left;background-color:#333333;width:100px">左左左左左左左左左左左左左左左左左左左左左左</div> <div id="right" style="float:left; ">右右</div> </div>
总结新手学CSS容易出现错误的内容
一些新手容易忽略或者出现错漏的地方。1.首先是对于布局标签的定义。有时候写好了css，但是反复调试总发现效果差强人意，有那么一块空白，挥之不去。其实这就是对于标签定义的不严谨造成的。因为在xhtml的部分标签里，有一些的默认属性值不一定是为空或零的。例如form,p，他们的margin默认值并不是0，所以在定义时定要多加注意。我们可以这样写来更加严谨的定义：* { margin:0;padding:0 } /*注释:定义所有的标签的margin和padding为0*/2.缩写和大小写问题css对于class和id是区分大小写的，所以当样式不生效的时候建议先检查一下大小写问题。我建议所有名称统一小写，当然你有自己的编码风格也可以用。例如第二单词大写，oneTwo在css里有很多缩写的习惯，推荐使用缩写格式。基本的缩写有 属性缩写和颜色缩写等。属性缩写的例子：margin-top:1px;margin-left:1px;margin-right:1px;margin-bottom:1px;可以简单的写成 marign:1px;代表了以上四个属性。节约了很多字节。顺便提一下，margin的缩写比较特殊，给不会的朋友看看。margin x;代表四个方向都为xmargin x y;代表上下为x,左右为y;margin x y z a;x代表上,y代表右,z代表下,a代表左
css之自动换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>css#wrap{white-space:normal; width:200px; }1.（IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行#wrap{word-break:break-all; width:200px;}或者#wrap{word-wrap:break-word; width:200px;}<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>效果：可以实现换行 2.（Firefox浏览器）连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条#wrap{word-break:break-all; width:200px; overflow:auto;}<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>效果：容器正常，内容隐藏 对于table 1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏