1、frameset的使用
基本使用：
<frameset frameborder="no" framespacing="0" rows="160px,*,205px" />
<frame name="top" noresize="noresize" scrolling="no" src="top.html">
<frame name="center" noresize="noresize" scrolling="no" src="index1.html">
<frame name="bottom" noresize="noresize" scrolling="no" src="bottom.html">
</frameset>
这是一段基本的frameset使用代码，他的作用是把“可视化的界面（就是我们当前在屏幕上看到的界面）”分成上中下三个部分。以下是各个属性的解释：
noresize：设置框架大小是否能手动调节。
scrolling：当前部分是否出现滚动条。
frameborder：设置是否显示框架边框。
framespacing：表示框架与框架之间的保留的空白距离。一般设置为0，不留空白。
<noframes></noframes>标志对也是放在<frameset></frameset>标志对之间，用来在那些不支持框架的浏览器中显示文本或图像信息。在此标志对之间先紧跟<body></body>标志对，然后才可以使用我们熟悉的任何标志。也就是说一般是这个架构：
<html>
<head>
<title>综合示例</title>
</head>
<frameset cols="25%,*">
<frame src="menu.htm" scrolling="no" name="Left">
<frame src="page1.htm" scrolling="auto" name="Main">
<noframes>
<body>
<p>对不起，您的浏览器不支持“框架”！</p>
</body>
</noframes>
</frameset>
</html>
缺点：
由于frameset只能在当前可视化的界面显示，如果所布局的页面大于当前可视化的界面，就不适合用frameset了。
2、盒子模型
这里有几点需要注意，width和height只是指的内部的content，而不包括，margin、border和padding。
3、让元素居中技巧
让元素居中小技巧：{width:随便px;margin:0auto;}，这样就可以让元素居中显示了，要注意的是宽度一定要设置，但是高度是可设置也可不设置的。
4、调整圆角方角的代码
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
border-radius:10px;
可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。
5、透明度调节
filter:alpha(opacity=90); /* ie 有效*/
-moz-opacity:0.9; /* Firefox 有效*/
opacity: 0.9; /* 通用，其他浏览器有效*
6、用绝对定位进行“脱离文档流的定位”
用绝对定位可以让“子元素”从“父元素”的文档流中脱离出来，进行布局。
效果如下：
代码如下：
<div style="width:300px;height:300px;background-color:#C70101;position:relative;">父元素</div>
<div style="width:200px;height:200px;background-color:#8FEE00;position:absolute;top:200px;left:200px;">子元素</div>
7、a元素及其伪类
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
8、图片与文字同排垂直居中
第一种，没有图片的情况下。
效果图：
代码：
</head>
<style>
#out{
height:33px;
background-color:#999;
line-height:33px;
}
</style>
<body>
<div id="out">
<a>图片和文字</a>
</div>
</body>
说明：
我们只是需要在外层元素“out”上设定其height和line-height即可，并且高度一致。文字上有没有行内元素无所谓。
第二种，有图片的情况下。
效果图：
代码：
</head>
<style>
#out{
height:33px;
background-color:#999;
}
#out img{
vertical-align:middle;
}
</style>
<body>
<div id="out">
<img src="1.gif" />
<a>图片和文字</a>
</div>
</body>
说明：
文字与图片同排，在设置div高度同时再对此css样式的图片“img”样式设置vertical-align:middle垂直居中属性即可，不需要设置line-height属性。同时，文字上有没有行内元素无所谓。
9、条件注释判断浏览器
<!--[if !IE]><!-->除IE外都可识别<!--<![endif]-->
<!--[if IE]>所有的IE可识别<![endif]-->
<!--[if IE 6]>仅IE6可识别<![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别<![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别<![endif]-->
<!--[if IE 7]>仅IE7可识别<![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别<![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别<![endif]-->
<!--[if IE 8]>仅IE8可识别<![endif]-->
<!--[if IE 9]>仅IE9可识别<![endif]-->
| 项目 | 范例 | 说明 |
| ! | [if !IE] | The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression. |
| lt | [if lt IE 5.5] | The less-than operator. Returns true if the first argument is less than the second argument. |
| lte | [if lte IE 6] | The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument. |
| gt | [if gt IE 5] | The greater-than operator. Returns true if the first argument is greater than the second argument. |
| gte | [if gte IE 7] | The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument. |
| ( ) | [if !(IE 7)] | Subexpression operators. Used in conjunction with boolean operators to create more complex expressions. |
| & | [if (gt IE 5)&(lt IE 7)] | The AND operator. Returns true if all subexpressions evaluate to true |
| | | [if (IE 6)|(IE 7)] | The OR operator. Returns true if any of the subexpressions evaluates to true. |
<!--[if lt IE 9]>
加载CSS1
<!--[else]>
加载CSS2
<![endif]-->
这样有效是有效,但是用HTML VALIDATOR里,报错,因为这个不符合XHTML 1.1的规范,
如果把ELSE语句去掉,则正确.
方法1：
加载CSS2
<!--[if lt IE 9]>
加载CSS1(可以把要重写的写在这里).
<![endif]-->
10、dl、dd、dt用法
dl代表的是列表，和ul差不多，但dl没有默认样式（如项目符号等）。
dt，dd代表的是列表项，和li差不多。这两个列表项的性质是相同的，主要是为了解决一个列表中，放两种不同样式的列表项的问题。
<dl>标记定义了一个定义列表，定义列表中的条目是通过使用<dt>标记(“definition title”，定义标题)和<dd>标记(“definition description”，定义描述)创建的。<dt>给出了术语名，<dd>标记给出了术语的定义。
也就是说<dt>用来创建列表中的上层项目，<dd>用来创建列表中最下层项目，<dt>和<dd>都必须放在<dl>< /dl>标志对之间。
代码：
<dl>
<dt>我们在做列表标题</dt>
<dd>我们在做列表</dd>
<dd>我们在做列表</dd>
<dd>我们在做列表</dd>
<dd>我们在做列表</dd>
</dl>
11、CSS z-index 属性
注意：z-index属性是配合绝对定位用的，没有了绝对定位，这个属性没有没存在的意义了。
作用：
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
【实例】
Html代码：
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" />
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>
</html>
图片：
12、CSS 渐变背景
/* 渐变背景 */
FILTER: progid : DXImageTransform.Microsoft.Gradient ( gradientType = 0,
startColorStr = #fff, endColorStr = #EBF6FC ); /*IE 6 7 8*/
background: -ms-linear-gradient(top, #fff, #EBF6FC); /* IE 10 */
background: -moz-linear-gradient(top, #fff, #EBF6FC); /*火狐*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff),
to(#EBF6FC) ); /*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff),
to(#EBF6FC) ); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #fff, #EBF6FC);
/*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #fff, #EBF6FC); /*Opera 11.10+*/
13、html form 中Enctype=multipart/form-data 的作用
ENCTYPE=”multipart/form-data”用于表单里有图片上传。
<form name=”userInfo” method=”post” action=”first_submit.php” ENCTYPE=”multipart/form-data”>
表单标签中设置enctype=”multipart/form-data”来确保匿名上载文件的正确编码。
如下：
<tr>
<td height=”30″ align=”right”>上传企业营业执照图片：</td>
<td><INPUT TYPE=”FILE” NAME=”uploadfile” SIZE=”34″ onChange=”checkimage()”></td>
</tr>
就得加ENCTYPE=”multipart/form-data”。
表单中enctype=”multipart/form-data”的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，才能完整的传递文件数据，进行下面的操作.
enctype=”multipart/form-data”是上传二进制数据; form里面的input的值以2进制的方式传过去。
form里面的input的值以2进制的方式传过去，所以request就得不到值了。 也就是说加了这段代码,用request就会传递不成功,取表单值加入数据库时，用到下面的：
SmartUpload su = new SmartUpload();//新建一个SmartUpload对象
su.getRequest().getParameterValues();取数组值
su.getRequest().getParameter( );取单个参数单个值
14、js前端触发QQ客服事件
其实就一行代码：
<a href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes" target="_blank"></a>
这个例子在我的资料中有，另外，可以在“懒人图库”中下载到类似相关的例子。
232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
