标签归档:设计

奇怪的浮动Float

在百度知道搜资料的时候看到一个网友问了关于CSS浮动的问题,问题地址在这里,直接看代码:

<body>
<div style="background:red; height:100px; width:200px; float:left;">111111111111111</div>
<div style="background:grey; height:100px; width:200px;">222222222222222</div>
</body>

看了上面代码很简单,相信从理论上你也应该看出会是什么样的一个显示方式。但问题就在于你没想到的地方。看下面的效果:

111111111111111
222222222222222

再试试不同的浏览器,我使用的IE和Chrome,可以明显的看出两者的不同之处。为了更明显的看出区别在哪,你可以本地新建一个文档,贴入下面的代码:

<body>
<div style="background:red; height:100px; width:200px; float:right;">111111111111111</div>
<div style="background:grey; height:100px; width:200px;">222222222222222</div>
</body>

然后收到缩小浏览器窗口的宽度,看看两者是怎么个float方式。

之前也没遇见过,当然也可以为第二个div加个float就能解决,但问题在于我没想清楚这样的不兼容到底怎么去解释。不过从理论上IE的渲染结果比较符合我的理解,Chrome的结果有点让我出乎意料。

请问各位高手,如此问题你如何解释?

推荐一个在线JS压缩加密的工具

以前一直在使用雅虎的YUICompressor压缩,本地,速度快,压缩后的代码基本上都是成功的,不足的地方就是需要先安装java环境,在安装YUICompressor,否则使用不了。想我这种不喜欢系统慢的人,重装系统是经常的事,每次都得配置环境,累,还拖累系统。

使用在线工具,便成了理所当然的事了。使用过百度应用里面的几个压缩工具,压缩或基本都会调试失败,这点可能是应用的算法存在不同的问题,这里推荐一个在线JS压缩加密的工具。

传送地址:http://www.jb51.net/tools/packer.htm

官方网站:http://dean.edwards.name/packer/

下载地址:http://dean.edwards.name/download/#packer

jucelin这边的压缩现在基本上都是用jb51的packer,原因是jb51在我这边方式速度快,哈哈。其他的关于css的压缩,百度应用里面的应用基本上都能满足。这里特别提示下,在压缩之前需要对代码进行检查,如是否缺少分号(;),基本上只要缺少1个,压缩后的代码就会出错,更可恨的是,这是往往不能被发现的。

使用JS和正则表达式限制输入

为了保证数据的有效性,防止用户输入的不是“理想”的内容,对输入框进行限制,应该算是客户端首先判断的内容,提交后再有服务器端验证。下面是找到的一些常用的使用正则表达式进行限制的代码,供参考。需要客户端支持JS

正则表达式限制只能输入中文:(双击代码复制)

onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"

用正则表达式限制只能输入全角字符:(双击代码复制)

onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"

用正则表达式限制只能输入数字:(双击代码复制)

onkeyup="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

用正则表达式限制只能输入数字和英文:(双击代码复制)

onkeyup="value=value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

上面是客户端的判断,在服务器端依然可以是用正则表达式进行数据验证,切记,一定需要双重验证。

演示:(只能输入数字和英文)

用JS实现表格行合并

在我们现在做的OA系统中,表格已经成为不可缺少的重要组成部分,如果没有表格,我们的工作可能会增加很多。为了美观表格,常常需要将表格中相同内容的行进行合并,表格中的专用标签就是rowspan,描述一下就是将相邻2行或多行中相同位置的列进行合并,当然合并使用前提的,如内容相同,ID相同等等。这里jucelin写了个用JS实现表格行合并的代码,主要使用ID来判断的,不足是出现了相同的ID,但如果调用getElementById的话,在合并之后调用即可。

整个代码都比较简单,jucelin加入了各种判断,主要是为了匹配各种情况,也没找到相关的优化方案。

核心代码(双击代码可以编辑复制):

