IT零食屋

根据页面大小决定提取摘要的字数(续)

风信子 — Tue, 08 Dec 2009 06:00:10 +0000

根据页面大小决定提取摘要的字数虽然解决了高低分辨率的问题，但是却没有解决浏览器大小切换时的自适应，不知道大家有什么办法解决？

根据页面大小决定提取摘要的字数

风信子 — Tue, 08 Dec 2009 05:53:35 +0000

由于中期网要整改新的栏目页，以提高用户体验，俺可算是下了番苦心
最后整了这么个测试页面（http://www.cnffi.com/test.html ）希望大家多多指点，纠正俺的错误以及不足之处 tks

进入正题，考虑到现在用户的显示器大小以及分辨率差异性非常大，所以这个页面采用了自适应大小设计，因此引发出高分辨率与低分辨率下摘要显示不尽人意，所以使用jQuery采取了下面这套方案：

$(document).ready(function(){
 
 //栏目页左侧 摘要截取       
 var obj = $("#leftcolumn");        
 var offset = obj.offset(); 
 var leftwidth = obj.width();      
 
 
  var i = leftwidth / 6;
  $("#leftcolumn > .post > p").attr("limit",i);
   
  jQuery.fn.limit=function(){
   var self = $("#leftcolumn > .post > p[limit]");
   self.each(function(){
    var objString = $(this).text();
    var objLength = $(this).text().length;
    var num = $(this).attr("limit");
    if(objLength &gt; num){
     //$(this).attr("title",objString);
     objString = $(this).text(objString.substring(0,num) + "...");
    }
   })
  }  
  $(function(){
   $(document.body).limit();
  })
 
});

判断段落前有没有空两格

风信子 — Tue, 08 Dec 2009 05:34:35 +0000

判断段落前有没有空两格,如果没有，则插入两格空格

小弟献丑了（代码如下）：

 
<script type="text/javascript" src="js/jquery.min.js">script>
<script type="text/javascript"> 
$(document).ready(function() {		
	$("p").each(function(i){		
		var objString = $(this).text();
		var ptest = objString.substring(0,2);
		if (ptest!="　　"){
			//$("p:eq("+i+")").addClass("class");	
			$("p:eq("+i+")").prepend("　　");
		}
	});
});
 
script>

有问题请多多指点！

了解一下浏览器都是怎么干活的

风信子 — Mon, 07 Dec 2009 05:35:26 +0000

用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；

浏览器开始载入html代码，发现标签内有一个标签引用外部CSS文件；

浏览器又发出CSS文件的请求，服务器返回这个CSS文件；

浏览器继续载入html中部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；

浏览器在代码中发现一个标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；

服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；

浏览器发现了一个包含一行Javascript代码的

50.指定在不支持脚本的浏览器显示的HTML:

51.当超链和ONCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例:dfsadf

52.JS 的内建对象有:Array,Boolean,Date,Error,EvalError,Function,Math,Number,Object,RangeError,ReferenceError,RegExp,String,SyntaxError,TypeError,URIError

53.JS中的换行:\n

54.窗口全屏大小:

55.JS中的all代表其下层的全部元素

56.JS中的焦点顺序:document.getElementByid(”表单元素”).tabIndex = 1

57.innerHTML的值是表单元素的值:如”how are you”

,则innerHTML的值就是:how are you

58.innerTEXT的值和上面的一样,只不过不会把这种标记显示出来.

59.contentEditable可设置元素是否可被修改,isContentEditable返回是否可修改的状态.

60.isDisabled判断是否为禁止状态.disabled设置禁止状态

61.length取得长度,返回整型数值

62.addBehavior()是一种JS调用的外部函数文件其扩展名为.htc

63.window.focus()使当前的窗口在所有窗口之前.

64.blur()指失去焦点.与FOCUS()相反.

65.select()指元素为选中状态.

66.防止用户对文本框中输入文本:onfocus=”this.blur()”

67.取出该元素在页面中出现的数量:document.all.tags(”div(或其它HTML标记符)”).length

