12 2011 档案
摘要：高效整洁CSS代码原则 (下)6. 适当的代码注释 代码注释可以让别人更容易读懂你的代码，且合理的组织代码注释，可使得结构更加清晰。你可以选择做的样式表的开始添加目录: /*------------------------------------ 1. Reset 2. Header 3. Content 4. SideBar 5. Footer ----------------------------------- */ 如此你代码的结构就一目了然，你可以容易的查找和修改代码。 而对于代码的主内容，也应适当的加以划分，甚至在有必要的地方在对代码加以注释说明，这样也有利于...
阅读全文
摘要：高效整洁CSS代码原则 (上)CSS学起来并不难，但在大型项目中，就变得难以管理，特别是不同的人在CSS书写风格上稍有不同，团队上就更加难以沟通，为此总结了一些如何实现高效整洁的CSS代码原则：1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset： *{ margin:0; padding:0; } 这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。/** 清除内...
阅读全文
摘要：javascript针对DOM的应用（五）终于可以抽出点时间再出一篇教程了。废话不多说了。今天这篇就教大家一个常用的效果。固定居中效果。其实这个应该不列入JS教程的范畴。应为FF，IE6以上浏览器都支持fixed这个固定属性。唯独IE6不支持。所以我为了可恶的IE6。我这里就出一篇教程吧。而且这种效果也可以锻炼同学们的计算能力。以后很多效果都需要你的计算能力。哈哈固定居中。或者固定在任何地方思想几乎是一样的。只你要算法清楚了。效果写起来就轻而易举了。先贴代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
阅读全文
摘要：javascript针对DOM的应用（四）从这张开始就和大家说一些实用的效果的写法。当然首当其冲的就是我们可爱的TAB选项卡，用JQ写选项卡当然是很方便的而且方法也很多。其实用原生的JS写选项卡方法也很多。下面我就写几个给大家看看一，点击传参方法<script>function tab(dom){var list = document.getElementById("list").getElementsByTagName("li");var con = document.getElementById("con").getE
阅读全文
摘要：javascript针对DOM的应用（三）前两章讲了获取DOM元素。这章就开始讲如何操作dom。1.针对页面上有的DOM元素操作，无非就是对这个dom元素的样式进行操作。如果这个DOM元素没有样式也就谈不上操作了。2.我们也可以直接用JS动态的向html里写入DOM元素。今天这章我们就讲这两个应用（一）对html里现有的DOM元素进行操作。我上面说了，对现有的DOM元素进行操作，无非就是对样式的操作。所以我们首先就要能获取这个DOM元素的样式。在讲获取DOM元素的样式之前。先要说下DOM元素的样式链接方式。有三种。一是直接在html文档里写入样式例如<div style="wi
阅读全文
摘要：javascript针对DOM的应用（二）大家都知道在JQ中想获取一个元素的兄弟元素，父级元素，子元素等等是非常方便的。其实在原生的也JS也有这些属性。和JQ几乎相同但是比JQ少一些。但是用起来却比JQ麻烦一点。主要因为FF浏览器，因为FF会把你的换行也当做一个DOM元素。比如说<div id = "dom"><div></div><div></div></div>我用原生的JS获取ID为dom的元素下的子元素。用我第一章说的方法就是var a = document.getElementById(&qu
阅读全文
摘要：javascript针对DOM的应用（一）所谓针对DOM的应用。也就我这里只教大家用javascript操作页面中dom元素做交互。我相信可能大部分人来这里学javascript主要还是想用这个结合页面中的DOM元素做一些实际有用的交互效果。所以我这里只教大家最实际，最有用的javascript应用。但是前提大家最好有一些javascript或者jquery的编程的基础。好废话不多说了。今天第一篇，就教大家如何用javascript获取页面中的dom元素。这个很重要。我会对照JQuery来讲。如果页面中的元素是ID属性<div id="dom"></div
阅读全文
摘要：javascript基础知识大全(2)1.关于cookie的函数： /*** cookie操作工具.* 使用方法:保存值:CookieTool('name','1',{expires: 7})//表示保存一个cookie值为1,键值为name,失效时间7天以后* 取值:CookieTool('name') //返回1* @param {} name* @param {} value* @param {} options* @return {}*/CookieTool = function(name, value, options) { if (t
阅读全文
摘要：javascript基础知识大全(1)1.javascript的数组API//定义数组 var pageIds = new Array(); pageIds.push('A'); 数组长度 pageIds.length;//shift：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefinedvar a = [1,2,3,4,5];var b = a.shift(); //a：[2,3,4,5] b：1//unshift：将参数添加到原数组开头，并返回数组的长度var a = [1,2,3,4,5];var b = a.unshift(-2,-1); //a：[
阅读全文
摘要：CSS兼容性(IE和Firefox)技巧大全 （五）IE6,IE7,FFIE7.0出来了，对CSS的支持又有新问题。浏览器多了， /*For IE7 & IE6*/ _height:20px; /*For IE6*/这里我自己也没看懂什么意思？注意顺序。这样也属于CSS HACK，不过没有上面这样简洁。第一种#example { color: #333; } /* Moz */* html #example { color: #666; } /* IE6 */*+html #example { color: #999; } /* IE7 */第二种，是使用IE专用的条件注释<!-
阅读全文
摘要：CSS兼容性(IE和Firefox)技巧大全 （四）FF与IE1. Div居中问题div设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，IE需要设定body居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。2.链接(a标签)的边框与背景a链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。3.超链
阅读全文
摘要：CSS兼容性(IE和Firefox)技巧大全 （三）12.web标准中定义id与class有什么区别吗一.web标准中是不容许重复ID的比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.二.属性的优先级问题ID 的优先级要高于class,看上面的例子三.方便JS等客户端脚本如果在页面中要对某个对象进行脚本操作,可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.13. LI中内容超过长度后以省略号显示的技巧此技巧适用与IE与OP
阅读全文
摘要：CSS兼容性(IE和Firefox)技巧大全 （二）8.float的div闭合;清除浮动;自适应高度① 例如：＜#div id=”floatA” >＜#div id=”floatB” >＜#div id=”NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 ＜#div class=”floatB”> ＜#div class=”NOTfloatC”>之间
阅读全文
摘要：CSS兼容性(IE和Firefox)技巧大全 （一）CSS对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉得也不是难事，从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。对于web2.0的过度，请尽量用xhtml格式写代码，而且DOCTYPE 影响 CSS 处理，作为W3C的标准，一定要加 DOCTYPE声明。CSS技巧1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行2. margin加倍的问题设置为float的.
阅读全文
摘要：先是html代码：XML/HTML代码<divid="header_demo"><aid="logo"href="#">Rainweb</a><ulid="skin"><liid="skin_0"title="蓝色"class="selected">蓝色</li><liid="skin_1"title="紫色">紫色</li&g
阅读全文
摘要：DOM Core常用部分:DOM方法创建节点:createElement(),createTextNode()复制节点:cloneNode()插入节点:appendChild(),insertBefore删除节点:removeChild()替换节点:replaceChild()查找节点:getAttribute(),getElementById(),getElementsByTagName,hasChildNodes设置节点属性:setAttribute()DOM属性节点的属性:nodeName,nodeType,nodeValue遍历节点树:childNodes,firstChild,las
阅读全文
摘要：CSS基本布局16例作者：Owen Briggs 2004-6-25 13:44:32以下布局资料原作者：Owen Briggs单行单列 单行单列1：采用float浮在左上角，固定宽度。 单行单列2：固定在左上角，固定宽度，采用的是绝对(absolute)定位。 单行单列3：固定在左上角，不固定宽度，采用百分比(%)定义宽度来自适应页面。 单行单列4(推荐)：固定宽度，采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中。单行两列 单行两列1：两列都固定宽度。第一列浮在左上角，第二列浮在第一列右边。 单行两列2：两列都百分比宽度，但不满屏。第一列固定在
阅读全文
摘要：右下角浮动广告代码原代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;
阅读全文
摘要：Dojo Javascript 编程规范前言相当不错的 Javascript 编程风格规范，建议大家采用此规范编写 Javascript。原文链接： http://dojotoolkit.org/developer/StyleGuide 。翻译（Translated by）：i.feelinglucky{at}gmail.com from http://www.gracecode.com ，转载请注明出处、作者和翻译者，谢谢配合。本文地址： http://code.google.com/p/grace/wiki/DojoStyle 。序Any violation to this guide i
阅读全文
摘要：1.document.write(“”);输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document)5.得到表单中元素的名称和值:document.getElementById(“表单中元素的ID号”).name(或value)6.一个小写转大写的JS:document.getElementById(“output”).value=document.getElementById(“i
阅读全文
摘要：JavaScript自增、自减运算符与表达式语法var i++;var-- 声明变量i-- 变量名++ -- 自增运算符JavaScript自增、自减运算符与表达式JavaScript自增、自减运算符与表达式(i初始值为6)运算符++i--ii++i--名称前自增运算符前自减运算符后自增运算符后自减运算符表达式++i--ii++i--示例++i;--i;i++;i--;i的结果7575有趣的示例++ialert(i)alert(++i)alert(i)--ialert(i)alert(--i)alert(i)i++alert(i)alert(i++)alert(i)i--alert(i)ale
阅读全文
