CSS - 随笔分类 - 码农13

摘要：添加层关闭我这里是要显示的内容阅读全文

posted @ 2012-03-07 10:06 码农13 阅读(93) 评论(0) 推荐(0)

摘要：.transparentDiv{ filter:alpha(opacity=60); /*IE*/ -moz-opacity:0.4; /*MOZ FF*/ opacity:0.4; /*CSS3 FF1.5*/} 阅读全文

posted @ 2012-03-07 09:55 码农13 阅读(136) 评论(0) 推荐(0)

css style

摘要：常见的做法是node.style.width之流但有些样式如vertical-align等，实在不想查它在javascript中如何表示。用node.setAttribute("style","xxx");也可以修改node的内联样式。但在IE下不行还是乖乖地写个类，然后addClass吧阅读全文

posted @ 2012-03-05 22:47 码农13 阅读(142) 评论(0) 推荐(0)

css table td内容为空里正确显示边框

摘要：通常情况下，td内无内容时没有边线（但也有时有，还未深究）解决方法：给table加个border-collapse:collapse; 给td加个empty-cells:show; 阅读全文

posted @ 2012-02-28 19:23 码农13 阅读(300) 评论(0) 推荐(0)

css 居中

摘要：水平居中： 1. 行内元素：父元素text-align:center; 2. 确定宽度的块级元素：margin-left/right:auto; 3. 不确定宽度的块级元素： a. 放在table的td里，table不是块级，但margin-left/right对它有效，table的宽度由它的内容决定。缺点：增加无语义标签，加深标签的嵌套次数。 b. 将块级元素转化成inline，父元素taCenter 缺点：不能设定长宽 c. 父元素： float:left; position:relative; left:50%; 子元素： posit... 阅读全文

posted @ 2012-02-23 17:56 码农13 阅读(145) 评论(0) 推荐(0)

css ie6 png透明背景之js解决方案

