2012年3月13日
relative、absolute和float
摘要： position:relative和position:absolute都可以改变元素在文档中的位置，都能激活元素的left、top、right、bottom和z-index属性。（默认这些属性未激活，设置了也无效） 设置position:relative和position:absolute都会让元素浮起来，会改变正常情况下的文档流。 不同： position:relative会保留自己在z-index:0层的占位，left、top、right、bottom值是相对于自己在z-index层的位置。 position:absolute会完全脱离文档流，不再z-index:0层保留占位符... 阅读全文
posted @ 2012-03-13 11:42 子非魚87 阅读(4393) 评论(3) 推荐(1) 编辑
display:inline-block
摘要： inline-block,行内的块级元素,它拥有块级元素的特点,可以设置长宽,可以设置margin和padding值,但它却不是独占一行的. IE6和IE7支持block,inline,none. IE6和IE7不支持inline-block属性,它们的inline-block属性其实只是触发了行内元素的hasLayout,使行内元素拥有了一些块级元素的特性.其效果和zoom:1是一样的. 在IE6,7下display:inline-block只能对行内元素实现,如果是块级元素就不行.(只能使行内元素能设置高宽这样的属性,但不能使块级元素不独占一行,即对块级元素无效). IE8和火... 阅读全文
posted @ 2012-03-13 10:50 子非魚87 阅读(307) 评论(0) 推荐(0) 编辑
块级元素和行内元素的区别
摘要： 块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度. 行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化. 块级元素可以设置width,height属性. 行内元素设置width,height属性无效. 块级元素即使设置了宽度,仍然是独占一行. 块级元素可以设置margin和padding属性. 行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,但竖直方向的padding-top,padd... 阅读全文
posted @ 2012-03-13 10:34 子非魚87 阅读(3949) 评论(0) 推荐(0) 编辑
CSS hack
摘要： 1.IE条件注释法只在IE下生效<!--[if IE]><link type="text/css" href="..." rel="stylesheet" /><![endif]-->只在IE6下生效<!--[if IE6]><link type="text/css" href="..." rel="stylesheet" /><![endif]-->只在IE6以上版本生效<!--[if gt IE 阅读全文
posted @ 2012-03-13 10:17 子非魚87 阅读(293) 评论(0) 推荐(0) 编辑
关于margin属性
摘要： margin有个特殊的样式,相邻的margin-left和margin-right是不会重合的,但是相邻的margin-top和margin-bottom会产生重合. 如果不确定上下margin特定不稳定,最好不要将它写到模块的类里,而是使用类的组合,单独为上下margin挂原子类. 阅读全文
posted @ 2012-03-13 09:56 子非魚87 阅读(187) 评论(0) 推荐(0) 编辑
2012年3月9日
CSS reset
摘要： body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0;}table{ border-collapse:collapse; border-spacing:0;}a{ text-decoration:none;}fieldset,img{ border:0;}address,caption,cite,code,dfn,th,var{ font-style:normal; font-weight:normal;}ol,u 阅读全文
posted @ 2012-03-09 10:03 子非魚87 阅读(167) 评论(0) 推荐(0) 编辑
HTML中常见的4种DTD类型
摘要： 1 //用于XHTML 4.0 的严格型 2 <!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 3 4 //用于XHTML 4.0 的过渡型 5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 6 7 //用 阅读全文
posted @ 2012-03-09 09:45 子非魚87 阅读(4803) 评论(1) 推荐(1) 编辑
2012年1月4日
全屏透明遮罩层
摘要： 在网上转悠的时候，看到了一篇不错的效果，便转载过来，以免以后用的时候难得找。 主要是运用"position:fixed;"属性。 直接上代码:<!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>& 阅读全文
posted @ 2012-01-04 17:51 子非魚87 阅读(1500) 评论(0) 推荐(0) 编辑
css selector的优先级
摘要： SelectorSpecificity行内样式style=""1,0,0,0id选择器#content {}0,1,0,0class选择器.content{}0,0,1,0标签选择器div{}0,0,0,12个id选择器#div #content{}0,2,0,011个class选择器.a1 .a2 .a3.....a11{}0,0,11,01个id和1个class选择器#div .nav{}0,1,1,0 如表格所示，行内样式拥有最高优先级，其次是id选择器，再其次是class类选择器，最后是标签选择器。 当选择器叠加的时候，并不是简单的相加。如果将id选择器的优先级看成 阅读全文
posted @ 2012-01-04 17:08 子非魚87 阅读(282) 评论(0) 推荐(0) 编辑
table隔行变色
摘要： JavaScript解决方法:window.onload=function(){ var otable=document.getElementById("oTable"); for(var i=0;i<oTable.rows.length;i++) { if(i%2==0) { oTable.rows[i].className="altrow"; /*.altrow指定背景颜色*/ } }}jQuery解决办法:$( function() { $("table#oTable tr:nth-child(odd)").addClas 阅读全文
posted @ 2012-01-04 16:29 子非魚87 阅读(165) 评论(0) 推荐(0) 编辑