您的位置：首页 > Web前端 > JavaScript

页面布局技巧&&js相关知识点&&乱七八糟

2014-12-25 11:32 465 查看

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.

NOT运算符。这是摆立即在前面的功能，操作员，或子表达式扭转布尔表达式的意义。
lt
[if lt IE 5.5]
The less-than operator. Returns true if the first argument is less than the second argument.

小于运算符。如果第一个参数小于第二个参数，则返回true。
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.

小于或等于运算。如果第一个参数是小于或等于第二个参数，则返回true。
gt
[if gt IE 5]
The greater-than operator. Returns true if the first argument is greater than the second argument.

大于运算符。如果第一个参数大于第二个参数，则返回true。
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.

大于或等于运算。如果第一个参数是大于或等于第二个参数，则返回true。
( )
[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

AND运算符。如果所有的子表达式计算结果为true，返回true
|
[if (IE 6)|(IE 7)]
The OR operator. Returns true if any of the subexpressions evaluates to true.

OR运算符。返回true，如果子表达式计算结果为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>


这个例子在我的资料中有，另外，可以在“懒人图库”中下载到类似相关的例子。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航