68.JS中分为两种窗体输出:模态和非模态.window.showModaldialog(),window.showModeless()

69.状态栏文字的设置:window.status=’文字’,默认的状态栏文字设置:window.defaultStatus = ’文字.’;

70.添加到收藏夹:external.AddFavorite(”http://www.google.com”,”Google”);

71.JS中遇到脚本错误时不做任何操作:window.onerror = doNothing; 指定错误句柄的语法为:window.onerror = handleError;

72.JS中指定当前打开窗口的父窗口:window.opener,支持opener.opener…的多重继续.

73.JS中的self指的是当前的窗口

74.JS中状态栏显示内容:window.status=”内容”

75.JS中的top指的是框架集中最顶层的框架

76.JS中关闭当前的窗口:window.close();

77.JS中提出是否确认的框:if(confirm(”Are you sure?”)){alert(”ok”);}else{alert(”Not Ok”);}

78.JS中的窗口重定向:window.navigate(”http://www.google.com”);

79.JS中的打印:window.print()

80.JS中的提示输入框:window.prompt(”message”,”defaultReply”);

81.JS中的窗口滚动条:window.scroll(x,y)

82.JS中的窗口滚动到位置:window.scrollby

83.JS中设置时间间隔:setInterval(”expr”,msecDelay)或setInterval(funcRef,msecDelay)或setTimeout

84.JS中的模态显示在IE4+行,在NN中不行:showModalDialog(”URL”[,arguments][,features]);

85.JS中的退出之前使用的句柄:function verifyClose(){event.returnValue=”we really like you and hope you will stay longer.”;}} window.onbeforeunload=verifyClose;

86.当窗体第一次调用时使用的文件句柄:onload()

87.当窗体关闭时调用的文件句柄:onunload()

88.window.location的属性: protocol(http:),hostname(www.example.com),port(80),host(www.example.com:80),pathname(”/a/a.html”),hash(”#giantGizmo”,指跳转到相应的锚记),href(全部的信息)

89.window.location.reload()刷新当前页面.

89-1.parent.location.reload()刷新父亲对象（用于框架）

89-2.opener.location.reload()刷新父窗口对象（用于单开窗口）

89-3.top.location.reload()刷新最顶端对象（用于多开窗口）

90.window.history.back()返回上一页,window.history.forward()返回下一页,window.history.go(返回第几页,也可以使用访问过的URL)

91.document.write()不换行的输出,document.writeln()换行输出

92.document.body.noWrap=true;防止链接文字折行.

93.变量名.charAt(第几位),取该变量的第几位的字符.

94.”abc”.charCodeAt(第几个),返回第几个字符的ASCii码值.

95.字符串连接:string.concat(string2),或用+=进行连接

96.变量.indexOf(”字符”,起始位置),返回第一个出现的位置(从0开始计算)

97.string.lastIndexOf(searchString[,startIndex])最后一次出现的位置.

98.string.match(regExpression),判断字符是否匹配.

99.string.replace(regExpression,replaceString)替换现有字符串.

100.string.split(分隔符)返回一个数组存储值.

101.string.substr(start[,length])取从第几位到指定长度的字符串.

102.string.toLowerCase()使字符串全部变为小写.

103.string.toUpperCase()使全部字符变为大写.

104.parseInt(string[,radix(代表进制)])强制转换成整型.

105.parseFloat(string[,radix])强制转换成浮点型.

106.isNaN(变量):测试是否为数值型.

107.定义常量的关键字:const,定义变量的关键字:var

jquery 刷新页面方法

风信子 — Thu, 03 Dec 2009 08:24:18 +0000

局部刷新：

这个方法就多了去了，常见的有以下几种；

$.get方法，$.post方法，$.getJson方法,$.ajax方法如下

前两种使用方法基本上一样

$.get(”Default.php”, {id:”1″, page: “2″ },
function(data){
//这里是回调方法。返回data数据。这里想怎么处理就怎么处理了。
});

$.getScript方法：

$.getScript(”http://jqueryajax.com/jquery.js”,
function(){
$(”#go”).click(function(){//回调方法
$(”.block”).animate( { backgroundColor: ‘pink’ }, 1000)
.animate( { backgroundColor: ‘blue’ }, 1000);
});
});

$.getJson只是返回的数据类型不一样

$.getJson(”Default.php”, {id:”1″, page: “2″ },
function(data){
//注意，这里返回的JSON数据引用方法为”data.info”,不明白的可以查一下json方面的教程。这里就不解释太多了
});

$.ajax 这个方法估计用的人很多吧。不过我不太喜欢用这个。个人觉得前面两个更方便

$.ajax({
type: “POST”, //提交的类型
url: “some.php”,//提交地址
data: “name=John&location=Boston”,//参数
success: function(msg){ //回调方法
alert( “Data Saved: ” + msg );//这里是方法内容，和上面的get方法一样
}
});

全页面刷新方法：

window.location.reload()刷新当前页面.
parent.location.reload()刷新父亲对象（用于框架）
opener.location.reload()刷新父窗口对象（用于单开窗口）
top.location.reload()刷新最顶端对象（用于多开窗口）

jQuery常用技巧大放送

风信子 — Thu, 03 Dec 2009 01:47:13 +0000

1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById(”msg”))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$(”#msg”)[0]，$(”div”).eq(1)[0]，$(”div”).get()[1]，$(”td”)[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$(”#msg”).html();
$(”#msg”)[0].innerHTML;
$(”#msg”).eq(0)[0].innerHTML;
$(”#msg”).get(0).innerHTML;

3、如何获取jQuery集合的某一项
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个
元素的内容。有如下两种方法：
$(”div”).eq(2).html();    //调用jquery对象的方法
$(”div”).get(2).innerHTML; //调用dom的方法属性

4、同一函数实现set和get
Jquery中的很多方法都是如此，主要包括如下几个：
$(”#msg”).html();    //返回id为msg的元素节点的html内容。
$(”#msg”).html(”new content”);
//将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$(”#msg”).text();    //返回id为msg的元素节点的文本内容。
$(”#msg”).text(”new content”);
//将“new content” 作为普通文本串写入id为msg的元素节点内容中,页面显示new content

$(”#msg”).height();    //返回id为msg的元素的高度
$(”#msg”).height(”300″); //将id为msg的元素的高度设为300
$(”#msg”).width();    //返回id为msg的元素的宽度
$(”#msg”).width(”300″); //将id为msg的元素的宽度设为300

$(”input”).val(”); //返回表单输入框的value值
$(”input”).val(”test”); //将表单输入框的value值设为test

$(”#msg”).click(); //触发id为msg的元素的单击事件
$(”#msg”).click(fn); //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式：
$(”p”).each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。

$(”tr”).each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果

$(”p”).click(function(){alert($(this).html())})
//为每个p元素增加了click事件，单击某个p元素则弹出其内容

6、扩展我们需要的功能
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); //为jquery扩展了min,max两个方法
使用扩展的方法（通过“$.方法名”调用）：
alert(”a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20));

7、支持方法的连写
所谓连写，即可以对一个jquery对象连续调用各种不同的方法。
例如：
$(”p”).click(function(){alert($(this).html())})
.mouseover(function(){alert(’mouse over event’)})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});

8、操作元素的样式
主要包括以下几种方式：
$(”#msg”).css(”background”);    //返回元素的背景颜色
$(”#msg”).css(”background”,”#ccc”) //设定元素背景为灰色
$(”#msg”).height(300); $(”#msg”).width(”200″); //设定宽高
$(”#msg”).css({ color: “red”, background: “blue” });//以名值对的形式设定样式
$(”#msg”).addClass(”select”); //为元素增加名称为select的class
$(”#msg”).removeClass(”select”); //删除元素名称为select的class
$(”#msg”).toggleClass(”select”); //如果存在（不存在）就删除（添加）名称为select的class

9、完善的事件处理功能

Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。
如：
$(”#msg”).click(function(){alert(”good”)}) //为元素添加了单击事件
$(”p”).click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//为三个不同的p元素单击事件分别设定不同的处理
jQuery中几个自定义的事件：
（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over，离开时置为out。
$(”tr”).hover(function(){
$(this).addClass(”over”);
},
function(){
$(this).addClass(”out”);
});
（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert(”Load Success”)})
//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
//每次点击时轮换添加和删除名为selected的class。
$(”p”).toggle(function(){
$(this).addClass(”selected”);
},function(){
$(this).removeClass(”selected”);
});
（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如：
$(”p”).trigger(”click”);    //触发所有p元素的click事件
（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中（添加）删除绑定的事件。
例如：
$(”p”).bind(”click”, function(){alert($(this).text());}); //为每个p元素添加单击事件
$(”p”).unbind(); //删除所有p元素上的所有事件
$(”p”).unbind(”click”) //删除所有p元素上的单击事件

10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法
$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。
$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。
如
$.each( [0,1,2], function(i, n){ alert( “Item #” + i + “: ” + n ); });
等价于：
var tempArr=[0,1,2];
for(var i=0;i alert(”Item #”+i+”: “+tempArr[ i ]);
}
也可以处理json数据，如
$.each( { name: “John”, lang: “JS” }, function(i, n){ alert( “Name: ” + i + “, Value: ” + n ); });
结果为：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。
如：
$.extend(settings, options);
//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数（合并多项并返回）
$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。
如：
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为：[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为：[2,3]
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
$.trim(str)：删除字符串两端的空白字符。
如：$.trim(”   hello, how are you? “); //返回”hello,how are you? ”

12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$(”#msg”)改为jQuery(”#msg”)。
如：
jQuery.noConflict();
// 开始使用jQuery
jQuery(”div p”).hide();
// 使用其他库的 $()
$(”content”).style.display = ‘none’;

世界上最贵的JavaScript代码

风信子 — Tue, 24 Nov 2009 07:23:34 +0000

这个事儿有点意思，真假未知——不过，当作个笑话看也未尝不可。

事件的前因后果是这样的：

最近，总部位于挪威奥斯陆的、国际领先的浏览器制造商Opera公司，因为预见Opera Mini（为手机用户节省流量的服务）、Opera Turbo（提供全网加速功能的服务）以及Opera Link（支持用户数据实时同步的服务）的访问量将会激增，批准了一项价值百万克朗（100克朗兑换106元人民币）的服务器采购计划。

于是，众多知名服务器厂商应邀把服务器样机发到Opera公司参加竞标测试。然而，来自一家国际一流厂商的服务器把包括CSS之父、Opera公司首席技术官Håkon Wium Lie博士在内的所有测试人员全部当场雷倒，造成了几乎到手的百万元大单顷刻间付之东流。

到底是为什么呢？原来，当测试人员启动这家厂商的服务器，并使用Opera浏览器打开管理页面时，却被直接重定向到了错误页面。当然，这只是问题的表面而已。重定向嘛，不是服务器端脚本所为，就是客户端脚本的杰作。经过简单查找，现场人员发现管理页面的源代码中赫然写着如下一行JavaScript代码：

if (is.opera) { window.location.href=”config/error.htm”; }

把这行代码翻译成人类语言就是：如果查看当前页面的是Opera浏览器，就在窗口地址栏中打开config目录下的error.htm页面！

呵呵，居然胆敢如此歧视Opera浏览器，就算制造商再牛，服务器再好，搁谁那里都没有通过“测试”的道理呀。就因为这一行代码，丢掉百万元大单，称其为史上最贵的JavaScript代码，应该不为过了。

（据说，这行代码是经销商所为；而这家国际一流服务器厂商也未公开，待查中。消息来源cnBeta.com）

Div+CSS规则整理

风信子 — Sun, 22 Nov 2009 13:32:03 +0000

一、善用css缩写规则

    /*注意上、右、下、左的书写顺序*/

关于边距（4边）：

1px 2px 3px 4px (上、右、下、左)

1px 2px 3px    （省略的左等于右）

1px 2px         (省略的上等于下)

1px            （四边都相同）

简化所有：

*/ body{margin:0}————表示网页内所有元素的margin为0

#menu{ margin:0}————表示menu盒子下的所有元素的margin为0

缩写（border）特定样式：

Border:1px solid #ffffff;

Border-width:0 1px 2px 3px;

关于文字的缩写规则：

Font-style:italic; 斜体形式

Font-variant:small-caps/normal; 变体样式：小型大写字母/正常

Font-weight:bold;

Font-size:12px;

Line-height:1.2em(120%)/1.5em(150%);

Font-family:arrial,sans-serif,verdana;

缩写成：

Font:italic small-caps bold 12px/1.5em arrial,sans-serif;

注意：Font-size和Line-height用斜杠组合在一起不能分开写。

关于背景图片的：

Background:#FFF url(log.gif) no-repeat fixed top left;

关于列表：

List-style-type:square/none;

List-style-position:inside;

List-style-image:url(filename.gif);

缩写成：

List-style:none inside url(filename.gif);

二、           运用4种方法来引入CSS样式

     1.link

rel 关系

type 数据类型,有多种

href 路径

部分浏览器支持候选样式,关键字:alternate:

2.内部样式块

3.@import

@import url{a.css}

注意:此指令必须放在中的设定

      –外部引用css文件

      （2）优先级不是按访问顺序来设定的，而是又css中的声明顺序来设的。

      如上例中
此处显示为黄色
也显示为黄色，因为在css定义中.yellow在.blue的后面。



八、           书写正确的链接样式

    当用css定义链接的各种状态时，要注意书写的顺序即：:link :visited :hover :active利用首字母：L V H A，你可以通过记忆LoVe,Hate,两个单词来记住其顺序。

:link ——–链接的颜色

:visited —–鼠标点击后的颜色

:hover ——-鼠标放上去未点的颜色（悬停）

:active——-鼠标点击瞬间的颜色

九、           :hover的灵活运用

   IE6不支持除a标签以外的:hover属性，我们了解:hover属性是鼠标悬停效果。在IE7和FF中，对几乎任意元素都可以设置:hover属性效果。这对我们做不同的访问效果很好。

如：

p {

    width : 360px;

    height : 80px;

    padding : 20px;

    margin : 50px auto 0 auto;

    border : 1px solid #ccc;

    line-height : 25px;

    background : #fff;

}

p:hover {

    border : 1px solid #000;

    background : #ddd;

}

—————-此效果针对IE7和FF

p a {

    color : #00f;

    text-decoration : none;

    font-size : 13px;

}

p a:hover {

    color : #036;

   text-decoration : underline;

}

—————–此效果针对IE6

十、           定义A标签要注意的小问题

      当我们定义a{color:red;}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了，其它三种状态就是A中所定义的样式。

只定义了一个a:link时，一定要记得把其它三种状态定义出来！

十一、   禁止内容换行与强制内容换行

   在表格或层中我们可能希望内容不换行或强制换行，我们可以通过一些css属性来达到这些要求。

   禁止换行：white-space:nowrap

强制换行：word-break: break-all; white-space: normal;

十二、   区别relative和absolute

Absolute—CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

Relative—CSS中的写法是：position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

十三、   区别块级元素block和内联元素inline

块级—可定义宽高，另起独占一行（如：div ul）

内联—不可定义宽高，如文本元素（如a span）

十四、   区别display和visibility

display:none和visibility:hidden都可以隐藏一个元素,但visibility:hidden只是隐藏了元素的内容，但其使用的位置空间仍然被保留。而display:none则相当把元素从页面中去除，其占用位置也将被删除。

十五、   背景background的一些语法

background-image:url(背景图案.jpg,gif,bmp);

background-color:#FFFFFF; （背景颜色）

background-color : transparent;    <–设定背景为透明色 –>

background-repeat 改变背景图片的重复并排的设定

      说明

repeat 背景图片并排

repeat-x 背景图片以X方向并排

repeat-y 背景图片以Y方向并排

no-repeat 背景图片不以并排的方式处理

background-attachment是否固定图片位置

   说明

scroll 拉动卷轴时，背景图片会跟着移动（缺省值）

fixed 拉动卷轴时，背景图片不会跟着移动

以长度定位background-position: x y

使用百分比定位 background-position: x% y%

     说明

x% 往右移

y% 往下移

backgroud-position: 0% 0%; 左边上方

backgroud-position: 0% 50%; 左边中间

backgroud-position: 50% 0%; 中间上方

backgroud-position: 50% 50%; 正中间

backgroud-position:100% 0%; 右边上方

backgroud-position: 0% 100%; 左边下方

backgroud-position: 100% 50%; 右边中间

backgroud-position: 50% 100%; 中间下方

backgroud-position: 100% 100%; 右边下方

以关键字定位

关键字说明

top 上 ( y = 0 )

center 中 ( x = 50, y = 50 )

bottom 下 ( y = 100 )

left 左 ( x= 0 )

Exp:

background-position:center;

图片在指定背景中央X=50% Y=50%位置

background-position: 200px 30px

十六、   注释的写法

在Html中：

<– footer –>
content
<– end footer –>

在CSS中：

/* ———- header —————– */
style

十七、   CSS的命名规范

id的命名

    (1)页面结构

　　容器: container

　　页头：header

　　内容：content/container

　　页面主体：main

　　页尾：footer

　　导航：nav

　　侧栏：sidebar

　　栏目：column

　　页面外围控制整体布局宽度：wrapper

左右中：left right center

(2)导航

　　导航：nav

　　主导航：mainnav

　　子导航：subnav

　　顶导航：topnav

　　边导航：sidebar

　　左导航：leftsidebar

　　右导航：rightsidebar

　　菜单：menu

　　子菜单：submenu

　　标题: title

　　摘要: summary

　　(3)功能

　　标志：logo

　　广告：banner

　　登陆：login

　　登录条：loginbar

　　注册：regsiter

　　搜索：search

　　功能区：shop

　　标题：title

　　加入：joinus

　　状态：status

　　按钮：btn

　　滚动：scroll

　　标签页：tab

　　文章列表：list

　　提示信息：msg

　　当前的: current

　　小技巧：tips

　　图标: icon

　　注释：note

　　指南：guild

　　服务：service

　　热点：hot

　　新闻：news

　　下载：download

　　投票：vote

　　合作伙伴：partner

　　友情链接：link

　　版权：copyright

class的命名

     (1)颜色:使用颜色的名称或者16进制代码,如

　　.red { color: red; }

　　.f60 { color: #f60; }

　　.ff8600 { color: #ff8600; }

　　(2)字体大小,直接使用”font+字体大小”作为名称,如

　　.font12px { font-size: 12px; }

　　.font9pt {font-size: 9pt; }

　　(3)对齐样式,使用对齐目标的英文名称,如

　　.left { float:left; }

　　.bottom { float:bottom; }

　　(4)标题栏样式,使用”类别+功能”的方式命名,如

　　.barnews { }

　　.barproduct { }

　　注意事项::

u      一律小写;

u      尽量用英文;

u      不加中杠和下划线;

u      2个组合的单词不用中杠和下划线可以将第二个单词的首字母大写（eg:mainContent）；

u      尽量不缩写，除非一看就明白的单词.

主要的站点css文件

         主要的 master.css

　　模块 module.css

　　基本共用 base.css（root.css）

　　布局，版面 layout.css

　　主题 themes.css

　　专栏 columns.css

　　文字 font.css

　　表单 forms.css

　　补丁 mend.css

　　打印 print.css



十八、   Padding影响宽度问题

      如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding

十九、   完美的单象素外框线表格

      table{border-collapse:collapse;}

td{border:1px solid #000;}

二十、   如果文字过长,则将过长的部分变成省略号显示

二十一、        并不是所有样式都要简写

       当样式表前定义了如p{padding:1px 2px 3px 4px}时，在后续工程中又增加了一个样式上补白5px，下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式P变了话，你定义的p.style1的样式也要变。(此种方法对后期修改样式很重要)

二十二、        几个常用到的CSS细节处理上的样式

    1）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;

2）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不让其换行，不过只能处理文字在一行上的截断，不能处理多行。)（IE5以上）FF不能，它只隐藏。

***万能强制换行：white-space:normal;word-break:break-all;

禁止换行：white-space:nowrap

强制换行：word-wrap: break-word; word-break: normal;

.AutoNewline

{

/*word-break: break-all; 方法一必须*/

/*word-wrap:break-word;overflow:hidden; 方法二 */

/*word-wrap:break-word; word-break: normal; 方法三 */

   word-wrap:break-word; word-break:break-all;

}

.NoNewline

{

/*word-break: keep-all; 方法一必须*/

white-space:nowrap;

}

3）固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。

4）文字用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。

5）图片设为半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；

6）FLASH透明：选中swf,打开原代码窗口，在前输入以上是针对IE的代码。

针对FIREFOX 给标签也增加类似参数wmode=”transparent”

7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：

.pictures img {

filter: alpha(opacity=45); }

.pictures a:hover img {

filter: alpha(opacity=90); }

8）层在浏览器中居中对齐问题

body { text-align: center }

#content { text-align: left; width: 700px; margin: 0 auto }

9)单行内容在层中垂直对齐问题

# content{height:19px; line-height:19px; }缺点是要内容不要换行。

10）层在浏览器中垂直居中对齐问题

    缺点是：水平、垂直方向上不能出现滚动条，只能是在一屏的情况下

其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以2。

如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写。

请看实例代码：

div {

    position:absolute;

    top:50%;

    left:50%;

    margin:-150px 0 0 -200px;

    width:400px;

    height:300px;

    border:1px solid red;

    }

11）CSS控制图片自适应大小

div img {

max-width:600px;

width:600px;

width:expression(document.body.clientWidth>600?”600px”:”auto”);

overflow:hidden;

}

二十三、        使用float属性的元素要注意的问题

利用border属性确定出错元素的布局特性

　　使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。

float元素的父元素不能指定clear属性

　　MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。

float元素务必指定width属性

　　很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。

　　另外指定元素时尽量使用em而不是px做单位。

float元素不能指定margin和padding等属性

　　IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。

float元素的宽度之和要小于100%

如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

二十四、        浏览器的兼容性问题（针对FF/IE6/IE7）

    1.CSS hack:区分IE6，IE7，firefox

        区别FF，IE7，IE6：

               background:green !important; background:orange; *background:blue;

        IE6能识别*，但不能识别 !important,

        IE7能识别*，也能识别!important;

        FF不能识别*，但能识别!important;

        另外再补充一个，下划线”_“,

        IE6支持下划线，IE7和firefox均不支持下划线。

        于是大家还可以这样来区分firefox，IE7，IE6

                 background:green!important; *background:orange; _background:blue;

        注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

2.在firefox和IE中的BOX模型解释不一致导致相差2px解决方法

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

3.条件性注释来选择不同的浏览器（比CSS hack简洁）



4.区分IE8

.color{

background-color: #CC00FF;      /*所有浏览器都会显示为紫色*/

background-color: #FF0000\9;    /*IE6、IE7、IE8会显示红色*/

*background-color: #0066FF;     /*IE6、IE7会变为蓝色*/

_background-color: #009933;     /*IE6会变为绿色*/

二十五、        W3C遵循的标准原则

1. 在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免   两个标记，经验表明，这两个标记会带来许多麻烦。

　　2. 一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用标记，以便能够使这个大表格分块显示。

　　3. 排版中我们经常会遇到需要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上
标记，注意，一般情况下，请不要省略
结束标记。

　　4. 原则上，我们禁止用  来人为干预图片显示的尺寸，而且建议  标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给附上 width 和 height 属性。

　　5. 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用
来人工干预分段。

　　6. 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。

　　7. 所有的字号都应该用样式表来实现，禁止在页面中出现  标记。

　　8. 请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。

　　9. 中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体。

　　10. 行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.

　　11. 网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样：而应该这样：

　　12. 嵌入图形文本的使用较大的字体，建议不要在图形中包括文本。

　　13.“网页大小”定义为网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在34K以下为合适。

　 14. float元素务必指定width属性
　　很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。
　　另外指定元素时尽量使用em而不是px做单位。

　　15. float元素不能指定margin和padding等属性
　　IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。也可以使用hack方法为IE指定特别的值。

　　16. float元素的宽度之和要小于100%
　　如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

二十六、        列表元素ul ol li dl dt dd释义

    　


内容1

内容2

标题

内容描述1

内容描述2

l      dt 和dd中可以再加入 ol ul li和p

二十七、        清除浮动

clearfix:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;}

在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。

.clearfix {

display:inline-block;

}

/* Hides from IE-mac \*/

* html .clearfix {

height:1%;

}

.clearfix {

display:block;

}

/* End hide from IE-mac */

**这种用法在进行图文混排时比较多，但是不太好控制，用margin配合clear{clear:both}直接来控制。

二十八、        文字的处理

    一般的字体：

font-family : “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, “宋体”,sans-serif;

标题字体（h1/h2）：font-family: Cambria, Georgia, “Times New Roman”, Times, serif;

首字下沉：

P:first-letter{padding:10px,fontsize:32pt;float:left}

拼音汉字：

布鲁斯狼bu lu si lang

二十九、        Min-height多浏览器兼容问题

Div{

        min-height:450px;

height:auto!important;

height:450px;

overflow:visible;????

}

三十、   CSS布局口诀 – CSS BUG顺口溜

IE边框若显若无，须注意，定是高度设置已忘记；

浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；

三像素文本慢移不必慌，高度设置帮你忙；

兼容各个浏览须注意，默认设置行高可能是杀手；

独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；

学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。

所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。

图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。

IE浮动双边距，请用display：inline拘。

列表横向排版，列表代码须紧靠，空隙自消须铭记。

三十一、        Web中的字体应用

总结几套实用而简单的font-family

font-family: Tahoma, Helvetica, Arial, sans-serif;

Tahoma 系的中性字体。推荐使用在13px以上的环境。

font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;

Verdana 系的宽扁字体。推荐在11px以下环境使用。

font-family: Geogia, Times New Roman, Times, serif;

衬线字体的不二之选。多用于大号的标题字体16px以上。

font-family: Lucida Console, Monaco, Courier New, mono, monospace;

一系列等宽字体。写代码很好用。另外，如果觉得Lucida Console太宽的话，可以换成比较窄的Lucida Sans Typewriter。话说老赵blog上的代码块使用的就是Lucida Sans Typewriter 哟~

如果在div的style中把visibility设为hidden则div隐藏，但是它会占据空白空间，而如果设置成display：none则不占据空白空间；
而visible=”false”则div不返回在html中；

实用的jQuery视觉手册

风信子 — Mon, 16 Nov 2009 14:02:14 +0000

jQuery视觉手册(jQuery Visual Cheat Sheet)是国外知名前端专家Woork制作的对网站设计师和开发人员都灰常有用且实用的参考手册，针对jQuery 1.3。该手册(共6页)包含了全部的附有较详细描述jQuery API参考和部分示例代码。

手册的设计风格简洁，模块化的组织结构可以让你很方便的找到自己想要的内容。

预览：

下载：从box下载

本视觉手册官方地址为 http://woork.blogspot.com/2009/09/jquery-visual-cheat-sheet.html 目前由于某些众所周知的原因，暂时不能访问。