2013年4月1日
摘要：
大量采用高解析度的图像的确可以让一个Web站点容光焕发。但同样也会造成站点访问速度下降——图片是文件，文件就要占用带宽，而带宽直接同访问等待时间相关。现在，让我们来学习一种名为图像预装载（image preloading）的小技巧来提高图像访问速度。一些浏览器试图通过在本地缓存中保存这些图片来解决此问题。这样一来可以顺序调用这些图片——但对于首次使用这些图片的时候仍然会存在延时。预装载 就是一种在需要图片之前就将图片下载到缓存的技术。采用这样的方式可以使当确实需要显示图片时迅速将其从缓存中恢复回来并立即显示。Image()对象最简单的图像预装载办法是使用JavaScript新建一个新的Imag 阅读全文
摘要：
js 正则什么是正则表达式？这个问题可以参见：“正则表达式30分钟入门教程”，很多编程语言都支持正则表达式，本文仅仅讨论JavaScript中的正则表达式。创建一个正则表达式第一种方法：var reg = /pattern/;第二种方法：var reg = new RegExp('pattern');正则表达式的exec方法简介语法：reg.exec(str);其中str为要执行正则表达式的目标字符串。例如：将会输出test，因为正则表达式reg会匹配str(‘testString’)中的’test’子字符串，并且将其返回。我们使用下面的函数来做匹配正则的练习：function 阅读全文
摘要：
一、响应式布局 相应式布局的核心内容其实就是使用CSS3引入的MediaQuery模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。<linkrel=”stylesheet” type=”text/css”media=”screen and(max-device-width: 400px)”href=”tinyScreen.css” />上面的代码意思是，如果屏幕宽度小于400像素（max-device-width:400px），就加载tinyScreen.css文件。<P><linkrel=”stylesheet” type=”text/css”m 阅读全文
摘要：
原名《移动平台3G手机网站前端开发布局技巧汇总》，由武方博整理的，让我们了解下移动设备上的WEB站点开发的基础知识，多些时间和精力去优化其他细节，我这里对原文的标签格式做了细微的调整，阅读查看起来明晰些，原文如下：－－－－－－－－－－－华丽的分割线－－－－－－－－－－－－－您或许正在或准备参与一个WepApp项目，您或许正在Google搜索mobile development相关的文章，您或许是一名专业的WEB前端工程师，您或许想学习Mobile前端开发方面的技术，如果您被我说中了，呵呵那么这篇 文章将为您带来意想不到的惊喜！当您看到这篇文章时，哥已经默认认为您是一名资深的WEB前端工程师，如 阅读全文
摘要：
本文所使用的技巧是用了一条 Internet Explorer 的 CSS 表达式 (expression) 。你不可以直接使用该表达式，因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用 eval 包裹你的语句。如何解决“振动”的问题？显然 IE 有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候，它将重置所有内容并重新渲染页面，这个时候它就会重新处理 CSS 表达式。这会引起一个丑陋的“振动” bug ，在此处固定位置的元素需要调整以跟上你的(页面的)滚动，于是就会“跳动”。 解 决此问题的技巧就是使用 background-attachment:fixed 为 body 阅读全文
摘要：
验证QQ号码<inputtype="text"value="1321"onblur="alert(/^[1-9]\d{4,9}$/.test(this.value))">cript表单验证年龄href="http://www.ijavascript.cn/yanzheng/validate-198.html"<<b>JavaScript表单验证年龄JavaScript表单验证年龄，判断一个输入量是否符合年龄，通过正则表达式实现。//检查年龄function isAge(str){ va 阅读全文
摘要：
浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局；恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。一、清除浮动 还是 闭合浮动 （Enclosing floator Clearing float）？很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。1）清除 阅读全文
摘要：
原文地址：Javascript中批量定义CSS样式-cssText属性作者：APJE给一个html元素设置css属性,传统做法：var mybox= document.getElementByIdx("mybox");mybox.style.width ="200px";mybox.style.height ="70px";mybox.style.display ="block";这样写很烦，尤其是很多的时候，一个样式一行,天啊，那是很大的工作量！这时候可以使用cssText属性使用cssText属性,想怎么写就怎 阅读全文
摘要：
div{height:auto!important;height:110px;min-height:110px;} 阅读全文
摘要：
CSS Hack的原理是什么CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对IE浏览器。类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等HTML头部引用( 阅读全文
摘要：
相信从事前端开发的朋友对IE6都是深恶痛绝，恨不得先杀后J，然后再大卸八块以解心头只恨。虽然是这么可恶的一个浏览器，但是IE6迄今为止的市 场占有率仍然很高，截止2009年8月份的市场占有率仍然有25%之多。那么今天创意灵犀通过翻译国外的译文对IE6的兼容问题进行总结概括。难免有疏漏 之处，如若您有更好的建议，欢迎在回复中提出，我会及时加以补充。1.前言：考虑浏览器的兼容性，我们要做的首先一定要简洁，如果你的布局太复杂，兼容性就更加难以做到。其次，我们要实用合适的文档声明，因为没有声明的情况下，IE6会出现很多怪异的问题。W3CSCHOOL指出，XHTML1.0中文档声明包括以下三种：Fram 阅读全文
摘要：
固定定位是绝对定位的一个子类。唯一的区别是，对于固定定位框，它的包含块由可视窗口( viewport1 )创建。对于连续媒介，固定定位框并不随着文档的滚动而移动。从这个意义上说，它们类似于固定的背景图形。对于页面媒介，固定定位框在每页里重复。对于需要在每一页底部放置一个签名时，这个方法非常有用。注意，IE6 中不支持固定定位( Fixed positioning )定位，通常的做法是使用绝对定位代替，并使用 Javascript 脚本控制绝对定位框的位置，使随页面滚动而相应的变化。以下示例代码是修改自 W3C 官方使用固定定位布局的一个例子：<!DOCTYPE HTML><H 阅读全文
摘要：
KB012: 绝对定位( Absolute positioning )示例代码： <div style="position:relative; width:300px; height:300px; background-color:silver; border:5px solid red;"> <div style="width:100px; height:100px; background-color:blue;"></div> <div style="margin:0 0 0 100px; widt 阅读全文
摘要：
感谢东鳞西爪、Sevencity、Homelink、LeXRus。需求：要求所有文本中，汉字使用微软雅黑，阿拉伯数字和英语使用Arial。（文本中有好多的编号数字和部分英语）解决方式有两个，css方法和js方法。一、css方法：先定义一个英文字体再定义中文字体，这是因为英文字体中一般不含有中文，执行的时候英文和阿拉伯数字选用“Arial”,中文的字体使用第二个字体“微软雅黑”。比如，可以这样来定义WordPress中的中英文字体：body{ font-family:Arial,"微软雅黑";}*需要注意的是，这样的做法对符合网页规范的浏览器比如Firefox虽然有效，但对I 阅读全文
摘要：
浮出层是web页面中经常用到的功能，带有小小尖角的浮出层则更为生动，所以今天带给大家的是有角的浮出层，一起看看吧！贴上HTML： ◆◆ ◆◆ ◆◆ ◆◆Hi，知道吗？大前端D7主题很快就疯抢了！以上HTML构成了一个浮出层和四个方向的尖角，其实你只需要其中的一个span标签，所以真正用上的代码并没那么多。贴上CSS：.poptip{position: absolute;top: 20px;left:20px;padding: 6px 10px5px;*padding: 7px 10px 4px;line-height: 16px;color:#DB7C22;font-size: 12px;ba 阅读全文
摘要：
<div id="Layer1" style="position:absolute; width:200px; height:115px; left:50px;top:50px;filter:alpha(opacity=30);opacity: 0.6;background-color:blue"></div>opacity值越大，透明度越高FF<script>document.getElementByIdx_xx_x("Layer1").style.opacity= "0.3" 阅读全文
摘要：
五.让“块”透明的方法 .div{FILTER:alpha(opacity=20);moz-opacity:0.2;opacity:0.2;}测试IE6,IE7,IE8,FF2,FF3均通过。提示：IE6,IE7需设置一个宽度(100%也行)，否则看不到效果。 六.DD_belatedPNG,解决IE6不支持PNG绝佳方案 整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与 background-repeat.而.. 阅读全文
摘要：
PNG图像格式介绍：PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可 存储多到16位的α通道数据。 IE6下PNG背景透明的显示问题PNG格式比起GIF来表现色彩更丰富，特别是表现渐变以及背景 阅读全文
摘要：
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从 网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.CSS技巧1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie 阅读全文