推荐阅读
Photoshop调色调出自然唯美的肤色效果人像后期照片
本教程向大家分享了PS后期修图秘笈及人像完美润色技巧，教程难度不是很大，但技巧基础性很强，对于PS初学者来说，教程实用性很强。感谢原创作者么么茶的分享，推荐给脚本之家的朋友，喜欢的朋友一起来学习吧目前市面上有许多图像处理软件，其中如美图秀秀等傻瓜式软件虽然用起来方便，但修图效果却远远不及photoshop。Photoshop中有许多功能都可用于后期修图，即使是很细微的变动都可对最后的图像结果有很大的影响。在本PS教程中，笔者将会通过一些调整图层、笔刷、蒙版等很基础的PS工具来完成对人像的润色。PS高手分享后期修图秘笈最终效果图：图01素材：美女模特第一步：
Photoshop另类抠图方法-线条的妙用
Photoshop另类抠图方法-线条的妙用。 原图 最终效果图 1.打开原图，将原图复一层,用钢笔工具先将车子里大概轮廓抠出，如下图1 图<1> 2.接着往下抠,我的习惯先从容易的下手,继续用钢笔抠不需要的,到了车轮的钢丝时,有点头脑发热了,这时,先冷静,如果再用钢笔抠可能会浪费不少时间,我们换个方法,用直线描 (思路:既然抠不出,就直接照着原图画,因为钢丝都是直线的) 选取直线工具如图2，设置如图3
利用画笔和混合模式快速打造梅花图
君自故乡来，应知故乡事。 来日倚窗前，寒梅著花未？ 梅花 ――多少文人雅士的至爱，又有多少墨客挥毫绘之 偶没绘画的天分、也不曾学习过绘画 不过，好在偶们有Photoshop呵呵~今天不用宣纸不用着墨，只要打开电脑把PS请出来 大家都可以潇洒的"挥毫"，绘制出一幅漂亮的梅花图来也~ 使用的版本为：Photoshop CS2适合的读者为：初级入门 操作的难易度：容易教程要点：画笔、图层混合模式废话说了一通，还是先看看效果吧：具体步骤：
PS制作立体透视字
这篇教程教飞特的朋友们用PS制作立体透视字，教程似有有点年代了，刚刚看到论坛有人贴了这个效果。把这个教程转发下，希望对飞特的朋友们有所帮助。先看看最终效果具*作步骤如下： 1、打开PS 执行文件―新建―新建550X400像素空白文档 2、输入所要制作的黑色文字（字体最好选粗厚些的字体）本教程字体汉仪方叠体简 3、对文字层点右键将文字栅格化（一定要栅格化）将矢量文字变成像素图像 快捷键CTRL+T(自由变换)将文字变形！达到我们想要的角度跟效果！这里要注意透视原理！ 4、按CTRL+J复制图层得到图层副本！双击图层副本添加图层效果 斜面浮雕（内斜面，斜面的宽度设为1、2 像素就可以了，不要太宽）颜色叠加（添加上自己需要的颜色，我们这里用红色）
最新发布
常用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>