<script language="javascript">
function TableRowsSpan(tableID, ColList) {
	var ColArray = ColList.split(",");
	var TableName = document.getElementById(tableID);
	var TableRowsCount = TableName.rows.length;
	for (j = ColArray.length - 1; j >= 0; j--) {
		PreId = "";
		CurId = "";
		TempCount = 1;
		for (i = 0; i <= TableRowsCount; i++) {
			if (i != TableRowsCount) {
				CurId = TableName.rows[i].cells[ColArray[j]].id;
				if (CurId != "") {
					if (CurId == PreId) {
						TempCount += 1;
					}
					 else {
						if (TempCount > 1) {
							SpanRows(TableName, i, j, TempCount, ColArray[j]);
						}
						PreId = CurId;
						TempCount = 1;
					}
				}
				 else {
					if (TempCount > 1) {
						SpanRows(TableName, i, j, TempCount, ColArray[j]);
					}
					PreId = CurId;
					TempCount = 1;
				}
			}
			 else {
				if (TempCount > 1) {
					SpanRows(TableName, i, j, TempCount, ColArray[j]);
				}
				PreId = CurId;
				TempCount = 1;
			}
		}
	}
}
function SpanRows(TableName, i, j, TempCount, ColArrayj) {
	TableName.rows[i - TempCount].cells[ColArrayj].rowSpan = TempCount;
	for (m = i - TempCount + 1; m <= i - 1; m++) {
		TableName.rows[m].deleteCell(ColArrayj);
	}
}
</script>

参数说明

tableID : 表格的ID,即选择要被操作的表格

ColList : 被选表格中需要需要合并的列,从第0个开始,即第一列则填0,以半角逗号分割,超出最大值出错

演示页面

https://jucelin.com/wp-content/uploads/2012/01/TableRowsSpan.html

版权说明

JS实现表格行合并的代码是手敲的,思路是自己想的,如果你觉得有必要,就在适当的位置添加上jucelin的名字或网址。本代码自由转载,自由修改,自由使用,如果你有改进,发我一份则十分感谢。

最后声明

用JS实现表格行合并的代码你可以自由使用,但建议你根据实际需求修改后再应用到实际生产中去,避免不必要的资源浪费。越强大越智能,功能越强的代码都是以消耗资源为前提的,并不是每个产品都需要写个jQuery类型的功能库。

CSS换行的那些事

CSS网页布局中,常常会遇到这样的问题,强制文字换行,而不是在一行内显示撑开容器影响布局。而有些时候可能会强制内容不换行,多出的

部分隐藏掉即可,关于强制不换行与强制换行的一些CSS属性52CSS.com作一些整理,希望能给大家的工作和学习提供参考。

先了解以下几个属性:

强制不换行

p.xx {

white-space:nowrap;

}

自动换行

p.xx {

word-wrap: break-word;

word-break: normal;

}

强制英文单词断行

p.xx {

word-break:break-all;

}

CSS设置不换行:

overflow:hidden 溢出隐藏

white-space:nowrap 不换行

pre 换行和其他空白字符都将受到保护

nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象

CSS设置强制换行:

word-break:break-all 强制断开实现转行

normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。对于中文,应该使用break-all 。

几个重要属性的补充阅读:

white-space:http://www.52css.com/css/c_whitespace.html

word-wrap:http://www.52css.com/css/c_wordwrap.html

word-break:http://www.52css.com/css/c_wordbreak.html

overflow:http://www.52css.com/css/c_overflow.html

欢迎大家补充,52css.com提供了更多实例供大家参考。

原文摘自52css.com,原文地址:http://www.52css.com/article.asp?id=767

[转]CSS常用的hack技巧

在iteye上看到一篇介绍CSS常用的Hack的技巧,转过来自己Mark下。

color:red; /* 所有浏览器都支持 */
 color:red !important;/* 除IE6外 */
 _color:red; /* IE6支持 */
 *color:red; /* IE6、IE7支持 */
 +color:red;/*IE7支持*/
 *+color:red; /* IE7支持 */
 color:red\9; /* IE6、IE7、IE8、IE9支持 */
 color:red\0; /* IE8、IE9支持 */
 color:red\9\0;/*IE9支持*/

/* webkit and opera */
 @media all and (min-width: 0px){ div{color:red;} }

/* webkit */
 @media screen and (-webkit-min-device-pixel-ratio:0){ div{color:red;} }

/* opera */
 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-

ratio:0) { div{color:red;} }

/* firefox * /
 @-moz-document url-prefix(){ div{color:red;}} /* all firefox */

html>/**/body div, x:-moz-any-link, x:default {color:red;} /* newest firefox */
 }

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

其他还有使用注释的方式对IE进行判断的方法也应该算是Hack的方法,这个可以参考前面的一篇文章:html+css判断各个IE浏览器版本