JavaScript实现图片懒加载非可视区域延迟加载
aScript 如何实现对网页图片在可视区域范围内加载技术，我们称之为“图片懒加载技术”或者“图片延迟加载技术”。 首先，要实现这项技术，我们需要将服务端输出的网页中的所有的 IMG 标签的 SRC 属性给屏蔽掉，只有屏蔽掉了 SRC 属性，图片就不会自动被加载，关于如何将图片中的 SRC 属性去掉，在静态页面上，可以手动的去掉 IMG 标签的 SRC 属性；在动态的内容上，特别是这些 HTML 内容...
JavaScript获取DOM节点HTML元素CSS样式
pt 获取某个 DOM 节点下 HTML 元素的 CSS 样式值？使用过 JQuery 的童鞋一定都非常的熟悉，Jquery 提供了非常强大的 CSS 方法，可以很方便的设置和获取元素的 style 属性。 某些情况下，我们不能使用 JQuery 时，就必须使用纯 JavaScript 获取元素的 style 属性值。本文将介绍使用纯 JavaScript 获取元素的的样式值。 使用 CSS 控制页面...
HTML5 表单新属性 pattern 的使用
HTML5 的表单属性增加了很多功能，如 placeholder，pattern，multiple，autocomplete，autofocus，list，novalidate， required 等。这些新属性让网站的开发更加方面和简单。但是现实总是残酷的，若是要开发出真正用户体验非常好的网站，这些自带功能往往都是排不上用场的。 前段时间在一个网站上提交表单时 input 输入框提示 “请与所请求...
代码分享之合法校验过滤编辑器提交的HTML内容
分享一段代码，用最简单的函数实现前端编辑器提交过来的内容的合法性校验，允许一般的安全性 HTML 标签，对属性做了安全校验，属性只允许出现在部分 HTML 标签中，如 a、img、span、font。除了非常安全的属性外，还允许了 style 属性，style 属性其实也有一定的风险，容易造成页面样式错乱，但是大部分编辑器生成的 HTML 还是包含 style 属性的。对 style 属性里面的 CS...
前端技术之CSS实现图片垂直居中
让图片实现水平居中比较简单，只需要在父级容器中添加属性 text-align 为 center 即可。使用纯 CSS 实现图片的垂直居中，可以将图片包裹容器的 display 属性设置为 table-cell，然后加上 vertical-align: middle 就好了 。table-cell 的显示效果同 table 是一样的，兼容性还不错，所以直接使用 table 来包裹图片也是同样的效果，个...
前端技术之DIV或SPAN+CSS实现箭头效果
不到万不得已不要使用图片。我们在做网站的时候，最重要的指标就是速度，不能让用户等待，不能让用户看着浏览器在转圈圈。下面将详细描述如何使用SPAN标签实现箭头效果。我们都知道，HTML标签的元素都有边框属性，并且还可以对上下左右四个边框分别设置颜色和厚度。这样如果我们将元素的高度和宽度设置为0，边框厚度增大，并且只显示一条边框，是不是就是一个三角形呢，不过这个三角形是等边直角三角形。纵然是等边直角三角形...
前端开发之CSS兼容写法经验总结
对于前端工程师们来说，也许值得一看，欢迎有志之士留言交流。前端CSS之图片边框一个人只有从头至尾完成整个WEB项目时，且在不使用外界UI框架时，一定会知道，我们在定义全局样式的时候一定要定义图片的边框属性。这点也是我在做浏览器兼容的时候，发现IE8会默认有蓝色边框。定义图片边框属性，如下代码示例： <style> img{ border:0; } </style>前端CSS之DIV高度在IE的老版本浏...
HTML渲染效果与CSS代码前后位置的关系
本篇文章讨论的是 CSS 在 HTML 上下文的位置问题，并不讨论 CSS 有多少种写法。这里的 CSS 主要是指 CSS 都是放在 <style> 标签中的情况，一般的网站也很少直接写 style 属性的。最近碰到的一个小小的不同的网页渲染效果，是我以前没有太注意的。HTML 中 <a> 标签是有很多状态的，一般我只对 hover 状态另加描述。这次的问题是：同样的写法，页面的有些地方的 <a> 标...
LMLPHP第五期更新功能
下可能出现的显示不完整问题。增强ONE-SLOC模式下<pre>标签输出增强ONE-SLOC模式运行下，标签<pre>中的内容将原样输出，这样可以方便的解决某些需要原样输出的内容，比如代码之类的。含有属性的<pre>标签形式同样支持，如<pre class="code">...</pre>。增加MySQL数据库驱动类LMLPHP框架新增提供了LMLPHP官方打造的强大的MySQL数据库驱动类，并且提供...
CSS兼容问题IE6/IE7浏览器position为relative时margin失效
发现一个 CSS 的不兼容问题，算是 IE6 和 IE7 的 Bug。IE6 和 IE7 在标签的 position 属性是 relative 时，margin-left 或 margin-right 或 margin-top 是没有效果的，这个时候比较好的解决办法就是使用 left 或 top 属性来达到位置的偏移。但是 margin 属性也不完全没有作用，只是偏移出现问题，使用 margin:au...