推荐阅读
梦幻照片，PS给森林动漫人物照片添加梦幻柔光效果
我们做一张片子，是需要先理解片子，理解到位了，才能把照片里所要表达的意境表达准确，那么什么是意境呢?我认为“意境”应该这样去理解，它是艺术辨证法的基本范畴之一，也是美学中所要研究的重要问题。意境是属于主观范畴的“意”与属于客观范畴的“境”二者结合的一种艺术境界。这一艺术辨证法范畴内容极为丰富，“意”是情与理的统一，“境”是形与神的统一。 在两个统一过程中，情理、形神相互渗透，相互制约，就形成了“意境”。我们今天要做的片子是要走梦幻的意境的，方向一定要清晰，方向对了，才能达到目的地。 效果图： 我们开始作图，第一步我们进入Camera Raw 小分析下，我们在Camera Raw处理的时候一定要把皮肤调干净，尽量人和景分离，参数建议如下设置：
3ds Max制作死刑裁决游戏漫画宣传画设计教程
大家好，我是Petr Nasirov。我是一个白俄罗斯模型师，今年24岁。“死刑裁决”这个作品是作为“挑战09动漫展”作品制作的，赢得了第一名，在制作这个作品之前，我花了2天的时间研究漫画人物，当我看到“死刑裁决”的图像时我就决定要制造这个模型，因为他看上去很有趣，非常奇特。1、 素材收集素材收集是一个很重要的步骤。你在人物性格研究方面花的时间越多，后期就会越少犯错误在这个阶段，你需要研究所有的细节，人物的结构和他的衣服的设计和材质，确认每一个细节的地方都是合理且正确的。角色的创建是一个复杂的的多阶段的过程。如果你在制作尾声的时候发现一个错误，它可能要花更多的时间来纠正它。最坏的情况，你甚至可能需要修改多边形建模还有纹理。创建《死刑裁决》这个模型的时候，我充分利用了我在谷歌搜索里面找到的素材。关于《死刑裁决》的原设计有很多种，他们的一些元素吸引我，有些对我来说毫无吸引力。 有一张海报为我的作品中的一只手提供了参考，因为我喜欢它的细节和色彩。 另一张海报给了我一个人物的肩膀上的鸟的灵感。 这些收集来的素材，帮助我创建了属于我自己的人物角色。找到的有用素材越多，我的角色就会越丰满、越细腻!2、 基础多边形建模在收集的素材的基础上，先建一个简单的立体多边形出来，然后再在立体多边形的基础上面进行调整。在这个阶段中，我使用标准的3ds Max的材料，设置不同的颜色来模型元素。这不仅有助于我得到人物的基础形状，而且还得到了一些元素的照明效果。把重点放在调整模型上面。3、复杂多边形建模用3ds Max中的修饰工具Turbosmooth创建了一个高聚模型。衣服上的褶皱、身体上的褶皱和其他的一些小细节都只能在ZBrush里面制作。
Fireworks滤镜快速打造3D彩虹拖尾字特效
使用Fireworks中的Motion Trail滤镜可以快速制作出如下图所示的3D效果彩虹拖尾字。 图1 本例在Fireworks 8中文版中制作完成，具体操作步骤如下。 1.启动Fireworks 8中文版后，按Ctrl N新建一个文档，大小自定，然后使用文本工具在画布上单击，输入文本“天极网设计在线”，注意这里共七个字，设置字体为“隶书”，字号为64，结果如图2所示。 图2 2.在文本框中选中“天”，将颜色改为紫色，再选中“极”，改为蓝色，依此类推，将七个字的颜色分别改为紫、蓝、青、绿、黄、橙、红，即七彩虹的颜色，结果如图3所示。 图3
FW制作苹果水晶图形
Mac的风格大家一定不陌生，而且近些年越来越流行 我是做软件SKIN设计工作的，当然更加深有体会。但像这样风格的图标、按钮却不是那么好找。我之前经常为了找几个合适的水晶图标而浪费大把的时间。经过自己简单的分析，我发现这种图标的制作方法其实非常简单。完全可以把自己需要的图形、符号用我自创的方法做的和上图一样，晶莹剔透作图先要选择一个图形图像处理软件，现在有很多这样的软件，还有很多专业的图标制作软件这个是以前在第三方软件区贴的但我用的是Frieworks（FW）,这个软件操作起来很灵活，比较适合做网页的按钮大家如果想用PS的话，当然也可以废话不说了，我就来讲下FW下水晶图标的制作过程1、新建文件，参数自定，画布不要开得比图标小就可以了2、在画布上画出你需要制作的图形，文字也可以（只是文字将来要转换为路径）3、我做的是文字，字体为：Cooper Black(如果没有这种字体，找一个粗一些的，圆一些的，这样做出的文字看起来效果更好，而且比较可爱)，文字大好后就将文字转换为路径，如果是多个文字，转换路径后，还需要将文字解散群组4、选中其中的一个文字，在属性面板中对其填充颜色进行更改，更改为线性渐变5、再点击填充色的取色框对其渐变颜色进行调整，滑块的一边为白色，一边为红色，将红色的滑块拖到图中的位置。再用黑键头工具选中文字，对其渐变色调杆进行调节，改变渐变的方向。6、接下来需要将文字的边框色进行更改。点击属性面板右侧的边框色取色框，将颜色定为#AA0000，这样文字下面的反光效果就做出来了7、接下来要做文字上半部分的高光，这样才有水晶的光滑通透感。用钢笔工具勾出一个图形，如果图形的边缘不满意，可用白箭头改变曲线的曲力。如图8、将文字选中，ctrl+c，ctrl+v这个大家都应该知道是在干什么。然后同时选中文字和刚才绘制出的路径，选择Modify菜单里Combine Paths下的Intersect命令。//这是对路径进行修改的一组命令。第一个join是将路径进行组合，类似于图形之间的Group（群组）第二个Split，这个命令和join是相对应的，就是将路径解散第三个Union是将路径进行融合，和join不同的是，两个路径完全结合变为一个图形，而且除了ctrl+z以外无法逆向操作第四个Intersect命令是取两个相交图形所共有的部分第五个Punch使用后绘制出的图形在先绘制出的图形上打洞第六个Crop和Intersect的效果差不多，具体有什么不同，我暂时忘了//好了，接着将我们水晶字，使用Intersect命令后，我们得到了一个新图形，这就是文字的高光部分。9、对高光部分的颜色进行调节。首先把这部分的边框色去掉，（这部就不用我废话了吧），然后对其填充进行仔细的调节，这里的填充也是渐变填充，从白到白，不过其中一侧的不透明度为80，如图调节渐变方向控制杆，整体不透明度为90。好了，基本上完工了，最后一步，给R加上一个投影效果，这样看起来就更漂亮了这样，第一个字就做好了。后面的字作法和第一个一样。大家自己做吧，我的手已经酸了最终效果图这是源文件
最新发布
常用CSS长度单位
em相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。ex相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。px像素（Pixel）。相对长度单位。像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。pt点（Point）。绝对长度单位。em vs pxem 指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。em有如下特点：1. em的值并不是固定的；2. em会继承父级元素的字体大小。 长度单位优化方法：1. body选择器中声明Font-size=62.5%；2. 将你的原来的px数值除以10，然后换上em作为单位；
关于标题字符截取
今天做页面时遇到一个标题字符截取问题，就是在新闻等信息的标题列表中，为了适应表格的宽度，需要对过长的标题文字进行截取并在截取后的文字末端加上省略号，由于自己对PHP不熟悉，只能在在网上搜索答案，结果发现了几种方法，摘记于此。方法一：用CSS解决中英文混合字符串的截取省略问题众所周知，有很多方法可以实现这个功能，JavaScript，ASP，PHP都有各自的实现方法，但是面临的问题有很多，比如中英文混杂时或在某些编码下，容易造成截取出现乱码的问题，虽然大多数问题已经有比较成熟的解决方案，但在数据量比较大时，使用JavaScript，ASP，PHP实现这一功能，无疑会给客户端或服务器端造成比较大的资源开销。随着W3C的渐渐普及，许多网站都在进行着将传统表格转化为DIV+CSS的布局方式，我在研究CSS与DIV的一些特性时，发现了一个比较有趣的CSS，经过一系列的研究和实验以后，发现了一个使用DIV+CSS实现这一功能的另类方法，此方法在我所能测试均无问题，并且良好的兼容于各种编码及中英文混排的情况。 在Div中的方法：<DIV STYLE="width: 200px; border: 1px dashed red; overflow: hidden; text-overflow:ellipsis"> <NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR> <NOBR>就a是比如有一行文字，很长，表格内一行显示不下.</NOBR> <NOBR>就1是比如有一行文字，很长，表格内一行显示不下.</NOBR> <NOBR>就F是比如有一行文字，很长，表格内一行显示不下.</NOBR> <NOBR>就是 Like You Pig Very Very Very Much.</NOBR> </DIV> 在Table中的方法：<TABLE style="table-layout:fixed;border-collapse:collapse;font-size:12px;" border="1" width="200" bordercolor=#666666> <TR> <TD nowrap style="overflow:hidden;text-overflow:ellipsis;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</TD> </TR> </TABLE> 代码很简单，基本上应该很容易就可以看明白，主要在于“text-overflow”这个属性，此属性有2个值，分别是“ellipsis”和“clip”，简单的理解，第一个值会在截取之后在文字末端加上省略号，第二个值则不会。 此方法在IE6和IE7中显示是正确的，但在FIREFOX里达不到预期效果。方法二：PHP函数截取<? Function csubstr($str,$start,$len) { $strlen=strlen($str); $clen=0; for($i=0;$i<$strlen;$i++,$clen++) { if ($clen>=$start+$len) break; if(ord(substr($str,$i,1))>0xa0) { if ($clen>=$start) $tmpstr.=substr($str,$i,2); $i++; } else { if ($clen>=$start) $tmpstr.=substr($str,$i,1); } } return $tmpstr; } Function showShort($str,$len) { $tempstr = csubstr($str,0,$len); if ($str<>$tempstr) $tempstr .= "..."; return $tempstr; }?> 此方法我还没验证，等空来试用一下。
CSS使用技巧20则
本篇详细介绍了CSS使用技巧20则的文章主题, 包括:在不同页面上使用同样的导航代码,3D效果的按钮,为手持设备设计专门的CSS,IE中图片文字消失的问题,box黑客方法,直通到屏幕底部的背景色,CSS在容器内定位,CSS border的缺省值,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文件中放在后面的类的属性起作用。3. CSS border的缺省值通常可以设定边界的颜色，宽度和风格，如：border: 3px solid #000这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。4. CSS用于文档打印许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /><link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />第1行就是显示，第2行是打印，注意其中的media属性。但 应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。5. 图片替换技巧一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。比如你想整个卖东西的图标，你就用了这个图片：<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：<h1>Buy widgets</h1>但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：h1{background: url(widget-image.gif) no-repeat;height: image heighttext-indent: -2000px}注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。6. CSS box模型的另一种调整技巧这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：#box{width: 100px;border: 5px;padding: 20px}这样调用它：<div id="box">...</div>这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。但用CSS也可以达到同样的目的，让它们显示效果一致。#box{width: 150px}#box div{border: 5px;padding: 20px}这样调用：<div id="box"><div>...</div></div>这样，不管什么浏览器，宽度都是150点了。7. 块元素居中对齐如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：#content{width: 700px;margin: 0 auto}你会使用 <div id="content"> 来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：body{text-align: center}#content{text-align: left;width: 700px;margin: 0 auto}这会把网页内容都居中，所以在Content中又加入了text-align: left 。8. 用CSS来处理垂直对齐垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。9. CSS在容器内定位CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：#container{position: relative}这样容器内所有的元素都会相对定位，可以这样用：<div id="container"><div id="navigation">...</div></div>如果想定位到距左30点，距上5悖?梢哉庋??BR>#navigation{position: absolute;left: 30px;top: 5px}当然，你还可以这样：margin: 5px 0 0 30px注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。10. 直通到屏幕底部的背景色在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：#navigation{background: blue;width: 150px}较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。body{background: url(blue-image.gif) 0 0 repeat-y}此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。11. Block和inline元素对比所有的HTML元素都属于block和inline之一。block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。相反地，inline元素的特点是： 和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。用code class="inline">display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？ 让一个inline元素从新行开始；让块元素和其他元素保持在一行上；控制inline元素的宽度（对导航条特别有用）；控制inline元素的高度；无须设定宽度即可为一个块元素设定与文字同宽的背景色。12. 再来一个box黑客方法之所以有这么多box黑客方法，是因为IE在6之前对box的理解跟别人都不一样，它的宽度要包含边线宽和空白。要想让IE5等同其他浏览器保持一致，可以用CSS的方法：padding: 2em;border: 1em solid green;width: 20em;width/**/:/**/ 14em;第一个宽度所有浏览器都认得，但IE5.x不认得第2行的宽度设置，只因为那一行上有空白的注释符号（多么蠢的语法分析！），所以IE5.x就用20减掉一些空白，而其他浏览器会用14这个宽度，因为它是第2行，会覆盖掉第1行。13. 页面的最小宽度min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当 做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：<body><div class="container“>然后CSS这样设计：#container{min-width: 600px;width:expression(document.body.clientWidth < 600? "600px": "auto" );}第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。同样的办法也可以为IE实现最大宽度：#container{min-width: 600px;max-width: 1200px;width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto");}14. IE与宽度和高度的问题IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：.box{width: 80px;height: 35px;}html>body .box{width: auto;height: auto;min-width: 80px;min-height: 35px;}所有的浏览器都可以使用第一个box设置，但IE不认得第2段设置，因为其中用到了子选择器命令。第2个设置更特殊些，所以它会覆盖掉第1个设置。5. 字体变形命令text-transform 命令很有用，它有3个值：text-transform: uppercase, text-transform: lowercase 和 text-transform: capitalize。第1个会把文字变成全大写，第2个变成全小写，第3个变成首字母大写。这对拼音文字非常有用，即使输入时有大小写错误，在网页上也 看不到。16. IE中图片文字消失的问题有时会遇到文字或背景图突然消失的问题，刷新一下又出现了，这在靠近漂浮元素时更容易发生（注：没见过）。此时，可以为消失的元素设定： position: relative ，如果不行，再考虑为这些元素指定一个宽度试试。17. 不可见文字不 论因为何种原因希望某些网页文字不在浏览器中显示，比如为了打印或为了小屏幕而让某些文字不显示，都可以用 display: none 。这非常简单，但有时对某些人这有点没用，他们能去掉这个控制，这时就要用到： position: absolute; left: -9000px 。这实际上是把文字指定在页面以外显示。18. 为手持设备设计专门的CSS也就是手机／PDA等小屏幕用户，可以专门设计一个CSS来让网页显示更舒服些。为此，可以把浏览器窗口调整到150点宽来看效果。指定专门的手持设备的CSS的语法是：<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />也可以阅读专门的手持设备可用性。19. 3D效果的按钮以前要想制作带有3D效果，并且点击下去还会变化的按钮，就得用图片替换的方法，现在CSS就可以了：a{display: block;border: 1px solid;border-color: #aaa #000 #000 #aaa;width: 8em;background: #fc0;}a:hover{position: relative;top: 1px;left: 1px;border-color: #000 #aaa #aaa #000;}至于效果，还可以自己调整了。20. 在不同页面上使用同样的导航代码许多网页上都有导航菜单，当进入某页时，菜单上相应这一项就应该变灰，而其他页亮起来。一般要实现这个效果，需要写程序或专门为每一页做设计，现在靠CSS就可以实现这个效果。首先，在导航代码中使用CSS类：<ul><li><a href="#" class="home">Home</a></li><li><a href="#" class="about">About us</a></li><li><a href="#" class="contact">Contact us</a></li></ul>然后分别为每一页的Body指定一个id，和上面类同名。如<body id="contact">。然后设计CSS如下：#home .home, #about .about, #about .about{commands for highlighted navigation go here}这里，当id设为home时，.home就会起作用，也就是class设为home的那一行导航条就会显示出特殊效果来。其他页也是如此。
CSS布局中最小高度的妙用
最小高度可以设定一个BOX的最小高度，当其内容较少时时，也能保持BOX的高度为一定，超出就自动向下延伸，但到目前为止，只有Opera 和 Mozilla 支持，IE7开始也支持了，但IE7处于测试阶段，等正式版发布到普及需一段也许比较长的时间，除非MS把它捆绑在某个操作系统上， 如何在现有基础上（IE6 80-90%），合理、妙用最小高度了？ 假定有二个BOX，我们需要它的最小高度为150PX。CSS div.box1,div.box2{ width: 300px; min-height: 150px; background: #EEE; float: left; margin-right: 20px; }xhtml<div class="box1">IE中没保持最小高度为150px</div><div class=:box2">;最小高度可以设定一个BOX的最小高度，当其内容较少时时，也能保持BOX的高度为一定最小高度可以设定一个BOX的最小高度，当其内容较少时时，也能保持BOX的高度为一定</div>现在的效果,IE中没保持最小高度为150px。 <!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" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="Keywords" content="最小高度,min-height,CSS hack" /><meta http-equiv="Description" content="最小高度可以设定一个BOX的最小高度，当其内容较少时时，也能保持BOX的高度为一定ext)" /><meta http-equiv="pragma" content="no-cache" /><meta name="author" content="forestgan" /><meta name="copyright" content="http://www.forest53.com" /><title>CSS布局中最小高度（min-height）的妙用</title><style type="text/css">#wrap{width: 620px;margin: 2em auto;font-size: 75%;}div.box10,div.box20{ width: 300px; min-height: 150px; background: #EEE; margin-right: 20px; float: left; text-align:left; } p{padding: 1em; margin: 0;}</style></head><body> <div id="wrap"> <div class="box10"> <p>IE中没保持最小高度为150px</p> </div> <div class="box20" style="margin-right: 0;"> <p>最小高度可以设定一个BOX的最小高度， 当其内容较少时时，也能保持BOX的高度为一定最小高度可以设定一个BOX的最小高度
用CSS定义表格与模拟表格
表格的模拟 1、模拟前的建议: DIV就是DIV 而不是table,极力反对变下面这样的DIV模拟表格,偶尔也考虑考虑一下亲和力<div> <div> <div>...</div> </div></div> 2、两列多行的数据显示: 两列多行的数据显示应用得最多的是文章列表之类的,一般来说主要由标题,时间组成的.我选择ol来做~是下面演示的是有有序列表~可能你会问我~为什么不用ul呢??在参考中说到ol:绘制文本的编号列表,ul:绘制文本的项目符号列表 简单的说就是ol是有序列表,ul是无序列表html部分<ol> <li><a href="#" title="晚上我没吃饭">晚上我没吃饭</a>2-13</li> <li><a href="#" title="今天是中国的情人节,要一个人过">今天是中国的情人节,要一个人过</a>2-12</li> <li><a href="#" title="下午朋友来看我">下午朋友来看我</a>2-11</li> <li><a href="#" title="^_^ 发工资拉">^_^ 发工资拉,</a>2-10</li> <li><a href="#" title="...">...........</a> ....</li></ol>
根据用户浏览器及分辨率调用不同的CSS样式文件
DIV CSS教程：根据用户浏览器及分辨率调用不同的CSS样式文件 （未测试 来自网络 请自行验证） var IE1024=""; var IE800=""; var IE1152=""; var IEother=""; 引号里面分别填写，用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。 var Firefox1024=""; var Firefox800=""; var Firefox1152=""; var Firefoxother=""; 引号里面分别填写，用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。 var Other1024=""; var Other800=""; var Other1152=""; var Otherother=""; 引号里面分别填写，用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。 不判断分辨率，只判断浏览器 应E.Qiang提议，编如下代码。实现根据浏览器类型自动调用不同CSS。
DivCSS布局实例：三行单列 中间自适应 上下固定高度
CSS布局：三行单列，上下固定高度，中间自适应，且内容垂直居中。 firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 测试通过。 对于非ie内核浏览器，通过设定display:table、display:table-row和display:table-cell来模拟表格的表现形式。 最外层#box { display:table; }，高度100%，其子层#header/#main/#footer为{ display:table-row; }，因此可以模拟表格的行效果，上下定高，则中间不定高的层自适应高度。 #wrap层为{ display:table-cell; }模拟单元格，因此可以设定{ vertical-align:middle; }，垂直居中。 由于Win IE不支持{ display:table; }，因此，只能采取定位的方式实现。<!--[if IE]>内是针对ie的设定。<!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>DivCSS布局实例：三行单列 上下固定高度 中间自适应</title> <style type="text/css"> * { margin:0; padding:0; } html, body, #box { height:100%; font:small/1.5 "宋体", serif; } body { text-align:center; } #box { text-align:left; background:#666; display:table; width:80%; margin:0 auto; position:relative; } #box > div { display:table-row; } #header, #footer { background:#fcc; height:50px; } #main { background:#ccf; } #main #wrap { display:table-cell; background:#ffc; vertical-align:middle; } #text { text-align:center; } </style> <!--[if IE]> <style type="text/css"> #header, #footer { width:100%; z-index:3; position:absolute; } #footer { bottom:0; } #main { height:100%; z-index:1; position:relative; } #main #wrap { position:absolute; top:50%; width:100%; text-align:left; } #main #text { position:relative; width:100%; top:-50%; background:#ccc; } </style> <![endif]--> </head> <body> <div id="box"> <div id="header">header</div> <div id="main"> <div id="wrap"> <div id="text"> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> </div> </div> </div> <div id="footer">footer</div> </div> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
精选div+css表单布局的五个小技巧
div css表单布局的五个小技巧可以帮助你更灵活的控制表单，使页面更加满意。 1、表单文本输入的移动选择： 在文本输入栏中，如果加入了提示，来访者往往要用鼠标选取后删除，再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <textarea> 中，一切就会变得简单多了，如： 类似的，可以加入代码到<input>。 2、表单输入单元点击删除： 本列同上则作用类似，只是使用鼠标上略有变化，需要点击而不像上则的只要鼠标覆盖。如： 点击输入单元后，提示信息会删除，是不是很方便。
HTML与CSS在Flash中的应用
HTML与CSS在Flash中的应用:不小心看到同事Den在弄个小东西：在Flash里使用HTML和CSS，代码是这样： 这个是加载外部CSS跟HTML（其实是加载XML当HTML用-_-b ）的。后来Den写了两种把样式写在AS里的方式： 其实HTML也可以写在AS里面，直接拼string就行。对于CSS在写在AS里还是加载外部CSS就要看情况了，用Web上还要考虑请求数，文件大小，缓存，更重要的是维护成本。不过在Web应用我也没想到有什么比较适合的应用，在浏览器里使用HTML加载Flash之后再用Flash加载HTML和CSS意义并不大，而且支持不是一般的弱，看一下支持的HTML标签跟CSS属性，＝。＝ 本来想用来解决中文下划线的问题，结果还是不行，据说别人是用flash画下划线滴。浏览器的应用玩玩就算了。还是留在桌面应用吧。
CSS设计网页头部的一些写法
在div+css布局中，一般都这样来整体构架的：<div id="header"></div><div id="center"></div><div id="footer"></div>而对于header部分，肯定要显示网站标题，除了显示网站标题外，还可能要显示其他比较重要的对象，比如网站的导航栏：<div id="header"><div id="title">这里是网站的标题</div><div id="nav">这里是网站导航栏</div></div>很多人一般都这样写的，当然这样写并没有什么语法错误。但对于div来说有个原则，那就是尽少的使用div的嵌套（和table一样的缺点：1、对于用户：浏览器要消耗资源对嵌套的关系进行解析，影响速度；2、对于搜索：搜索引擎对嵌套的层数可能有所限制）。而且这样写带给我们的可读性也不算太高。那如何才是最优化，最科学的写法呢？我们选用其他的Xhtml代码来取代上面的div，那又如何选择呢？？首先标题的选择――我们知道在xhtml中h1-h6是表示标题的，而header里的标题在全页来看是最重要的，我们选择h1来表示标题是顺其自然的。其次导航栏的选择――导航栏是由多个小块内容组成，我们选择无序列表<ul><li></li></ul>来表示菜单最合适不过了！ 最后以上的内容可以优化成：<div id="header"><h1>这里是网站的标题</h1><ul><li>这里是网站导航栏</li></ul></div>