摘要：IE6不支持png透明背景解决方式：给window.onload添加以下两个函数：function correctPNG(){ for(var i=0;i<document.images.length;i++){ var img=document.images[i]; var imgName=img.src.toUpperCase(); if(imgName.substring(imgName.length-3,imgName.length)=="PNG"){ var imgID=(img.id)?"id='"+img.id+"& 阅读全文

posted @ 2012-02-23 17:36 码农13 阅读(223) 评论(0) 推荐(0)

css z-index

摘要：1. z-index为负，可以创造一些特殊的效果，但是无法监听鼠标事件，因为被z-index:0的body盖住了2. 如果多个元素的z-index相同，长江后浪盖前浪3. relative 或 absolute激活z-index可使元素重叠；设置负边距不激活z-index也可使元素重叠。问题1：Flash嵌入网页，不管如何设置z-index，都会浮于其它元素之上。原因：浏览器解析页面时，窗口类型的元素显示在页面最顶端 <embed wmode="" <param name="wmode" value="" wmode属性阅读全文

posted @ 2012-02-23 16:45 码农13 阅读(202) 评论(0) 推荐(0)

高质量的CSS

摘要：1. 怪异模式的触发与DTD有关。Document Type Definition。DTD包含元素的定义规则、元素间关系的定义规则、元素可使用的属性、可使用的实体或符号规则。2. 推荐的CSS组织方式：base+common+page base:css reset用YUI的CSS Reset+通用原子类基石 common:组件级CSS类，网站中高度重用的模块网站级 page:通用base和common解决的，就不要用page页面级3. 重用即为模块，取最大公约数。模块应在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性。4. 推荐CSS类命名法：驼峰命名法用于区别不同单词，... 阅读全文

posted @ 2012-02-23 16:35 码农13 阅读(251) 评论(0) 推荐(0)

css 盒模型 hasLayout position float

摘要：hasLayout是IE为解析盒模型而设计的一个专有属性，它的设计初衷是用于块级元素的，如果触发行内元素的hasLayout，就会让行内元素拥有一些块级元素的特性。display:inline-block 有width,height,margin,padding 却不独占一行，很好但IE6，7不支持inline-block，inline-block只能触发IE6，7下行内元素的hasLayout即：IE6，7下，设置inline-block的块级元素：白设行内元素：可设width,height... 效果同zoom:1例：abcde<span>12345</span> 阅读全文

posted @ 2012-02-23 16:32 码农13 阅读(206) 评论(0) 推荐(0)

css a标签的四个伪类的顺序

摘要：love hate原则：link visited hover active 阅读全文

posted @ 2012-02-23 16:09 码农13 阅读(153) 评论(0) 推荐(0)

css margin

摘要：相邻的margin-left和margin-right不会重合，但margin-top和margin-bottom会重合。最好不要混用margin-top和margin-bottom，统一用其中一种，就像为<td>设边框。阅读全文

posted @ 2012-02-23 15:47 码农13 阅读(157) 评论(0) 推荐(0)

css textarea固定大小不显示滚动条

摘要：textarea{ resize:none; width:200px; height:100px; max-height:100px; max-width:200px; overflow:auto; /*使不显示滚动条*/} 阅读全文

posted @ 2012-02-23 15:17 码农13 阅读(291) 评论(0) 推荐(0)

css 清除浮动

摘要：如果不清除浮动，老三会跟在老二屁股后面<p style="float:left;width :400px;">这个是第1列，</p> <p style="float:left;width :400px;">这个是第2列，</p> <p style="clear:both;">这个是列的下面。</p> float和absolute会让元素以inline-block方式显示，再显示地设置display为inline或block也无效。所以可以定义元素尺寸。阅读全文

posted @ 2012-02-23 15:01 码农13 阅读(130) 评论(0) 推荐(0)

css ie6双边距

摘要：float:left;margin:5px; /*IE6下会理解为10px*/display:inline;/*让它理解为5px*/ 阅读全文

posted @ 2012-02-23 14:57 码农13 阅读(106) 评论(0) 推荐(0)

自制课程表组件

摘要：阅读全文

posted @ 2012-02-23 14:50 码农13 阅读(161) 评论(0) 推荐(0)

自定义list-style的兼容性问题解决办法

摘要：用CSS可以定义ul的自定义图标list-style:url(../images/sig1.jpg);在IE和FF下都能正常显示，但chrome不兼容。最好不要用这个属性，改为在li里定义背景图片：ul: list-style:none;li: background:url(../images/sig1.jpg) no-repeat; width:120px; 阅读全文

posted @ 2012-02-22 19:44 码农13 阅读(320) 评论(0) 推荐(0)

css hack 尽我所见

摘要：1.IE条件注释注： 只在IE下有效 只在IE6有效 7，8同理 只在IE6以上版本有效 lte:<= lt:< gte:>= gt:> !:!=2.选择符前缀法：“*html” 前缀只对IE6生效 "*+html"前缀只对IE7生效.test{width:80px;} /*IE 6 7 8*/*html .test{wid 阅读全文

posted @ 2012-02-22 19:41 码农13 阅读(133) 评论(0) 推荐(0)

ie background repeat 出现空白

摘要：<div> <div><img src="http://images.cnblogs.com/menu_01.jpg" width="163" height="8" alt=""></div> <div style="background: url('/images/menu_02.jpg') repeat-y top left;"><jdoc:include type="modules" na 阅读全文

posted @ 2012-02-22 18:40 码农13 阅读(197) 评论(0) 推荐(0)

input文本框、文字、按钮、图片垂直居中对齐

摘要：vertical-align:middle;line-heigth:00px; 阅读全文

posted @ 2012-02-22 18:34 码农13 阅读(225) 评论(0) 推荐(0)

css table 固定宽度

摘要：<style>.tbl {table-layout:fixed;}</style><table class="tbl" border="1" width="80"><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>table-layout:fixed，可以在内置属性里设阅读全文

posted @ 2012-02-22 18:32 码农13 阅读(202) 评论(0) 推荐(0)

随笔分类 - CSS