10 2012 档案
摘要：随着Chromium/Chrome以及其衍生的浏览器用户越来越多，掌握一些技巧可以让你更加快速熟练的使用Chrome，让事情变得更简单。微 软 IE 一手遮天的时代已经一去不复返了，而在当下浏览器的"战国割据"中，近几年异军突起的 Google Chromium/Chrome 以及基于其衍生出的浏览器（如 360 极速、搜狗、枫树……）占据用户桌面的份额越来越大，因此整理了一些你可能不知道的使用技...
阅读全文
摘要：今天这篇文章向大家分享12款精心挑选的优秀JavaScript日历和时间选择插件，都带有详细的使用教程和效果演示。这些插件能够帮助Web开发人 员更快速的实现各种精美的日历和时间选择效果。同时推荐阅读的博文中还有更多实现各种网站功能的jQuery优秀插件，欢迎大家可以去淘金。1.The Coolest Calendar 界面非常漂亮的一款日期选择插件，有详细的使用文档，最新版本 1.5。点击下载 查看示例 2.DatePicker 这款日期插件支持单选、多选和时间区间选择，功能齐全，有 Dialog 和 Flat 两种模式。点击下载 查看示例3.Tigra Calendar Tigra Cal
阅读全文
摘要：浏览器内核种类繁多，商用的加上非商业的免费内核，大约有10款以上甚至更多，不过通常比较常见的大约只有以下4种，下面就简单介绍一下。 TridentTrident（又 称为MSHTML），是微软的Windows搭载的网页浏览器——Internet Explorer浏览器使用的内核（俗称IE内核），该内核程序在1997年的IE 4中首次被采用，之后不断地加入新的技术并随着新版本的IE发布。Triden...
阅读全文
摘要：平时我们几乎每天都在和浏览器打交道，写出来的页面很有可能在不同的浏览器下显示的不一样。为了兼容各个浏览 器而不断地去测试和调试，还在脑子中记下各种遇到的BUG及解决方案，而并没有去主动地关注和了解下浏览器的工作原理。下面是建议根据浏览器的渲染原理对CSS的书写性能做一点改进。最终决定浏览器表现出来的页面效果的差异是：渲染引擎 Rendering Engine（也叫做排版引擎），也就是我们通常所说的“浏览器内核”，负责解析网页语法（如HTML、JavaScript）并渲染、展示网页。相同的代码在不同的浏览器呈现出来的效果不一样，那么就很有可能是不同的浏览器内核导致的。下面看一下加载页面时浏览器的
阅读全文
摘要：Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验 简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；2.浏览器开始载入html代码，发现标签内有一个标签引用外部CSS文件；3.浏览器又发出CSS文件的请求，服务器返回这个CSS文件；4.浏览器继续载入html中部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；5.浏览器在代码中发现一个标签引用了一张图片，向服务器发
阅读全文
摘要：影响网站打开时间有两个因素，一个是网页加载速度，另一个是网站页面的大小。网站加载速度与用户所处的网络环境及主机性能有关，而网站页面的大小则由网站开发者决定,最主要的就是web前端开发工程师的工作。本文的重点就是如何压缩网站页面，以减少页面加载时间。1. 图片压缩 相对与文本来说，图片是相当占用空间的。压缩图片是重中之重。 图片压缩工具推荐： Shrink-O-Matic Smush It 光影魔术手2. Javascipt压缩 为了增加页面的交互性及动画效果，很多页面大量使用 Javascript ，特别是Jquery。 推荐工具： Javascript Compressor JS Compr
阅读全文
摘要：随着iphone的普及，越来越多网站都要制作一个单独的mobile端，而主体风格又要与电脑端完全一致。收集了25个精美网站，均是手机/电脑自响应的网站案例。1.Maryland Craft Beer Festival2.Daniel Vane3.Inspire Conference4.Formfett5.Forefathers Group6.Design Week Portland7....
阅读全文
摘要：模块化概念 模块化就是为了减少循环依赖，减少耦合，提高设计的效率。为了做到这一点，我们需要有一个设计规则，所有的模块都在这个规则下进行设计。良好的 设计规则，会把耦合密集的设计参数进行归类作为一个模块，并以此划分工作任务。而模块之间彼此通过一个固定的接口（所谓的可见参数）进行交互，除此之外的 内部实现（所谓的隐参数）则由模块的开发团队进行自由发挥。程序模块化的目的： 减少循环依赖 减少耦合 提高设计效率 程序模块化的实施： 把耦合密集的归为一个模块 模块间通过固定的接口交互 模块内部实现自由发挥 HTML CSS Images的模块化设计 页面模块化的实施，这里指的是针对除去JavaScrip
阅读全文
摘要：简单说：hideFocus是对超链接外虚线框的设定！hideFocus即隐藏聚焦，具有使对象聚焦失效的功能，其功能相当于：onFocus="this.blur()"它的值是一个布尔值，如hideFocus=true。也可省略赋值直接写hideFocus。你给的代码如果没有hideFocus,那么鼠标点击该超链接，则外面出现一个虚线框，即为聚焦。而使用了hideFocus则不会有虚线框。在IE下，需要在标签 a 的结构中加入 hidefocus="true" 属性。 演示：没有虚线框有虚线框而在FF等浏览器中则相对比较容易，直接给标签 a 定义样式 out
阅读全文
摘要：网页滚动条本身就是浏览器的一部分，使用它可以方便浏览较大的网页，但是千篇一律的它经常会给整体页面效果拖了不少后腿，我们能不能改变它灰灰的样子呢？能！俗话说：“只有你想不到的，没有做不到的。” 给滚动条换色 几乎所有网页的滚动条都是默认的灰色，如果把它的颜色换换，来点另类的，相信一定会使网页更加靓丽。我们只要在网页代码之间插入下面的代码，即可随心所欲地更改颜色了。后面的16位颜色值你可以随意更改，括号内是解释说明，在输入时请不要插入。 隐藏滚动条 在任何情况下，如果网页超出显示范围，就会出现滚动条。但有时我们并不想让它显示，如何隐藏它呢？只需 在之间插入代码：即可。其中x表示水平滚动条，将其改为
阅读全文
摘要：1、关于页面元素的引用通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。2、jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方
阅读全文
摘要：这是一些采用HTML, CSS, 和Javascript开发的游戏。有些甚至只用到了CSS技术。1. Whack-a-Rat – CSS only game2. SURVIVOR (1982 Commodore 64 game remake)3. Sumon4. 3D – CSS puzzle5. Duck Hunt6. Dino Pairs Game7. Cops and Robbers – C...
阅读全文
摘要：js实现拖拽+碰撞+重力亲点击我可以拖拽哦！×点击我显示吧
阅读全文
摘要：分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素，比如用来代替标记标题。首先是关于语义（Semantics）和默认样式的区别，默认样式是浏览器设定的一些常用tag的表现形式，个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。,用来区别于其他文字，起到了强调的作用。至于列表和表格很明显的告诉你他们是
阅读全文
摘要：JS封装类或对象的最佳方案面向对象强大的优点之一是能够创建自己专用的类或者对象，封装一组属性和行为。抛开性能来说，JS要比面向对象语言如JAVA要灵活好用的多，组装数据结构很灵活方便。那么我们如何来用面向对象的思维来定义JavaScript的类或对象呢？问题的出现如果要抽象出来一个人，那么简单的属性为:name,sex,birthday等，方法为:sayHi,最初级的写法就是:var oPerson = new Object;oPerson.name = "zs";oPerson.sex = 'boy';oPerson.birthday = '200
阅读全文
摘要：以下是meta每个属性详解尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。一、 //编码META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的标记和 标题 注意： 该META标签定义了HTML页面所使用的字符集为GB2132，就是国标汉字码。如果将其中的“charset=GB2312”替换成“BIG5”，则该页面所用的字符集就是繁体中文Big5码。当你浏览一些国外的站点时，IE浏览器会提示你要正确显示该页面需要下载xx语支持。这个功能就是通过读取HTML页面META标签的Content-Type属性而得知需要使用哪种字符..
阅读全文
摘要：Javascript本身是从Perl语言的语法演变而来的，本质上是脚本语言，随着版本的更新逐渐加入的对面向对象的模拟。我认为Js的面向对象模拟总 体上做得还是不错的，因为我们不能盲从任何一种理念，不能纯粹的为了OOP而OOP，我们需要抓住的是面向对象的好处到底是什么？为了这些优点去OOP， 才是最明智的选择，所以说Js做得还不错。Js的继承在很多书里面细致的分了很多种类型和实现方式，大体上就是两种：对象冒充、原型方式。这两种方式各有优点和缺陷，这里我先列举出来，再从底层分析区别：(一)对象冒充function A(name){this.name = name;this.sayHello = f
阅读全文
摘要：根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；与之相反，像“span”“a”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。内联元素（行内元素
阅读全文
摘要：1、DOMWEB标准现在可真是热门中热门，不过下面讨论的是一个不符合标准的document.all[]。DOM－－DOCUMENT OBJECT MODEL文档对象模型，提供了访问文档对象的方法.例如文档中有一个table,你要改变它的背景颜色，那就可以在javascript中用 document.all[]访问这个TABLE。但DOM也有所不同，因为浏览器厂商之间的竞争，各浏览器厂商都开发了自己的私有DOM，只能在自己的 浏览器上正确运行，document.all[]就是只能运行在 IE是的微软的私有DOM。为了正确理解DOM，给出IE4的DOM2、理解document.all[]从IE4.
阅读全文
摘要：标准模式与怪异模式由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常
阅读全文
摘要：一.document.all是页面内所有元素的一个集合。例如：document.all(0)表示页面内第一个元素二.document.all可以判断浏览器是否是IEif(document.all){alert("is IE!");}三.也可以通过给某个元素设置id属性（id=aaaa）,然后用document.all.aaaa调用该元素四.案例：代码1:代码2：但是常常name可以相同(如:用checkbox取用户的多项爱好的情况)代码3：理论上一个页面中的id是互不相同的，如果出现不同tags有相同的iddocument.all.id 就会失败,就象这样：代码4:对于一个
阅读全文
