HTML、CSS以及Javascript常用且实用的技巧代码[1]

  • 作者:不详
  • 来源:56gee
  • 更新时间:2012-06-18 12:32:11
  • 点击:12331
[0分]
技巧一
1、当文字与图片在一行,需要将文字与图片底对齐,需要这样写:
<li>记住密码<img src="http://www.56gee.com/sjjl/" align="bottom" style="margin-bottom:-4px"/></li>
2、当文字与图片在一行,需要将文字与图片居中对齐,需要这样写:
<li>记住密码<img src="http://www.56gee.com/sjjl/static/img/xyx.jpg" align="middle"/></li>
3、更改IE“查看源代码”菜单打开的编辑器,方法如下:
打开注册表编辑器,在开始-运行中输入regedit,找到以下位置: HKEY_LOCAL_MACHINE"SOFTWARE"Microsoft"Internet Explorer"View SourceEditor"Editor Name"修改默认的数据为"D:"Program Files"EmEditor"EmEditor.exe";切换到IE中查看源代码就可以看到效果了。如果View Source Editor"Editor Name项没有,可以自己新建。
4、自动最大化窗口,在 <body> 与 </body> 之间加入:
<SCRIPT language="javascript">
setTimeout(’top.moveTo(0,0)’,5000);
setTimeout(’top.resizeTo(screen.availWidth,screen.availHeight)’,5000);
</script>
5、window.opener 实际上就是用window.open打开的窗体的父窗体。
比如在父窗体parentForm里面,通过 window.open("subForm.html"),那么在subform.html中 window.opener就代表parentForm,可以通过这种方式设置父窗体的值或者调用js方法。
1)、window.opener.test(); ---调用父窗体中的test()方法;
2)、如果window.opener存在,设置parentForm中stockBox的值。
if (window.opener && !window.opener.closed){
    window.opener.document.parentForm.stockBox.value = symbol;
}
6、刷新页面的方法——
Javascript刷新页面的方法:
1)、 history.go(0)
2)、 location.reload()
3)、 location=location
4)、 location.assign(location)
5)、 document.execCommand(’Refresh’)
6 )、window.navigate(location)
7)、 location.replace(location)
8)、 document.URL=location.href

自动刷新页面的方法——
1)、页面自动刷新:把<meta http-equiv="refresh" content="20">加入<head>区域中
2)、页面自动跳转:把<meta http-equiv="refresh" content="20;url=http://www.webjx.com">加入<head>区域中
3)、js自动刷新页面
<script language="JavaScript">
function myrefresh()
{
window.location.reload();
}
setTimeout(’myrefresh()’,1000); //指定1秒刷新一次
</script>
4)、JS刷新框架
a、刷新包含该框架的页面用
<script language=JavaScript>
parent.location.reload();
</script>
b、子窗口刷新父窗口
<script language=JavaScript>
self.opener.location.reload();
</script>
(或<a href="http://www.56gee.com/sjjl/javascript:opener.location.reload()">刷新</a> )
c、刷新另一个框架的页面
<script language=JavaScript>
parent.另一FrameID.location.reload();
</script>
7、用过CSS hack应该知道,用下划线命名是一种hack,如使用“_style”这样的命名,可以让IE外的大部分浏览器忽略这个样式的定义,所以使用“_”做为命名时的分隔符是不规范的。在做CSS检查时会出现错误提示。
8、IE条件注释写法
<!--[if !IE]>除IE外都可识别<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
9、CSS HACK 写法
第一种:
.div {
background:orange;
*background:green !important;
*background:blue;
}
第二种:
.div {
margin:10px;
*margin:15px;
_margin:15px;
}
第三种:
#div { color: #333; }
*+html #div { color: #999; }
* html #div { color: #666; }

技巧二
1、IE6及以下不识别a 标签外的:hover伪类,在火狐,IE7里能正确达到效果,解决办法:
#show li.s1{ border:1px solid #ff9900; background:#454242;}
#show li.s2{ border:1px solid #D9D8D8; background:#312E2E;}
<li></li>
2、为元素设置hasLayout
很多IE6(或IE7)的问题可以用设置hasLayout值的方法来解决,最简单的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然,zoom也可以用,但这不是CSS的一部分)。比如设置为height:1%。如果父元素没有设置高度,那么元素的物理高度并不会改变,但是,已经具备hasLayout属性。
3、IE6下字符重复出现
确保浮动元素设置了 display:inline;
在浮动元素中使用 margin-right:-3px;
4、样式优先级
A、内联样式 [1.0.0.0]
B、ID选择器 [0.1.0.0]
C、类,属性,伪类 选择器 [0.0.1.0]
D、元素标签,伪元素 选择器 [0.0.0.1]
5、一个元素垂直居中的css写法
#exm{
position:absolute;
left:50%;
top:50%;
z-index:1;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-52px;
}
6、zoom : normal | number
设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。虽然此属性不可继承,但是它会影响对象的所有子对象( children )。
7、图片跟文字并排时, 要实现图片文字垂直居中:
1) 将line-height:设置成图片的高度,或者图片父元素的高度.
2) 再将图片的CSS设置vertical-align:middle;
8、li 元素中包含 a img 元素的时候,IE6下出现空白
解决方法 一:使 li 浮动,并设置 img 为块级元素
解决方法 二:设置 ul 的 font-size:0;
解决方法 三:设置 img 的 vertical-align: bottom;
解决方法 四:设置 img 的 margin-bottom: -5px;
收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华