css中em px 区别,以及em的容器继承问题
[ 2014-01-16 14:57:45 | 作者: admin ]
网站制作中字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应。px是绝对单位,不支持IE的缩放,em是相对单位。
首先了解一下em是何物?
em指字体高,任意浏览器的默认字体高都是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会继承父级元素的字体大小。
重写步骤:
...
阅读全文…
首先了解一下em是何物?
em指字体高,任意浏览器的默认字体高都是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会继承父级元素的字体大小。
重写步骤:
...
阅读全文…
目前比较全的CSS重设(reset)方法总结
[ 2014-01-16 14:55:59 | 作者: admin ]
在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视觉效果(没有兼容性问题)。但是,我们并没有生活在这个完美的世界,现实中发生的失窃却总是恰恰相反,很多CSS样式在不同的浏览器中有着不同的解释和呈现。
当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中,有一些都是以自己的方式去理解CSS规范,这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示,但有些浏览器却并没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性问题。更糟的是,有的浏览器完全无视CSS的一些声明和属性。
正因为上述冲突和问题...
阅读全文…
当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中,有一些都是以自己的方式去理解CSS规范,这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示,但有些浏览器却并没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性问题。更糟的是,有的浏览器完全无视CSS的一些声明和属性。
正因为上述冲突和问题...
阅读全文…
解决js下跳转无referer的方法
[ 2013-11-30 22:34:51 | 作者: admin ]
HTTP Header referer这玩意主要是告诉人们我是从哪儿来的,就是告诉人家我是从哪个页面过来的,可以用于统计访问本网站的用户来源,也可以用来防盗链。获取这个东西最好的方式是js,如果在服务器端获取(PHP方法如:$_SERVER['HTTP_REFERER']) 不靠谱,人家可以伪造,用js获取最好,人家很难伪造,
方法:利用js的 document.referer 方法可以准确地判断网页的真实来路。 目前百度统计,google ads统计,CNZZ统计,都是用的这个方法。防盗链也很简单了,js里判断来路url如果不是本站不显示图片。
众所周知,我们web开发人员痛恨IE浏览器,因为IE不支持标准,标准外的默认行为又和其他浏览器经常不一致:
在IE中用javascript做跳转,比如用window.location.href = “”; google如果使用document.referrer无法取到浏览器请求的HTTP referrer,因为IE清空了
...
阅读全文…
方法:利用js的 document.referer 方法可以准确地判断网页的真实来路。 目前百度统计,google ads统计,CNZZ统计,都是用的这个方法。防盗链也很简单了,js里判断来路url如果不是本站不显示图片。
众所周知,我们web开发人员痛恨IE浏览器,因为IE不支持标准,标准外的默认行为又和其他浏览器经常不一致:
在IE中用javascript做跳转,比如用window.location.href = “”; google如果使用document.referrer无法取到浏览器请求的HTTP referrer,因为IE清空了
...
阅读全文…
用jQuery解决input中placeholder值在ie中无法支持的问题
[ 2013-11-30 10:30:11 | 作者: admin ]
ie中不支持input的表单项目提示,用jQuery解决input中placeholder值在ie中无法支持的问题
阅读全文…
$(function(){
if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
...if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
阅读全文…
Bootstrap IE6 兼容库
[ 2013-11-30 10:27:32 | 作者: admin ]
相关网址:http://www.bootcss.com/p/bsie/
简介
bsie弥补了Bootstrap对IE6的不兼容。Bootstrap是 twitter.com 推出的非常棒的web UI工具库。
目前,bsie能在IE6上支持大部分bootstrap的特性,可惜,还有一些实在无法支持...
下面的这个表格就是当前已经被支持的bootstrap的组件和特性:
文件用途介绍
bootstrap/css/bootstrap.css :
这是bootstrap原始的css文件。
bootstrap/css/bootstrap.min.css :
这是bootstrap原始的压缩后的css文件。
bootstrap/css/bootstrap-ie6.css :
这是bsie的主要的css文件。
bootstrap/css/bootstrap-ie6.min.css :
...
阅读全文…
简介
bsie弥补了Bootstrap对IE6的不兼容。Bootstrap是 twitter.com 推出的非常棒的web UI工具库。
目前,bsie能在IE6上支持大部分bootstrap的特性,可惜,还有一些实在无法支持...
下面的这个表格就是当前已经被支持的bootstrap的组件和特性:
文件用途介绍
bootstrap/css/bootstrap.css :
这是bootstrap原始的css文件。
bootstrap/css/bootstrap.min.css :
这是bootstrap原始的压缩后的css文件。
bootstrap/css/bootstrap-ie6.css :
这是bsie的主要的css文件。
bootstrap/css/bootstrap-ie6.min.css :
...
阅读全文…
jquery 几个表单判断
[ 2013-11-29 15:13:29 | 作者: admin ]
$(document).ready(function() {
$(“form”).submit(function(){
if ($(“select[name='boardid']“).val() == “”){
alert(“对不起,请选择类别!”);
$(“select[name='boardid']“).focus();
return false;
}
if ($(“select[name='boardid']“).val() == “请选择分类”){
alert(“对不起,请选择类别!”);
$(“select[name='boardid']“).focus();
return false;
}
if ($(“input[name='txtcontent']“).val() == “”){
alert(“对不起,请填写内容!”)
$(“input[name='txtcontent']“).focus();
...
阅读全文…
$(“form”).submit(function(){
if ($(“select[name='boardid']“).val() == “”){
alert(“对不起,请选择类别!”);
$(“select[name='boardid']“).focus();
return false;
}
if ($(“select[name='boardid']“).val() == “请选择分类”){
alert(“对不起,请选择类别!”);
$(“select[name='boardid']“).focus();
return false;
}
if ($(“input[name='txtcontent']“).val() == “”){
alert(“对不起,请填写内容!”)
$(“input[name='txtcontent']“).focus();
...
阅读全文…
jQuery $(this).attr(‘checked’)出现undefined的问题。checkbox问题
[ 2013-10-21 16:23:40 | 作者: admin ]
最近在对一个项目的前端进行调整时,发现项目原来用的低版本的jQuery存在一些问题,于是就把jQuery换成了比较新的v1.72,但是发现原来$(this).attr(‘checked’)返回的不再是true or false,选中的情况下返回checked,未选中的情况返回undefined,看了jQuery文档后
原来v1.6以后$(this).attr(‘checked’)就返回checked和undefined,
v1.6以前返回true和false,
v1.6以后可以使用$(this).is(‘:checked’) 或者 $(this).prop(‘checked’) 来返回true和false
原来v1.6以后$(this).attr(‘checked’)就返回checked和undefined,
v1.6以前返回true和false,
v1.6以后可以使用$(this).is(‘:checked’) 或者 $(this).prop(‘checked’) 来返回true和false
JavaScript 字符串转换数字
[ 2013-10-18 10:48:20 | 作者: admin ]
方法主要有三种
转换函数、强制类型转换、利用js变量弱类型转换。
1. 转换函数
js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数,后者把值转换成浮点数。只有对String类型调用这些方法,这两个函数才能正确运行;对其他类型返回的都是NaN(Not a Number)。
在判断字符串是否是数字值前,parseInt()和parseFloat()都会仔细分析该字符串。parseInt()方法首先查看位置0处的字符,判断它是否是个有效数字;如果不是,该方法将返回NaN,不再继续执行其他操作。但如果该字符是有效数字,该方法将查看位置1处的字符,进行同样的测试。这一过程将持续到发现非有效数字的字符为止,此时parseInt()将把该字符之前的字符串转换成数字。
例如,如果要把字符串 "1234blue "转换成整数,那么parseIn...
阅读全文…
转换函数、强制类型转换、利用js变量弱类型转换。
1. 转换函数
js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数,后者把值转换成浮点数。只有对String类型调用这些方法,这两个函数才能正确运行;对其他类型返回的都是NaN(Not a Number)。
在判断字符串是否是数字值前,parseInt()和parseFloat()都会仔细分析该字符串。parseInt()方法首先查看位置0处的字符,判断它是否是个有效数字;如果不是,该方法将返回NaN,不再继续执行其他操作。但如果该字符是有效数字,该方法将查看位置1处的字符,进行同样的测试。这一过程将持续到发现非有效数字的字符为止,此时parseInt()将把该字符之前的字符串转换成数字。
例如,如果要把字符串 "1234blue "转换成整数,那么parseIn...
阅读全文…