CSS命名规划整理

Posted by admin in XHTML & CSS一 26th, 2010 | No Comments

(一) 常用的CSS命名规则：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
……
read more...

CSS hack 完全手册 ( IE5.5 IE6 IE7 IE8 FF Opera Safari…)

Posted by admin in XHTML & CSS九 24th, 2009 | 5 Comments

区别 IE5.5、IE6、IE7、IE8、w3c

1
2
3
4
5
6
7

.qq{
background:#f00;                    /* w3c IE8 IE7 IE6*/
background/*\**/:#fdd\9;           /* IE8 IE7 IE6 */       
*background:#00f;                  /* IE7 IE6 */
_background:#0f0;                  /* IE6 */
_background /**/:#ccc             /* IE5.5 */ 
}

针对Opera、Safari 、Chrome 

1
2
3

.qq { background: #000;   }                   /* IE FF */
@media all and (min-width:0px){
.qq { background: #000;   }                  /* Opera、Safari 、Chrome */

FireFox 3 Only 

1
2

.myClass { color:#666; }/* other*/ 
html>/**/body .myClass, x:-moz-any-link, x:default { color:#f00;  }/* Only FireFox 3 */

css布局精髓

Posted by admin in XHTML & CSS一 6th, 2009 | 1 Comment

css布局精髓

很好的参考案例，值得研究，打开

容器不扩展问题

Posted by admin in XHTML & CSS二 27th, 2008 | No Comments

解决办法：在divGroup里面加上

1

overflow:hidden;zoom:1;

ps:很多人都是在里面加个清除浮动空标签来解决，其实这个是错误办法。太增加代码量了

高度不适应

Posted by admin in XHTML & CSS二 27th, 2008 | No Comments

1.问题起因
高度不适应指的是，当内层对象的高度发生变化时，外层对象的高度不能自动进行调节，特别是当内层的对象使用margin或者padding只后。
如下：

1
2
3
4
5
6
7
8

#box {
	background-color:#eee;
}
#box p {
	margin-top: 20px;
	margin-bottom: 20px;
	text-align:center;
}

解决：使用空div来占位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#box {
	background-color:#eee;
}
p {
	margin-top: 20px;
	margin-bottom: 20px;
	text-align:center;
}
.clear-div {
	height:0px;
	overflow:hidden;
}
.box2 {
	background-color:#aaa;
}

或者为DIV加上border属性

CSS中position的absolute和relative

Posted by admin in XHTML & CSS一 31st, 2008 | 1 Comment

之前老弄不明白position到底是怎么定位的，position属性其实是指本体对上级的定位。
默认的属性值都是static，静态。最关键的是relative（相对）以及absolute（绝对）。
只要把其上一级的样式属性position设置为relative就可以了。

1
2
3

<div id="A">
     <div id="B">some text here</div>
 </div>

当A的position为relative时，B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。

FireFox文本自动换行处理，如何实现FireFox文本自动换行

Posted by admin in Web观察十二 31st, 2007 | No Comments

FireFox文本自动换行处理，如何实现FireFox文本自动换行
文本自动换行IE中解决方法：

1
2

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

注：在要换行的内容相应的单元格或者DIV里加入，如：

<div style=word-wrap:break-word;></div>或<td style=word-wrap:break-word;></td>

文本自动换行FireFox中解决方法（脚本）：

<script type=”text/javascript”>
function toBreakWord(intLen, id){
var obj=document.getElementById(id);
var strContent=obj.innerHTML;
var strTemp=”";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+”<br>”;
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+= strContent;
obj.innerHTML=strTemp;
}
</script>
 
 注：以上脚本放在</head>前面.

调用时如下写法：

同个页面单处调用：

<div id=”content”>这里是要应用换行的内容</div><script language=”javascript”>toBreakWord(60,”content”);</script>

同个页面多处调用：

<div id=”content”>这里是要应用换行的内容</div><script language=”javascript”>toBreakWord(60,”content”);</script>
<div id=”content2″>这里是要应用换行的内容</div><script language=”javascript”>toBreakWord(60, “content2″);</script>

注：把应用的JS写在</div>后面，其中60表示一行要显示多少字字符，注意多个调用时ID的相应变化，不能同一个ID名称，应用上面的方法后IE也会是按设定的字符数换行，但是IE里面支持自动换行，所以只要判断一下是否为IE，如果不是IE就不要输出上面的
 
<script language=”javascript”>toBreakWord(60, “content”);</script>

这段JS，如果不是就要输出。

如何让Div中的内容对齐底部或者垂直居中

Posted by admin in XHTML & CSS十二 31st, 2007 | 78 Comments

底端对齐

提示：你可以先修改部分代码再运行。

垂直居中

提示：你可以先修改部分代码再运行。

div li 表格应用

Posted by admin in XHTML & CSS十二 31st, 2007 | No Comments

提示：你可以先修改部分代码再运行。