http://www.51koko.com/
关于用javascript改变class所用的setAttribute()方法
归类于： Javascript — admin @ 1:28 下午
需要注意的是：
1.element要用getElementById or ByTagName来得到，
2.setAttribute(”class”, vName)中class是指改变”class”这个属性，所以要带引号。
3.IE中要把class改成className,…..IE不认class,所以最好写两句，都用上吧。
W3C DOM - {setAttribute()}
setAttribute(string name, string value)：增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
1、关于class和className
class属性在W3C DOM中扮演着很重要的角色，但由于浏览器差异性仍然存在。使用setAttribute(”class”, vName)语句动态设置
Element的class属性在firefox中是行的通的，在IE中却不行。因为使用IE内核的浏览器不认识”class”，要改用”className”；
同样，firefox 也不认识”className”。所以常用的方法是二者兼备：
element.setAttribute(”class”, vName);
element.setAttribute(”className”, vName); //for IE
2、setAttribute()的差异
我们经常需要在JavaScript中给Element动态添加各种属性，这可以通过使用setAttribute()来实现，这就涉及到了浏览器的兼容性问题。
var bar = document.getElementById(”foo”);
bar.setAttribute(”onclick”, “javascript:alert(’This is a test!’);”);
这里利用setAttribute指定e的onclick属性，简单，很好理解。但是IE不支持，IE并不是不支持setAttribute这个函数，
而是不支持用setAttribute设置某些属性，例如对象属性、集合属性、事件属性，也就是说用setAttribute设置style和onclick这些属性
在IE中是行不通的。为达到兼容各种浏览器的效果，可以用点符号法来设置Element的对象属性、集合属性和事件属性。
document.getElementById(”foo”).className = “fruit”;
document.getElementById(”foo”).style.cssText = “color: #00f;”;
document.getElementById(”foo”).style.color = “#00f”;
document.getElementById(”foo”).onclick= function () { alert(”This is a test!”); }
评论（0）
2007-12-04
div中图片垂直居中
归类于： Css — admin @ 2:11 下午
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title>
<style type=”text/css”>
<!–
* {margin:0;padding:0}
div {
width:300px;
height:300px;
line-height:300px;
border:1px solid #666;
overflow:hidden;
position:relative;
text-align:center;
}
div p {
+position:absolute; /* only for ie */
top:50%;
}
img {
border:1px solid #666;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle;
}
–>
</style>
</head>
<body>
<div><p><img src=”http://www.baidu.com/img/logo.gif” /></p></div>
</body>
</html>
评论（0）
2007-11-23
用css实现文字的自动隐藏
归类于： Css — admin @ 12:01 下午
overflow : visible | auto | hidden | scroll
参数：
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
说明：
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
设置textarea对象为hidden值将隐藏其滚动条。
对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为 hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视 direction属性设置而定）的单元格。
自IE5开始，此属性在MAC平台上可用。
对应的脚本特性为overflow。
示例：
body { overflow: hidden; }
div { overflow: scroll; height: 100px; width: 100px; }
text-overflow版本：IE6+专有属性 继承性：无
语法：
text-overflow : clip | ellipsis
参数：
clip : 不显示省略标记（…），而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记（…）
说明：
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出。
对应的脚本特性为textOverflow。请参阅我编写的其他书目。
示例：
div { text-overflow : clip; }
代码：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>无标题文档</title>
</head>
<body>
<table width=”100%” border=”1″ cellspacing=”2″ cellpadding=”2″ style=”table-layout:fixed”>
<tr>
<td width=”10%”>s</td>
<td><div STYLE=”width:60%; overflow:hidden;text-overflow:ellipsis”> <nobr> asdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdata goes here </nobr></div></td>
<td width=”30%”> </td>
</tr>
<tr>
<td>d</td>
<td><div STYLE=”width:60%; overflow:hidden;text-overflow:ellipsis”> <nobr> asdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdata goes here </nobr></div></td>
<td> </td>
</tr>
</table>
</body>
</html>
评论（0）
css换行
归类于： Css — admin @ 11:55 上午
强制不换行
div{
white-space:nowrap;
}
自动换行
div{
word-wrap: break-word;
word-break: normal;
}
强制英文单词断行
div{
word-break:break-all;
}
firefox不支持此属性。
评论（0）
2007-10-24
动态创建html内容
归类于： Css — admin @ 3:07 下午
document.write 方法() ————————-最大的缺点就是违背了“分离Javascript”原则
例子：document.write(”<p>this is inserted.</p>”)
innerHTML 属性
例子1:
<script language=”javascirpt”>
window.load=function() {
var testdiv=document.getElementById(”testdiv”);
alert(testdiv.innerHTML);
}
</script>
<div id=”testdiv”>
<p>This is <em>my</em> content</p>
</div>
例子2:
<script language=”javascirpt”>
window.load=function() {
var testdiv=document.getElementById(”testdiv”);
testdiv.innerHTML=”<p>I inserted <em>this</em> content</p>”
}
</script>
<div id=”testdiv”>
</div>
评论（0）
2007-09-27
高度自适应
归类于： Css — admin @ 2:18 下午
6.6
高度自适应
网页布局中经常需要定义元素的高度和宽度，但很多时候我们希望元素的大小能够根据窗口或父元素自动调整，这就是我们常挂在嘴边的元素自适应。元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
元素宽度自适应设置起来比较轻松，只需要为元素的width属性定义一个百分比即可，且目前各大浏览器对此都完全支持。不过问题是元素高度自适应很容易让人困惑，设置起来比较麻烦。我们在前面也介绍过很多高度自适应的技巧，但都不是最完美的方法，既然元素都可以定义height属性，为什么不用height属性定义百分比来实现高度自适应呢？但是如果直接设置元素高度后却发现height属性并没有起作用，这是为什么呢？
例如，看下面一个简单示例，其中XHTML结构代码如下：
<div id=”content”>
<div id=”sub”>高度自适应</div>
</div>
CSS布局代码：
/*[高度不能够自适应，参考示例6-41_1.html]*/
#content {/*<定义父元素显示属性>*/
background: #B452CD;/*背景色*/
}
#sub {/*<定义子元素显示属性>*/
width:50%;/*父元素宽度的一半*/
height:50%;/*父元素高度的一半*/
background:#C0FE3E; /*背景色*/
}
显示效果：
图6.62
在IE 6中浏览。宽度能够自适应，高度不能自适应。
图6.63
在Firefox 2中浏览。宽度能够自适应，高度不能自适应。
这是不是父元素没有显式定义高度呢？是的，如果给它设置一个固定值，其子元素的百分比高度就能够起作用了。很显然这不是我们所要的结果，我们所希望的是子元素的高度能够随窗口而变化，是不是body没有设置高度呢？当设置body的height属性为100%，在IE 6浏览器中可以看到子元素的百分比高度起作用，但在非IE浏览器中看不到效果。继续设置body的父元素html的height属性为100%，这时终于看到了子元素的百分比高度在各大浏览器中起作用了。
原来在IE浏览器中html的height属性默认为100%，body没有设置值，而在非IE浏览器中html和body都没有预定义height属性值。因此，解决高度自适应问题可以使用下面的代码：
CSS布局代码：
/*[高度自适应，参考示例6-41_2.html]*/
html,body {/*<定义html和body高度都为100%，即显式定义html和body高度>*/
height:100%;
}
#content {/*<定义父元素显示属性>*/
height:100%;/*满屏显示*/
background: #B452CD;/*背景色*/
}
#sub {/*<定义子元素显示属性>*/
width:50%;/*父元素宽度的一半*/
height:50%;/*父元素高度的一半*/
background:#C0FE3E; /*背景色*/
}
显示效果：
图6.64
在IE 6中浏览。高度能自适应。
图6.65
在Firefox 2中浏览。高度能自适应。
如果把子元素对象设置为浮动显示或者绝对定位显示，则高度依然能够实现自适应。例如，下面的CSS布局代码：
/*[高度绝对定位自适应，参考示例6-41_2.html]*/
html,body {/*<定义html和body高度都为100%，即显式定义html和body高度>*/
height:100%;
}
#content {/*<定义父元素显示属性>*/
height:100%;/*满屏显示*/
position:relative; /*相对定位*/
background: #B452CD;/*背景色*/
}
#sub {/*<定义子元素显示属性>*/
width:50%;/*父元素宽度的一半*/
height:50%;/*父元素高度的一半*/
position:absolute; /*绝对定位*/
background:#C0FE3E; /*背景色*/
}
高度自适应对于布局具有重要的作用，我们可以利用高度自适应实现很多复杂布局效果。特别是对于绝对定位，突破了原来宽、高灵活性差的难题。充分发挥绝对定位的精确定位和灵活适应的双重能力。不过这种能力还是很有限度的，实践中读者应适当把握，毕竟绝对定位属于层布局模型，它与文档流属于不同的层面。
评论（0）
层叠等级
归类于： Css — admin @ 2:18 下午
6.5
层叠等级
使用层布局的另一个好处是可以实现元素之间的重叠显示，这与图形图像中的图像合成有点类似。而在流动布局和浮动布局中是无法实现这种重叠效果的，因此利用定位重叠技术可以创建动态网页效果。在CSS中可以通过z-index属性来确定定位元素的层叠等级。需要声明的是，z-index属性只有在元素的position属性取值为relative、absolute或fixed时才可以使用。其中，fixed属性值目前还没有得到IE的支持。
下面看一个示例，了解定位中层叠显示情况。请输入下面的CSS代码：
/*[定位元素的层叠等级，参考示例6-36.html]*/
#sub_1,#sub_2 {/*定义子元素绝对定位，并设置宽和高*/
position: absolute;
width:200px;
height:200px;
}
#sub_1 {/*定义第1个子元素的属性*/
z-index:10; /*设置层叠等级为10*/
left:50px;
top:50px;
background:red;
}
#sub_2 {/*定义第2个子元素的属性*/
z-index:1; /*设置层叠等级为1*/
left:20px;
top:20px;
background:blue;
}
然后，输入XHTML结构代码：
<div id=”contain”>
<div id=”sub_1″>元素1</div>
<div id=”sub_2″>元素2</div>
</div>
显示效果：
图6.54
在z-index属性中，其值越大，层叠级别就越高。如两个绝对定位元素的该属性具有同样的number值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位元素，此属性的number值为正数的元素会在其之上，而number值为负数的元素在其之下。此属性仅仅作用于position属性值为relative、absolute或fixed的元素，但不会作用于窗口控件，如select、button元素。
但是z-index属性受到HTML代码等级的制约，只能在同一级别的HTML上体现作用。例如，我们在上面示例中调整XHTML结构代码，使元素1和元素2处于不同的包含块中：
<div id=”contain1″>
<div id=”sub_1″>元素</div>
</div>
<div id=”contain2″>
<div id=”sub_2″>元素</div>
</div>
然后，在CSS中定义包含块属性：
/*[定位元素的层叠等级，参考示例6-37.html]*/
#contain1, #contain2 {
position:relative; /*定义两个父元素都为相对定位，实现包含块显示*/
width:100px;
height:100px;
background:#ddd;
}
显示效果前后比较：
图6.55
在IE 6中浏览。元素之间的这种等级是比较严格的。从右图可以看出，由于元素1和元素2的包含块不同，因此即使元素1的z-index属性值设置了100，仍然被元素2覆盖。
图6.56
在Firefox 2中浏览。在非IE浏览器中，这两个元素被视为同一级别，z-index属性值越大就越显示在上面，不再受各自包含块的约束。
但当我们定义元素2的父元素层叠等级为101，则显示如图6.57所示。
图6.57
#contain2 {/*[定位元素2的父元素层叠级别为101，参考示例6-38.html]*/
z-index:101;
}
通过这个示例，我们可以得出这样一个有趣的结论：当父元素的层叠级别很高时，也会给内部子元素带来更多层叠级别积分，且这种积分得到了各大主流浏览器的普遍支持。
我们在上面示例基础上继续研究，你会发现很多有趣的现象，但也很让人模糊。假设要做一个列表，定义列表项为相对定位，然后在其中一个列表项中加入一个span元素，定义为绝对定位，你会发现span元素无论层叠级别多高，都无法覆盖父级列表项。
<ul>
<li><span>列表项</span></li>
<li>列表项</li>
<li><span>列表项</span></li>
<li>列表项</li>
</ul>
然后，输入CSS代码：
/*[定位元素的层叠等级，参考示例6-39.html]*/
ul{/*<清除列表预定义样式>*/
margin:0;
padding:0;
list-style:none;
}
li {/*<定义列表项属性>*/
width:100px;
height:100px;
margin-right:4px;
background:#EEE685;
float:left;
position:relative; /*相对定位*/
z-index:1; /*层叠级别为1*/
}
li span {/*<定义列表项内子元素span属性>*/
width:100px;
height:100px;
position:absolute; /*绝对定位*/
top:30px; /*顶边偏移值*/
left:60px; /*左边偏移值*/
z-index:1000; /*层叠级别为1000*/
background:#D02090;
}
显示效果：
图6.58
从图6.58可以看出，无论span元素的z-index属性值被设置为多大都被压在父级同类元素下面。这是因为CSS把它们视为不同的级别，不同级别的z-index属性值是没有可比性的。
此时，如果要让span元素显示在上面，可以定义它的父级包含块的z-index属性值大于1，如图6.59所示。
图6.59
<ul> <!–[参考示例6-40.html]–>
<li id=”sub1″><span>列表项</span></li>
<li>列表项</li>
<li><span>列表项</span></li>
<li>列表项</li>
</ul>
CSS代码：
#sub1 {/*<定义第1个列表项层叠级别大于相邻同级元素>*/
z-index:2;
}
这个问题也应引起读者的注意，当我们没有指定z-index属性值时，z-index属性值默认为auto，即自动设置。它一般会根据父元素的定位进行确定，然而IE与非IE浏览器对于此值的解析存在差异。例如，在上面示例中我们去除li元素的z-index:1;，则显示效果如下图所示。
图6.60
在IE 6中浏览。z-index属性值默认为0。
图6.61
在Firefox 2中浏览。由于继承关系，子元素覆盖了父元素对象。
评论（0）
层布局模型
归类于： Css — admin @ 2:16 下午
6.4
层布局模型
层布局模型源于图形图像编辑器中非常流行的图层编辑功能，图层能够精确操作和编辑图像而广受平面设计师的欢迎，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。
为了支持层布局模型，CSS定义了一组定位（positioning）属性，详细说明可以参考2.4节CSS属性列表。元素定位的设计思路非常简单，它允许用户精确定义网页元素的相对位置，这里的相对可以相对元素原来显示的位置，或者是相对最近的包含块元素，或者是相对浏览器窗口。
6.4.1
定位类型
在层布局模型中最核心的技术应该是元素定位类型了，只有设计师确定元素的定位类型后，才能定义其他定位属性，如包含块、坐标偏移、层叠顺序等。
在CSS中可以通过position属性定义元素的定位类型，其语法如下：
div{/* 可以定义任何元素 */
position:absolute; /*可以选择其他属性，具体参照下面说明*/
}
该属性取值可以包括static、absolute、fixed和relative，具体说明如下：
l static：表示不定位，元素遵循HTML默认的流动模型，如果未显式声明元素的定位类型，则默认为该值。
l absolute：表示绝对定位，将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即根据浏览器窗口，而其层叠顺序则通过z-index 属性来定义。
l fixed：表示固定定位，与absolute定位类型类似，但它的包含块是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment: fixed;属性功能相同。目前IE浏览器还不支持该属性值，因此在布局中使用比较少，在后面章节中我们也不再专题讨论。
l relative：表示相对定位，它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static方式生成一个元素，然后移动这个元素，移动方向和幅度由left、right、top、bottom属性确定，元素的形状和偏移前的位置保留不动。
6.4.2
绝对定位包含块
本节与下一节所要探讨的绝对定位是广义概念的绝对定位，它是指定位元素完全脱离文档流，不再受文档流动的影响。绝对定位模式应用于position属性被定义为absolute（狭义的绝对定位）或fixed的任何元素。由于relative相对定位仍然受文档流动的影响，所以还不算绝对意义上的定位。
与浮动元素一样，绝对定位元素以块状显示。同时，它会为所有子元素建立了一个包含块，所有被包含元素都以包含块作为参照物进行定位，或在其内部浮动和流动。例如，在下面的示例中，我们定义了三个不同模型的包含元素，然后观察不同模型的包含元素与它们的子元素的位置关系。请输入下面的CSS代码：
/*[绝对定位-自成包含块，参考示例6-29.html]*/
#contain1,#contain2,#contain3 {/*<定义三个一级div元素对象的共同属性>*/
width:380px;
height:120px;
border:solid 1px #666;
}
#contain2 {/*<定义第2个一级div元素对象为绝对定位，并设置其距离窗口左边和上边的距离>*/
position:absolute;
left:120px;
top:60px;
background:#F08080;
}
#contain3 {/*<定义第3个一级div元素对象为浮动布局>*/
float:left;
background:#D2B48C;
}
#contain2 div {/*<定义绝对定位对象内所有子元素对象的共同属性>*/
color:#993399;
border:solid 1px #FF0000;
}
#sub_div1 {/*<定义绝对定位包含块内第1个对象为绝对定位>*/
width:80px;
height:80px;
position:absolute;
right:10px; /*定义该绝对元素右边距离父级包含块的右边距离*/
bottom:10px; /*定义该绝对元素底边距离父级包含块的底边距离*/
background:#FEF68F;
}
#sub_div2 {/*<定义绝对定位包含块内第2个元素为浮动布局>*/
width:80px;
height:80px;
float:left;
background:#DDA0DD;
}
#sub_div3 {/*<定义绝对定位包含块内第3个元素的背景色、宽和高>*/
width:100px;
height:90px;
background:#CCFF66;
}
然后，输入XHTML结构代码：
<div id=”contain1″>元素一－流动</div>
<div id=”contain2″>元素二－绝对定位
<div id=”sub_div1″>子元素1－绝对定位</div>
<div id=”sub_div2″>子元素2－浮动</div>
<div id=”sub_div3″>子元素3－流动</div>
</div>
<div id=”contain3″>元素三－浮动</div>
显示结果如下，我们可以看到“元素二”被定义为绝对定位，它以浏览器窗口为包含块，显示位置根据元素左边到窗口左边的距离和元素上边到窗口上边的距离来确定。而“子元素1”却根据具有定位属性的“元素二”为包含块，显示位置根据“子元素1”右边到“元素二”右边的距离和元素底边到“元素二”底边的距离来确定。
在“元素二”中包含了3个子元素，它们以不同的性质显示，但它们都以“元素二”作为参照平台，包括其中的浮动元素和绝对定位元素。
图6.41
在IE 6中浏览。流动元素都环绕浮动元素分布。
图6.42
在Firefox 2中浏览。流动的块状元素与浮动元素错行分布，而流动内容则环绕浮动元素分布。
因此，根据上例演示我们可以总结：一个绝对定位元素将为它包含的任何元素建立一个包含块，被包含元素遵循普通文档流规则，在包含块中自然流动，但它们的偏移位置由包含块来确定。
绝对定位元素甚至可以包含其他的绝对定位元素，这些绝对定位的子元素同样可以从父包含块内脱离出来。这些子包含块通过定位取负值或设置较大的偏移值跑到父包含块的外面。
绝对定位元素包含块的定义与其他元素有一点不同。绝对定位元素的包含块是由距离它最近的、且被定位的上级元素，也就是在它外面最接近它的position属性值为absolute、relative或fixed的父级元素。如果不存在这样的父级元素，那么默认包含块就是浏览器窗口本身。
绝对定位元素的包含块可以是一个内联元素。例如，请输入下面的CSS代码：
/*[绝对定位-内联包含块，参考示例6-30.html]*/
p {/*<定义段落基本属性>*/
margin:40px;
white-space:pre; /*保留代码中内容显示预定义格式*/
font-size:14px;
}
p span {/*<定义span元素为相对定位>*/
position:relative;
}
p strong {/*<定义span元素中的strong元素为绝对定位>*/
position:absolute;
left:40px; /*strong元素左边到span元素左边的距离*/
top:-30px; /*strong元素顶边到span元素顶边的距离*/
font-size:18px;
}
然后，输入XHTML结构代码：
<p>
<span><strong>虞美人</strong>南唐\宋李煜</span>
春花秋月何时了，
…
</p>
显示效果前后比较：
图6.43
在IE 6中浏览。为strong元素定义绝对定位，然后根据相对定位的span元素作为包含块进行定位。
图6.44
在IE 6中浏览。由于没有为span元素定义定位属性，则strong元素就以浏览器窗口为包含块进行定位，标题显示位置跑到窗口外边。
如果把内联元素作为包含块，情况就变得复杂多了。因为内联元素有可能在几行内显示，产生好几个线性盒，这时包含块就被定义为这几行区域，而其内部被包含的绝对定位子元素将根据内联元素的第1行第1个字符左上角来确定left和top属性的偏移值，根据第一行最后一个字符的右下角来确定right和bottom属性的偏移值。例如，在下面这个文本段中，我们在其中设置两个相互嵌套的span元素：
<p>
在用CSS控制排版过程中，<span id=”relative”>定位一直被人认为是一个难点，这主要是表现为很多网友在没有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措，而另一边一些高手则常常借助定位的强大功能做出些很酷的效果来，<span id=”absolute”>比如CSS相册等等</span>，因此自己杂乱的网页与高手完美的设计形成鲜明对比，</span>这在一定程度上打击了初学定位的网友，也在他们心目中形成这样的一种思想：当我熟练地玩转CSS定位时，我就已是高手了。
</p>
然后，我们把外层的span元素定义为包含块，而把内层的span元素定义为绝对定位，并进行偏移定位，具体的CSS控制代码如下：
/*[内联元素包含块，参考示例内联元素包含块1.html]*/
p {/*定义文本段属性*/
width:400px;
height:200px;
border:dashed 1px green;
}
#relative {/*定义包含块，并用蓝色线框标示*/
position:relative;
border:solid 1px blue;
}
#absolute {/*定义绝对定位子元素，并向右下角偏移200px*/
position:absolute;
left:200px;
top:200px;
border:solid 2px red;
}
则显示效果如图6.45所示，其中a所指示的位置为子元素定位前的位置，b所指示的顶角为子元素偏移的参考点，c所指示的顶角为偏移后的定位点。我们可以看到，在包含块多行显示时，内部定位元素将根据b点（第1行第1个字的左上角）进行偏移定位，而不是根据文本段左上角作为参考点进行定位。
如果我们定义right和bottom属性进行偏移，其中CSS代码如下，则显示如图6.46所示。内部定位元素将根据b点（第1行最后1个字的右下角）进行偏移定位，而不是根据文本段右下角作为参考点进行定位。
#absolute {/*定义绝对定位子元素，并向左上角偏移100px*/
position:absolute;
right:100px;
bottom:100px;
border:solid 2px red;
}
图6.45
图6.46
图6.47
但如果用IE 6浏览器进行预览，则会出现奇怪的解析效果，如右图所示。我们看到IE 6不再把包含块作为参照物，而是以p元素的右下顶角为参考点进行偏移。如此怪异的现象产生的根本原因不得而知，这也说明了内联元素作为包含块时可能存在的风险，希望能够引起设计师的注意。
6.4.3
绝对定位元素的边距
当一个元素被定义为绝对定位元素后，它依然遵循盒模型基本规则，可以有自己的背景、边界、边框和补白，因此在计算边距时要适当考虑这些盒模型因素。例如，请输入下面的CSS代码：
/*[绝对定位元素的边距，参考示例6-31.html]*/
body {/*<清除浏览器窗口边距默认值>*/
margin:0;
padding:0;
}
div {/*<定义所有div元素都为绝对定位，边界和补白都为20像素*/
margin:20px;
padding:20px;
position:absolute;
}
#contain {/*<定义最外围包含块大小和边框>*/
width:200px;
height:200px;
border:solid 20px red;
}
#sub1 {/*<定义中间包含块大小和边框>*/
width:50px;
height:50px;
border:solid 20px blue;
}
图6.48
然后，输入XHTML结构代码：
<div id=”contain”>
<div id=”sub1″></div>
</div>
绝对定位都是以包含块的内边框到绝对定位元素的外边界之间的最短垂直距离来计算top、right、bottom和left四个方向上的边距值。如果没有指定这四个值，则上述属性会使用默认值auto，这将导致绝对定位元素遵循正常的文档流动布局规则，在前一个元素之后被呈递。受流动布局模型的影响，如本例左图所示，该绝对定位元素如同一个流动块状元素分布在左上角，并会随文档流左右、上下移动。
图6.49
因此，要激活元素的绝对定位，必须指定left、right、top、bottom属性中的至少1个值，并且设置position属性值为absolute。当仅指定1个值时，绝对定位元素会在指定值方向遵循绝对定位规则，而在另一个方向上依然遵循文档流动规则，此时会出现很有意思的杂交布局现象。
<div id=”contain”><!–参考示例6-32.html –>
<p>文本流文本流文本流文本流文本流文本流</p>
<div id=”sub1″></div>
</div>
虽然不同浏览器都支持这样的观点，但IE与非IE浏览器在流动边距解析上还存在细微差别，需要读者注意。
一般只需指定这四个属性之中相邻两个属性值即可实现精确定位。如果定义了4个属性值，则以left和top属性值为准；如果定义了3个属性值，会优先考虑left或top属性值，以及相邻属性值；如果定义了2个相反方向的属性值，如top和bottom，则优先采用left和top属性值，right和bottom的值将被忽略。
由于绝对定位的元素不再受文档流影响，因此设置绝对定位元素的边界就没有任何意义，一般我们可以省略边界值设置。
图6.50
在IE 6中浏览。内部元素的定位值：
#sub1 {/*[参考示例6-33.html]*/
margin:0px;
left:0px;
top:0px;
}
图6.51
内部元素的定位值：
#sub1 {
margin:0px;
left:25%;
right:0px;
}
左右值冲突，则以left值为准，相邻top属性优先，默认为包含块补白与绝对定位元素的顶部边界之和。
6.4.4
相对定位
绝对定位能够精确控制元素的显示位置，但完全使用绝对定位会使网页布局缺乏灵活性，因此CSS又提供了relative相对定位属性，它吸取了流动布局的灵活性和层布局的精确性，使网页布局能够兼具多种模型优势，满足设计师对网页设计的复杂要求。
与绝对定位不同的是，相对定位元素的偏移量是根据它在正常文档流里的原始位置计算的，而绝对定位元素的偏移量是根据包含块的位置计算的。一个绝对定位元素的位置取决于它的偏移量:top、right、bottom和left属性值，相对定位元素的偏移量与绝对定位一样。
例如，在示例6-30.html中，我们去除span元素对象的相对定位和strong元素对象的绝对定位，直接定义strong元素对象为相对定位，则显示效果如图6.41所示。
图6.52
p strong {/*[相对定位，参考示例6-34.html]*/
position:relative;
left:40px;
top:-30px;
font-size:18px;
}
从左图可以看到，相对定位后，元素对象的原位置保留不变。相对定位偏离的边距遵循绝对定位中的偏离规则，不过相对定位的包含块是元素对象的原位置。
相对定位元素遵循的是流动布局模型，存在于正常的文档流中，但是它的位置可以根据原位置进行偏移。由于相对定位元素占有自己的空间，即原始位置保留不变，因此它不会挤占其他元素的位置，但可以覆盖在其他元素之上进行显示。浏览器在处理相对定位元素覆盖其他元素时是存在分歧的。不幸的是，W3C标准并没有指明应该怎么处理这个问题。
与相对定位元素不同，绝对定位元素完全被拖离正常文档流中原来的空间，且原来空间将被不再被保留，被相邻元素挤占。把绝对定位元素设置在可视区域之外会导致浏览器窗口的滚动条出现。而设置相对定位元素在可视区域之外，滚动条是不会出现的。
关于相对定位元素是否可以建立一个新的包含块以定位其包含的子元素（包括相对定位或绝对定位）曾出现过争论。最初的W3C标准声明相对定位元素总是建立一个包含块。然而，后续标准修正了这个声明，指出相对定位元素和普通元素一样，它们遵守非定位元素规则。不过，我在用相对定位的内联元素、块状元素分别验证其内部的子元素的定位时，发现不管是块状元素还是内联元素，当定义为相对定位之后，内部子元素都会把它们看作一个包含块，定位偏移值都以包含块作为参考。这个结论在不同浏览器中都得到了验证，看来标准也是在争执中不断修正的。
6.4.5
混合定位
CSS定位是CSS学习的一个难点，但也是标准布局的一个重点，很多初学者对此都是一知半解，没有建立一个完整、清晰的认识。接着上面的话题，我们来探讨混合定位问题，即把相对定位和绝对定位结合起来，形成混合定位，这在网页布局中比较常用，也很实用。
混合定位是利用相对定位的流动模型优势和绝对定位的层布局优势，实现网页定位的灵活性和精确性优势互补。例如，如果给父元素定义为position:relative，给子元素定义为position:absolute，那么子元素的位置将随着父元素，而不是整个页面进行变化。例如，我们看下面这个示例，请输入下面的CSS代码：
/*[混合定位布局，参考示例6-35.html]*/
body {/*<定义窗体属性>*/
margin:0; /*清除IE默认边距*/
padding:0; /*清除非IE默认边距*/
text-align:center; /*设置在IE浏览器中居中对齐*/
}
#contain {/*<定义父元素为相对定位，实现包含块>*/
width:100%;/*定义宽度*/
height:310px; /*必须定义父元素的高度，该高度应大于绝对布局的最大高度，否则父元素背景色就无法显示，且后面的布局区域也会无法正确显示*/
position:relative; /*定义为相对定位*/
background: #E0EEEE;
margin:0 auto; /*非IE浏览器中居中显示*/
}
#header,#footer {/*<定义头部和脚部区域属性，以默认的流动模型布局>*/
width:100%;
height:50px;
background:#C0FE3E;
margin:0 auto; /*非IE浏览器中居中显示*/
}
#sub_contain1 { /*<定义左侧子元素为绝对定位>*/
width:30%; /*根据包含块定义左侧栏目的宽度*/
position:absolute; /*定义子栏目为绝对定位*/
top:0; /*在包含块顶边对齐*/
left:0; /*在包含块左边对齐*/
height:300px; /*定义高度*/
background:#E066FE;
}
#sub_contain2 { /*<定义右侧子元素为绝对定位>*/
width:70%; /*根据包含块定义右侧栏目的宽度*/
position:absolute; /*定义子栏目为绝对定位*/
top:0; /*在包含块顶边对齐*/
right:0; /*在包含块右边对齐*/
height:200px; /*定义高度*/
background:#CDCD00;
}
然后，输入XHTML结构代码：
<div id=”header”>头部区域</div>
<div id=”contain”>
<div id=”sub_contain1″>左栏</div>
<div id=”sub_contain2″>右栏</div>
</div>
<div id=”footer”>脚部区域</div>
显示效果：
图6.53
左侧是用绝对定位和相对定位混合实现的两列布局。
注意，在示例中你会发现父元素的高度不会随子元素的高度而变化，因此要实现合理布局，必须给父元素定义一个足够高的高度才能显示父元素的背景和边框等属性，后面的布局元素也才能跟随绝对定位元素之后正常显示。
因为绝对定位遵循层布局模型，而普通元素遵循流动布局模型，两个模型是互不干扰的两个布局层面。但这也给布局中高度自适应带来严重挑战，如何实现高度自适应？我们将在6.6节中专题研究。
另外，浏览器在处理相对定位元素是有差异的，把一个绝对定位元素插入一个相对定位元素里面，同样有可能产生一些不可预料的结果，这些兼容性问题需要设计师认真总结和思考。
评论（0）
2007-09-13
HTML 表格
归类于： html — admin @ 12:00 下午
With HTML you can create tables.
通过HTML你可以建立表格。
--------------------------------------------------------------------------------
Examples
例子
Tables
表格
This example demonstrates how to create tables in an HTML document.
这个例子演示了怎么在一个HTML文档中建立表格。
Table borders
表格边框
This example demonstrates different table borders.
演示不同的表格边框。
(You can find more examples at the bottom of this page)
下面会有更多的例子。
--------------------------------------------------------------------------------
Tables
表格
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for “table data,” which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
<table>标签用来定义表格。一个表格被划分为若干行(使用<tr>标签) 然后每个行可以被分成若干数据格（使用<td>标签）。td的意思就是”Table data”里面可以带数据，数据类型可以是文字、图象、列表、段落、表单、水平分割线、表格、等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How it looks in a browser:
在浏览器中的效果就是:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
--------------------------------------------------------------------------------
Tables and the Border Attribute
表格和其边框属性
If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.
如果你不加以说明那表格的边框属性为不显示。有时候这是蛮有用的，但大多数时候你还是需要显示边框的。
To display a table with borders, you will have to use the border attribute:
如果你想要显示表格边框的话，就必须使用边框属性：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
--------------------------------------------------------------------------------
Headings in a Table
表格中的标题
Headings in a table are defined with the <th> tag.
一个表格中的标题是由<th> 标签定义的。
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How it looks in a browser:
显示的效果为：
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
--------------------------------------------------------------------------------
Empty Cells in a Table
表格的空单元格
Table cells with no content are not displayed very well in most browsers.
大多数浏览器可以显示单元格不包含任何东西。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>
How it looks in a browser:
显示效果:
row 1, cell 1 row 1, cell 2
row 2, cell 1
Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).
注意包围空单元格的边框消失了（Mozilla Firefox浏览器则会显示）
To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible:
为了避免这个的话就得添加一个空格符号来让这个边框显示出来：
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td> </td>
</tr>
</table>
How it looks in a browser:
显示的效果：
row 1, cell 1 row 1, cell 2
row 2, cell 1
--------------------------------------------------------------------------------
Basic Notes - Useful Tips
实用提示
The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML. If you have Internet Explorer 5.0 or newer, you can view a working example in our XML tutorial.
<thead>,<tbody> and <tfoot>这些元素很少用到，因为它们不能很好的被浏览器支持，除非将来的XHTML版本改变这一现状。如果你的浏览器是IE5。0以上的你可以看看在我们的XML教程里一个效果的例子 。
--------------------------------------------------------------------------------
More Examples
更多例子
Table with no border
没边框的表格
This example demonstrates a table with no borders.
这个案例展示了无边框的表格。
Headings in a table
表格中的标题
This example demonstrates how to display table headers.
这个案例展示了如何显示表格的标题。
Empty cells
空单元格
This example demonstrates how to use “ ” to handle cells that have no content.
这个案例展示了如何使用“ ”来处理无内容的单元格。
Table with a caption
表格起头
This example demonstrates a table with a caption.
这个案例展示了包含标题的表格。
Table cells that span more than one row/column
表格中单元格的多行或多列
This example demonstrates how to define table cells that span more than one row or one column.
这个案例展示了如和对跨行、跨列的单元格进行定义。
Tags inside a table
表格中使用标签
This example demonstrates how to display elements inside other elements.
这个案例展示了如何显示元素内的元素。
Cell padding
表格的内补丁
This example demonstrates how to use cellpadding to create more white space between the cell content and its borders.
这个案例展示了如何使用cellpadding在内容和表格之间设定更多留白。
Cell spacing
单元格之间的空隙
This example demonstrates how to use cellspacing to increase the distance between the cells.
这个案例展示了如何使用cellspacing增加单元格之间的距离。
Add a background color or a background image to a table
给整个表格添加背景颜色或者是图象
This example demonstrates how to add a background to a table.
这个案例展示了如何给表哥添加一个background[背景]属性。
Add a background color or a background image to a table cell
给单元格添加背景颜色或者是图象
This example demonstrates how to add a background to one or more table cells.
这个案例展示了如何给多个单元格添加background[背景]属性。
Align the content in a table cell
单元格的文字对齐
This example demonstrates how to use the “align” attribute to align the content of cells, to create a “nice-looking” table.
这个案例展示了如何使用“align[排列]”属性对单元格的内容进行排列。
The frame attribute
框架属性
This example demonstrates how to use the “frame” attribute to control the borders around the table.
这个案例展示了如何使用“frame”属性控制边框。
--------------------------------------------------------------------------------
Table Tags
表格标签一览
Tag
标签 Description
描述
<table> Defines a table
定义一表格
<th> Defines a table header
定义表格头
<tr> Defines a table row
行
<td> Defines a table cell
表格单元
<caption> Defines a table caption
表格说明
<colgroup> Defines groups of table columns
表格队列
<col> Defines the attribute values for one or more columns in a table
为一表格中的一个或多个列定义属性值
<thead> Defines a table head
表格头部
<tbody> Defines a table body
表格主体
<tfoot> Defines a table footer
表格底部
评论（0）
HTML 框架
归类于： html — admin @ 12:00 下午
With frames, you can display more than one Web page in the same browser window.
使用多个框架你可以在同一窗口下显示多个WEB页面。
--------------------------------------------------------------------------------
Examples
实例
Vertical frameset
垂直的框架
This example demonstrates how to make a vertical frameset with three different documents.
演示如何去建立一个垂直框架并包含三个不同的文档。
Horizontal frameset
水平框架
This example demonstrates how to make a horizontal frameset with three different documents.
演示如何建立包含三个不同文档的框架。
(You can find more examples at the bottom of this page)
你可以在下面找到更多的实例
--------------------------------------------------------------------------------
Frames
框架
With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.
使用多框架你可以在同一窗口下显示多个WEB页面。每个HTML文档叫做一个框架，每个框架都是相对独立的。
The disadvantages of using frames are:
使用框架的缺点：
The web developer must keep track of more HTML documents
WEB开发者必须明确更多HTML文档。
It is difficult to print the entire page
要打印整个页面就十分的麻烦。
--------------------------------------------------------------------------------
The Frameset Tag
Frameset标签
The <frameset> tag defines how to divide the window into frames
<frameset>标签用来定义怎么去划分框架
Each frameset defines a set of rows or columns
每个frameset定义行集或是列集。
The values of the rows/columns indicate the amount of screen area each row/column will occupy
里面的值用来确定排/列在显示区域里的范围。
--------------------------------------------------------------------------------
The Frame Tag
Frame标签
The <frame> tag defines what HTML document to put into each frame
<frame>标签定义了在每个框架里显示什么HTML文档。
In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document “frame_a.htm” is put into the first column, and the HTML document “frame_b.htm” is put into the second column:
在下面这个例子中我们有一个双列的框架集。第一个列被设置为在本页窗口占据25%宽度。第二个为75%的宽度。”frame_a.htm”显示在第一个列，”frame_b.htm”在第二个。
<frameset cols="25%,75%">
<frame src="frame_a.htm" mce_src="frame_a.htm">
<frame src="frame_b.htm" mce_src="frame_b.htm">
</frameset>
--------------------------------------------------------------------------------
Basic Notes - Useful Tips提示
If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize=”noresize” to the <frame> tag.
如果框架的边框能够显示，那浏览者就能够拖拉边框改变框架的范围大小，如果你不希望用户自定义框架大小，那么可以在<frame>标签里添加noresize=”noresize”。
Add the <noframes> tag for browsers that do not support frames.
为了那些不支持的浏览器就得添加<noframes>标签。
Important: You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags! See how it is done in the first example below.
重点提示：你不能同时使用<frameset></frameset>和<body></body>标签；如果你需要在<noframe>标签中添加一个说明内容（仅当浏览器不支持框架时，会显示该内容），那你必须将这段文本写在<body></body>标签内。见下面的案例1：
--------------------------------------------------------------------------------
More Examples
更多实例
How to use the <noframes> tag
怎样去使用<noframes>标签
This example demonstrates how to use the <noframes> tag.
这个例子演示怎么样去使用<noframes>标签的。
Mixed frameset
混合的框架
This example demonstrates how to make a frameset with three documents, and how to mix them in rows and columns.
演示怎样做个框架能够让三个文档混合在几个行和列中。
Frameset with noresize=”noresize”
使用了noresize=”noresize”的框架
This example demonstrates the noresize attribute. The frames are not resizable. Move the mouse over the borders between the frames and notice that you can not move the borders.
演示了noresize属性。框架就不能改变大小了。点住边框并移动鼠标你会发现你不能改变框架大小。
Navigation frame
导航框架
This example demonstrates how to make a navigation frame. The navigation frame contains a list of links with the second frame as the target. The file called “tryhtml_contents.htm” contains three links. The source code of the links:
这个例子演示了怎么去做一个导航框架。导航框架包含了连接列表并指向第二个框架。叫做”tryhtml_contents.htm”的文件包含了三个连接。连接源代码如下：
<a href=”frame_a.htm” mce_href=”frame_a.htm” target =”showframe”>Frame a</a><br>
<a href=”frame_b.htm” mce_href=”frame_b.htm” target =”showframe”>Frame b</a><br>
<a href=”frame_c.htm” mce_href=”frame_c.htm” target =”showframe”>Frame c</a>
The second frame will show the linked document.
第二个框架就会显示所连接的内容。
Inline frame
轴向框架
This example demonstrates how to create an inline frame (a frame inside an HTML page).
演示怎样去建立一个IFRAME（框架被包含在一个HTML页面中）
Jump to a specified section within a frame
在一个框架中跳转到一个位置
This example demonstrates two frames. One of the frames has a source to a specified section in a file. The specified section is made with <a name=”C10″> in the “link.htm” file.
这个例子演示了两个框架，其中的一个其内容来源是一个文件的特殊位置，是通过在 “link.htm”文件中使用<a name=”C10″>实现的。.
Jump to a specified section with frame navigation
用导航框架跳转到一个位置
This example demonstrates two frames. The navigation frame (content.htm) to the left contains a list of links with the second frame (link.htm) as a target. The second frame shows the linked document. One of the links in the navigation frame is linked to a specified section in the target file. The HTML code in the file “content.htm” looks like this: <a href=”link.htm” mce_href=”link.htm” target =”showframe”>Link without Anchor</a><br><a href=”link.htm#C10″ mce_href=”link.htm#C10″ target =”showframe”>Link with Anchor</a>.
这个案例演示了两个框架。navigation框架（content.htm）位于左边，它包含了一组连接列表（link.htm），以第二个框架为连接目标。第二个框架展示了连接的文档内容。导航框架中的连接是用于连接到目标文件的指定部分的。在“content.htm”文件中的HTML代码就如同：<a href=”link.htm” mce_href=”link.htm” target =”showframe”><br>a href=”link.htm#C10″ mce_href=”link.htm#C10″ target =”showframe”>（注意：这两个连接都不含</a>锚）（简单演示了一个左册目录导航）
--------------------------------------------------------------------------------
Frame Tags
框架标签介绍
Tag
标签 Description
描述
<frameset> Defines a set of frames
定义了一框架集
<frame> Defines a sub window (a frame)
子窗口（框架）
<noframes> Defines a noframe section for browsers that do not handle frames
无框架处理
<iframe> Defines an inline sub window (frame)
定义子窗口（框架）
评论（0）
下一页 »
关于用javascript改变class所用的setAttribute()方法
归类于： Javascript — admin @ 1:28 下午
需要注意的是：
1.element要用getElementById or ByTagName来得到，
2.setAttribute(”class”, vName)中class是指改变”class”这个属性，所以要带引号。
3.IE中要把class改成className,…..IE不认class,所以最好写两句，都用上吧。
W3C DOM - {setAttribute()}
setAttribute(string name, string value)：增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
1、关于class和className
class属性在W3C DOM中扮演着很重要的角色，但由于浏览器差异性仍然存在。使用setAttribute(”class”, vName)语句动态设置
Element的class属性在firefox中是行的通的，在IE中却不行。因为使用IE内核的浏览器不认识”class”，要改用”className”；
同样，firefox 也不认识”className”。所以常用的方法是二者兼备：
element.setAttribute(”class”, vName);
element.setAttribute(”className”, vName); //for IE
2、setAttribute()的差异
我们经常需要在JavaScript中给Element动态添加各种属性，这可以通过使用setAttribute()来实现，这就涉及到了浏览器的兼容性问题。
var bar = document.getElementById(”foo”);
bar.setAttribute(”onclick”, “javascript:alert(’This is a test!’);”);
这里利用setAttribute指定e的onclick属性，简单，很好理解。但是IE不支持，IE并不是不支持setAttribute这个函数，
而是不支持用setAttribute设置某些属性，例如对象属性、集合属性、事件属性，也就是说用setAttribute设置style和onclick这些属性
在IE中是行不通的。为达到兼容各种浏览器的效果，可以用点符号法来设置Element的对象属性、集合属性和事件属性。
document.getElementById(”foo”).className = “fruit”;
document.getElementById(”foo”).style.cssText = “color: #00f;”;
document.getElementById(”foo”).style.color = “#00f”;
document.getElementById(”foo”).onclick= function () { alert(”This is a test!”); }
评论（0）
2007-12-04
div中图片垂直居中
归类于： Css — admin @ 2:11 下午
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title>
<style type=”text/css”>
<!–
* {margin:0;padding:0}
div {
width:300px;
height:300px;
line-height:300px;
border:1px solid #666;
overflow:hidden;
position:relative;
text-align:center;
}
div p {
+position:absolute; /* only for ie */
top:50%;
}
img {
border:1px solid #666;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle;
}
–>
</style>
</head>
<body>
<div><p><img src=”http://www.baidu.com/img/logo.gif” /></p></div>
</body>
</html>
评论（0）
2007-11-23
用css实现文字的自动隐藏
归类于： Css — admin @ 12:01 下午
overflow : visible | auto | hidden | scroll
参数：
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
说明：
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
设置textarea对象为hidden值将隐藏其滚动条。
对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为 hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视 direction属性设置而定）的单元格。
自IE5开始，此属性在MAC平台上可用。
对应的脚本特性为overflow。
示例：
body { overflow: hidden; }
div { overflow: scroll; height: 100px; width: 100px; }
text-overflow版本：IE6+专有属性 继承性：无
语法：
text-overflow : clip | ellipsis
参数：
clip : 不显示省略标记（…），而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记（…）
说明：
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出。
对应的脚本特性为textOverflow。请参阅我编写的其他书目。
示例：
div { text-overflow : clip; }
代码：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>无标题文档</title>
</head>
<body>
<table width=”100%” border=”1″ cellspacing=”2″ cellpadding=”2″ style=”table-layout:fixed”>
<tr>
<td width=”10%”>s</td>
<td><div STYLE=”width:60%; overflow:hidden;text-overflow:ellipsis”> <nobr> asdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdata goes here </nobr></div></td>
<td width=”30%”> </td>
</tr>
<tr>
<td>d</td>
<td><div STYLE=”width:60%; overflow:hidden;text-overflow:ellipsis”> <nobr> asdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdata goes here </nobr></div></td>
<td> </td>
</tr>
</table>
</body>
</html>
评论（0）
css换行
归类于： Css — admin @ 11:55 上午
强制不换行
div{
white-space:nowrap;
}
自动换行
div{
word-wrap: break-word;
word-break: normal;
}
强制英文单词断行
div{
word-break:break-all;
}
firefox不支持此属性。
评论（0）
2007-10-24
动态创建html内容
归类于： Css — admin @ 3:07 下午
document.write 方法() ————————-最大的缺点就是违背了“分离Javascript”原则
例子：document.write(”<p>this is inserted.</p>”)
innerHTML 属性
例子1:
<script language=”javascirpt”>
window.load=function() {
var testdiv=document.getElementById(”testdiv”);
alert(testdiv.innerHTML);
}
</script>
<div id=”testdiv”>
<p>This is <em>my</em> content</p>
</div>
例子2:
<script language=”javascirpt”>
window.load=function() {
var testdiv=document.getElementById(”testdiv”);
testdiv.innerHTML=”<p>I inserted <em>this</em> content</p>”
}
</script>
<div id=”testdiv”>
</div>
评论（0）
2007-09-27
高度自适应
归类于： Css — admin @ 2:18 下午
6.6
高度自适应
网页布局中经常需要定义元素的高度和宽度，但很多时候我们希望元素的大小能够根据窗口或父元素自动调整，这就是我们常挂在嘴边的元素自适应。元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
元素宽度自适应设置起来比较轻松，只需要为元素的width属性定义一个百分比即可，且目前各大浏览器对此都完全支持。不过问题是元素高度自适应很容易让人困惑，设置起来比较麻烦。我们在前面也介绍过很多高度自适应的技巧，但都不是最完美的方法，既然元素都可以定义height属性，为什么不用height属性定义百分比来实现高度自适应呢？但是如果直接设置元素高度后却发现height属性并没有起作用，这是为什么呢？
例如，看下面一个简单示例，其中XHTML结构代码如下：
<div id=”content”>
<div id=”sub”>高度自适应</div>
</div>
CSS布局代码：
/*[高度不能够自适应，参考示例6-41_1.html]*/
#content {/*<定义父元素显示属性>*/
background: #B452CD;/*背景色*/
}
#sub {/*<定义子元素显示属性>*/
width:50%;/*父元素宽度的一半*/
height:50%;/*父元素高度的一半*/
background:#C0FE3E; /*背景色*/
}
显示效果：
图6.62
在IE 6中浏览。宽度能够自适应，高度不能自适应。
图6.63
在Firefox 2中浏览。宽度能够自适应，高度不能自适应。
这是不是父元素没有显式定义高度呢？是的，如果给它设置一个固定值，其子元素的百分比高度就能够起作用了。很显然这不是我们所要的结果，我们所希望的是子元素的高度能够随窗口而变化，是不是body没有设置高度呢？当设置body的height属性为100%，在IE 6浏览器中可以看到子元素的百分比高度起作用，但在非IE浏览器中看不到效果。继续设置body的父元素html的height属性为100%，这时终于看到了子元素的百分比高度在各大浏览器中起作用了。
原来在IE浏览器中html的height属性默认为100%，body没有设置值，而在非IE浏览器中html和body都没有预定义height属性值。因此，解决高度自适应问题可以使用下面的代码：
CSS布局代码：
/*[高度自适应，参考示例6-41_2.html]*/
html,body {/*<定义html和body高度都为100%，即显式定义html和body高度>*/
height:100%;
}
#content {/*<定义父元素显示属性>*/
height:100%;/*满屏显示*/
background: #B452CD;/*背景色*/
}
#sub {/*<定义子元素显示属性>*/
width:50%;/*父元素宽度的一半*/
height:50%;/*父元素高度的一半*/
background:#C0FE3E; /*背景色*/
}
显示效果：
图6.64
在IE 6中浏览。高度能自适应。
图6.65
在Firefox 2中浏览。高度能自适应。
如果把子元素对象设置为浮动显示或者绝对定位显示，则高度依然能够实现自适应。例如，下面的CSS布局代码：
/*[高度绝对定位自适应，参考示例6-41_2.html]*/
html,body {/*<定义html和body高度都为100%，即显式定义html和body高度>*/
height:100%;
}
#content {/*<定义父元素显示属性>*/
height:100%;/*满屏显示*/
position:relative; /*相对定位*/
background: #B452CD;/*背景色*/
}
#sub {/*<定义子元素显示属性>*/
width:50%;/*父元素宽度的一半*/
height:50%;/*父元素高度的一半*/
position:absolute; /*绝对定位*/
background:#C0FE3E; /*背景色*/
}
高度自适应对于布局具有重要的作用，我们可以利用高度自适应实现很多复杂布局效果。特别是对于绝对定位，突破了原来宽、高灵活性差的难题。充分发挥绝对定位的精确定位和灵活适应的双重能力。不过这种能力还是很有限度的，实践中读者应适当把握，毕竟绝对定位属于层布局模型，它与文档流属于不同的层面。
评论（0）
层叠等级
归类于： Css — admin @ 2:18 下午
6.5
层叠等级
使用层布局的另一个好处是可以实现元素之间的重叠显示，这与图形图像中的图像合成有点类似。而在流动布局和浮动布局中是无法实现这种重叠效果的，因此利用定位重叠技术可以创建动态网页效果。在CSS中可以通过z-index属性来确定定位元素的层叠等级。需要声明的是，z-index属性只有在元素的position属性取值为relative、absolute或fixed时才可以使用。其中，fixed属性值目前还没有得到IE的支持。
下面看一个示例，了解定位中层叠显示情况。请输入下面的CSS代码：
/*[定位元素的层叠等级，参考示例6-36.html]*/
#sub_1,#sub_2 {/*定义子元素绝对定位，并设置宽和高*/
position: absolute;
width:200px;
height:200px;
}
#sub_1 {/*定义第1个子元素的属性*/
z-index:10; /*设置层叠等级为10*/
left:50px;
top:50px;
background:red;
}
#sub_2 {/*定义第2个子元素的属性*/
z-index:1; /*设置层叠等级为1*/
left:20px;
top:20px;
background:blue;
}
然后，输入XHTML结构代码：
<div id=”contain”>
<div id=”sub_1″>元素1</div>
<div id=”sub_2″>元素2</div>
</div>
显示效果：
图6.54
在z-index属性中，其值越大，层叠级别就越高。如两个绝对定位元素的该属性具有同样的number值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位元素，此属性的number值为正数的元素会在其之上，而number值为负数的元素在其之下。此属性仅仅作用于position属性值为relative、absolute或fixed的元素，但不会作用于窗口控件，如select、button元素。
但是z-index属性受到HTML代码等级的制约，只能在同一级别的HTML上体现作用。例如，我们在上面示例中调整XHTML结构代码，使元素1和元素2处于不同的包含块中：
<div id=”contain1″>
<div id=”sub_1″>元素</div>
</div>
<div id=”contain2″>
<div id=”sub_2″>元素</div>
</div>
然后，在CSS中定义包含块属性：
/*[定位元素的层叠等级，参考示例6-37.html]*/
#contain1, #contain2 {
position:relative; /*定义两个父元素都为相对定位，实现包含块显示*/
width:100px;
height:100px;
background:#ddd;
}
显示效果前后比较：
图6.55
在IE 6中浏览。元素之间的这种等级是比较严格的。从右图可以看出，由于元素1和元素2的包含块不同，因此即使元素1的z-index属性值设置了100，仍然被元素2覆盖。
图6.56
在Firefox 2中浏览。在非IE浏览器中，这两个元素被视为同一级别，z-index属性值越大就越显示在上面，不再受各自包含块的约束。
但当我们定义元素2的父元素层叠等级为101，则显示如图6.57所示。
图6.57
#contain2 {/*[定位元素2的父元素层叠级别为101，参考示例6-38.html]*/
z-index:101;
}
通过这个示例，我们可以得出这样一个有趣的结论：当父元素的层叠级别很高时，也会给内部子元素带来更多层叠级别积分，且这种积分得到了各大主流浏览器的普遍支持。
我们在上面示例基础上继续研究，你会发现很多有趣的现象，但也很让人模糊。假设要做一个列表，定义列表项为相对定位，然后在其中一个列表项中加入一个span元素，定义为绝对定位，你会发现span元素无论层叠级别多高，都无法覆盖父级列表项。
<ul>
<li><span>列表项</span></li>
<li>列表项</li>
<li><span>列表项</span></li>
<li>列表项</li>
</ul>
然后，输入CSS代码：
/*[定位元素的层叠等级，参考示例6-39.html]*/
ul{/*<清除列表预定义样式>*/
margin:0;
padding:0;
list-style:none;
}
li {/*<定义列表项属性>*/
width:100px;
height:100px;
margin-right:4px;
background:#EEE685;
float:left;
position:relative; /*相对定位*/
z-index:1; /*层叠级别为1*/
}
li span {/*<定义列表项内子元素span属性>*/
width:100px;
height:100px;
position:absolute; /*绝对定位*/
top:30px; /*顶边偏移值*/
left:60px; /*左边偏移值*/
z-index:1000; /*层叠级别为1000*/
background:#D02090;
}
显示效果：
图6.58
从图6.58可以看出，无论span元素的z-index属性值被设置为多大都被压在父级同类元素下面。这是因为CSS把它们视为不同的级别，不同级别的z-index属性值是没有可比性的。
此时，如果要让span元素显示在上面，可以定义它的父级包含块的z-index属性值大于1，如图6.59所示。
图6.59
<ul> <!–[参考示例6-40.html]–>
<li id=”sub1″><span>列表项</span></li>
<li>列表项</li>
<li><span>列表项</span></li>
<li>列表项</li>
</ul>
CSS代码：
#sub1 {/*<定义第1个列表项层叠级别大于相邻同级元素>*/
z-index:2;
}
这个问题也应引起读者的注意，当我们没有指定z-index属性值时，z-index属性值默认为auto，即自动设置。它一般会根据父元素的定位进行确定，然而IE与非IE浏览器对于此值的解析存在差异。例如，在上面示例中我们去除li元素的z-index:1;，则显示效果如下图所示。
图6.60
在IE 6中浏览。z-index属性值默认为0。
图6.61
在Firefox 2中浏览。由于继承关系，子元素覆盖了父元素对象。
评论（0）
层布局模型
归类于： Css — admin @ 2:16 下午
6.4
层布局模型
层布局模型源于图形图像编辑器中非常流行的图层编辑功能，图层能够精确操作和编辑图像而广受平面设计师的欢迎，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。
为了支持层布局模型，CSS定义了一组定位（positioning）属性，详细说明可以参考2.4节CSS属性列表。元素定位的设计思路非常简单，它允许用户精确定义网页元素的相对位置，这里的相对可以相对元素原来显示的位置，或者是相对最近的包含块元素，或者是相对浏览器窗口。
6.4.1
定位类型
在层布局模型中最核心的技术应该是元素定位类型了，只有设计师确定元素的定位类型后，才能定义其他定位属性，如包含块、坐标偏移、层叠顺序等。
在CSS中可以通过position属性定义元素的定位类型，其语法如下：
div{/* 可以定义任何元素 */
position:absolute; /*可以选择其他属性，具体参照下面说明*/
}
该属性取值可以包括static、absolute、fixed和relative，具体说明如下：
l static：表示不定位，元素遵循HTML默认的流动模型，如果未显式声明元素的定位类型，则默认为该值。
l absolute：表示绝对定位，将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即根据浏览器窗口，而其层叠顺序则通过z-index 属性来定义。
l fixed：表示固定定位，与absolute定位类型类似，但它的包含块是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment: fixed;属性功能相同。目前IE浏览器还不支持该属性值，因此在布局中使用比较少，在后面章节中我们也不再专题讨论。
l relative：表示相对定位，它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static方式生成一个元素，然后移动这个元素，移动方向和幅度由left、right、top、bottom属性确定，元素的形状和偏移前的位置保留不动。
6.4.2
绝对定位包含块
本节与下一节所要探讨的绝对定位是广义概念的绝对定位，它是指定位元素完全脱离文档流，不再受文档流动的影响。绝对定位模式应用于position属性被定义为absolute（狭义的绝对定位）或fixed的任何元素。由于relative相对定位仍然受文档流动的影响，所以还不算绝对意义上的定位。
与浮动元素一样，绝对定位元素以块状显示。同时，它会为所有子元素建立了一个包含块，所有被包含元素都以包含块作为参照物进行定位，或在其内部浮动和流动。例如，在下面的示例中，我们定义了三个不同模型的包含元素，然后观察不同模型的包含元素与它们的子元素的位置关系。请输入下面的CSS代码：
/*[绝对定位-自成包含块，参考示例6-29.html]*/
#contain1,#contain2,#contain3 {/*<定义三个一级div元素对象的共同属性>*/
width:380px;
height:120px;
border:solid 1px #666;
}
#contain2 {/*<定义第2个一级div元素对象为绝对定位，并设置其距离窗口左边和上边的距离>*/
position:absolute;
left:120px;
top:60px;
background:#F08080;
}
#contain3 {/*<定义第3个一级div元素对象为浮动布局>*/
float:left;
background:#D2B48C;
}
#contain2 div {/*<定义绝对定位对象内所有子元素对象的共同属性>*/
color:#993399;
border:solid 1px #FF0000;
}
#sub_div1 {/*<定义绝对定位包含块内第1个对象为绝对定位>*/
width:80px;
height:80px;
position:absolute;
right:10px; /*定义该绝对元素右边距离父级包含块的右边距离*/
bottom:10px; /*定义该绝对元素底边距离父级包含块的底边距离*/
background:#FEF68F;
}
#sub_div2 {/*<定义绝对定位包含块内第2个元素为浮动布局>*/
width:80px;
height:80px;
float:left;
background:#DDA0DD;
}
#sub_div3 {/*<定义绝对定位包含块内第3个元素的背景色、宽和高>*/
width:100px;
height:90px;
background:#CCFF66;
}
然后，输入XHTML结构代码：
<div id=”contain1″>元素一－流动</div>
<div id=”contain2″>元素二－绝对定位
<div id=”sub_div1″>子元素1－绝对定位</div>
<div id=”sub_div2″>子元素2－浮动</div>
<div id=”sub_div3″>子元素3－流动</div>
</div>
<div id=”contain3″>元素三－浮动</div>
显示结果如下，我们可以看到“元素二”被定义为绝对定位，它以浏览器窗口为包含块，显示位置根据元素左边到窗口左边的距离和元素上边到窗口上边的距离来确定。而“子元素1”却根据具有定位属性的“元素二”为包含块，显示位置根据“子元素1”右边到“元素二”右边的距离和元素底边到“元素二”底边的距离来确定。
在“元素二”中包含了3个子元素，它们以不同的性质显示，但它们都以“元素二”作为参照平台，包括其中的浮动元素和绝对定位元素。
图6.41
在IE 6中浏览。流动元素都环绕浮动元素分布。
图6.42
在Firefox 2中浏览。流动的块状元素与浮动元素错行分布，而流动内容则环绕浮动元素分布。
因此，根据上例演示我们可以总结：一个绝对定位元素将为它包含的任何元素建立一个包含块，被包含元素遵循普通文档流规则，在包含块中自然流动，但它们的偏移位置由包含块来确定。
绝对定位元素甚至可以包含其他的绝对定位元素，这些绝对定位的子元素同样可以从父包含块内脱离出来。这些子包含块通过定位取负值或设置较大的偏移值跑到父包含块的外面。
绝对定位元素包含块的定义与其他元素有一点不同。绝对定位元素的包含块是由距离它最近的、且被定位的上级元素，也就是在它外面最接近它的position属性值为absolute、relative或fixed的父级元素。如果不存在这样的父级元素，那么默认包含块就是浏览器窗口本身。
绝对定位元素的包含块可以是一个内联元素。例如，请输入下面的CSS代码：
/*[绝对定位-内联包含块，参考示例6-30.html]*/
p {/*<定义段落基本属性>*/
margin:40px;
white-space:pre; /*保留代码中内容显示预定义格式*/
font-size:14px;
}
p span {/*<定义span元素为相对定位>*/
position:relative;
}
p strong {/*<定义span元素中的strong元素为绝对定位>*/
position:absolute;
left:40px; /*strong元素左边到span元素左边的距离*/
top:-30px; /*strong元素顶边到span元素顶边的距离*/
font-size:18px;
}
然后，输入XHTML结构代码：
<p>
<span><strong>虞美人</strong>南唐\宋李煜</span>
春花秋月何时了，
…
</p>
显示效果前后比较：
图6.43
在IE 6中浏览。为strong元素定义绝对定位，然后根据相对定位的span元素作为包含块进行定位。
图6.44
在IE 6中浏览。由于没有为span元素定义定位属性，则strong元素就以浏览器窗口为包含块进行定位，标题显示位置跑到窗口外边。
如果把内联元素作为包含块，情况就变得复杂多了。因为内联元素有可能在几行内显示，产生好几个线性盒，这时包含块就被定义为这几行区域，而其内部被包含的绝对定位子元素将根据内联元素的第1行第1个字符左上角来确定left和top属性的偏移值，根据第一行最后一个字符的右下角来确定right和bottom属性的偏移值。例如，在下面这个文本段中，我们在其中设置两个相互嵌套的span元素：
<p>
在用CSS控制排版过程中，<span id=”relative”>定位一直被人认为是一个难点，这主要是表现为很多网友在没有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措，而另一边一些高手则常常借助定位的强大功能做出些很酷的效果来，<span id=”absolute”>比如CSS相册等等</span>，因此自己杂乱的网页与高手完美的设计形成鲜明对比，</span>这在一定程度上打击了初学定位的网友，也在他们心目中形成这样的一种思想：当我熟练地玩转CSS定位时，我就已是高手了。
</p>
然后，我们把外层的span元素定义为包含块，而把内层的span元素定义为绝对定位，并进行偏移定位，具体的CSS控制代码如下：
/*[内联元素包含块，参考示例内联元素包含块1.html]*/
p {/*定义文本段属性*/
width:400px;
height:200px;
border:dashed 1px green;
}
#relative {/*定义包含块，并用蓝色线框标示*/
position:relative;
border:solid 1px blue;
}
#absolute {/*定义绝对定位子元素，并向右下角偏移200px*/
position:absolute;
left:200px;
top:200px;
border:solid 2px red;
}
则显示效果如图6.45所示，其中a所指示的位置为子元素定位前的位置，b所指示的顶角为子元素偏移的参考点，c所指示的顶角为偏移后的定位点。我们可以看到，在包含块多行显示时，内部定位元素将根据b点（第1行第1个字的左上角）进行偏移定位，而不是根据文本段左上角作为参考点进行定位。
如果我们定义right和bottom属性进行偏移，其中CSS代码如下，则显示如图6.46所示。内部定位元素将根据b点（第1行最后1个字的右下角）进行偏移定位，而不是根据文本段右下角作为参考点进行定位。
#absolute {/*定义绝对定位子元素，并向左上角偏移100px*/
position:absolute;
right:100px;
bottom:100px;
border:solid 2px red;
}
图6.45
图6.46
图6.47
但如果用IE 6浏览器进行预览，则会出现奇怪的解析效果，如右图所示。我们看到IE 6不再把包含块作为参照物，而是以p元素的右下顶角为参考点进行偏移。如此怪异的现象产生的根本原因不得而知，这也说明了内联元素作为包含块时可能存在的风险，希望能够引起设计师的注意。
6.4.3
绝对定位元素的边距
当一个元素被定义为绝对定位元素后，它依然遵循盒模型基本规则，可以有自己的背景、边界、边框和补白，因此在计算边距时要适当考虑这些盒模型因素。例如，请输入下面的CSS代码：
/*[绝对定位元素的边距，参考示例6-31.html]*/
body {/*<清除浏览器窗口边距默认值>*/
margin:0;
padding:0;
}
div {/*<定义所有div元素都为绝对定位，边界和补白都为20像素*/
margin:20px;
padding:20px;
position:absolute;
}
#contain {/*<定义最外围包含块大小和边框>*/
width:200px;
height:200px;
border:solid 20px red;
}
#sub1 {/*<定义中间包含块大小和边框>*/
width:50px;
height:50px;
border:solid 20px blue;
}
图6.48
然后，输入XHTML结构代码：
<div id=”contain”>
<div id=”sub1″></div>
</div>
绝对定位都是以包含块的内边框到绝对定位元素的外边界之间的最短垂直距离来计算top、right、bottom和left四个方向上的边距值。如果没有指定这四个值，则上述属性会使用默认值auto，这将导致绝对定位元素遵循正常的文档流动布局规则，在前一个元素之后被呈递。受流动布局模型的影响，如本例左图所示，该绝对定位元素如同一个流动块状元素分布在左上角，并会随文档流左右、上下移动。
图6.49
因此，要激活元素的绝对定位，必须指定left、right、top、bottom属性中的至少1个值，并且设置position属性值为absolute。当仅指定1个值时，绝对定位元素会在指定值方向遵循绝对定位规则，而在另一个方向上依然遵循文档流动规则，此时会出现很有意思的杂交布局现象。
<div id=”contain”><!–参考示例6-32.html –>
<p>文本流文本流文本流文本流文本流文本流</p>
<div id=”sub1″></div>
</div>
虽然不同浏览器都支持这样的观点，但IE与非IE浏览器在流动边距解析上还存在细微差别，需要读者注意。
一般只需指定这四个属性之中相邻两个属性值即可实现精确定位。如果定义了4个属性值，则以left和top属性值为准；如果定义了3个属性值，会优先考虑left或top属性值，以及相邻属性值；如果定义了2个相反方向的属性值，如top和bottom，则优先采用left和top属性值，right和bottom的值将被忽略。
由于绝对定位的元素不再受文档流影响，因此设置绝对定位元素的边界就没有任何意义，一般我们可以省略边界值设置。
图6.50
在IE 6中浏览。内部元素的定位值：
#sub1 {/*[参考示例6-33.html]*/
margin:0px;
left:0px;
top:0px;
}
图6.51
内部元素的定位值：
#sub1 {
margin:0px;
left:25%;
right:0px;
}
左右值冲突，则以left值为准，相邻top属性优先，默认为包含块补白与绝对定位元素的顶部边界之和。
6.4.4
相对定位
绝对定位能够精确控制元素的显示位置，但完全使用绝对定位会使网页布局缺乏灵活性，因此CSS又提供了relative相对定位属性，它吸取了流动布局的灵活性和层布局的精确性，使网页布局能够兼具多种模型优势，满足设计师对网页设计的复杂要求。
与绝对定位不同的是，相对定位元素的偏移量是根据它在正常文档流里的原始位置计算的，而绝对定位元素的偏移量是根据包含块的位置计算的。一个绝对定位元素的位置取决于它的偏移量:top、right、bottom和left属性值，相对定位元素的偏移量与绝对定位一样。
例如，在示例6-30.html中，我们去除span元素对象的相对定位和strong元素对象的绝对定位，直接定义strong元素对象为相对定位，则显示效果如图6.41所示。
图6.52
p strong {/*[相对定位，参考示例6-34.html]*/
position:relative;
left:40px;
top:-30px;
font-size:18px;
}
从左图可以看到，相对定位后，元素对象的原位置保留不变。相对定位偏离的边距遵循绝对定位中的偏离规则，不过相对定位的包含块是元素对象的原位置。
相对定位元素遵循的是流动布局模型，存在于正常的文档流中，但是它的位置可以根据原位置进行偏移。由于相对定位元素占有自己的空间，即原始位置保留不变，因此它不会挤占其他元素的位置，但可以覆盖在其他元素之上进行显示。浏览器在处理相对定位元素覆盖其他元素时是存在分歧的。不幸的是，W3C标准并没有指明应该怎么处理这个问题。
与相对定位元素不同，绝对定位元素完全被拖离正常文档流中原来的空间，且原来空间将被不再被保留，被相邻元素挤占。把绝对定位元素设置在可视区域之外会导致浏览器窗口的滚动条出现。而设置相对定位元素在可视区域之外，滚动条是不会出现的。
关于相对定位元素是否可以建立一个新的包含块以定位其包含的子元素（包括相对定位或绝对定位）曾出现过争论。最初的W3C标准声明相对定位元素总是建立一个包含块。然而，后续标准修正了这个声明，指出相对定位元素和普通元素一样，它们遵守非定位元素规则。不过，我在用相对定位的内联元素、块状元素分别验证其内部的子元素的定位时，发现不管是块状元素还是内联元素，当定义为相对定位之后，内部子元素都会把它们看作一个包含块，定位偏移值都以包含块作为参考。这个结论在不同浏览器中都得到了验证，看来标准也是在争执中不断修正的。
6.4.5
混合定位
CSS定位是CSS学习的一个难点，但也是标准布局的一个重点，很多初学者对此都是一知半解，没有建立一个完整、清晰的认识。接着上面的话题，我们来探讨混合定位问题，即把相对定位和绝对定位结合起来，形成混合定位，这在网页布局中比较常用，也很实用。
混合定位是利用相对定位的流动模型优势和绝对定位的层布局优势，实现网页定位的灵活性和精确性优势互补。例如，如果给父元素定义为position:relative，给子元素定义为position:absolute，那么子元素的位置将随着父元素，而不是整个页面进行变化。例如，我们看下面这个示例，请输入下面的CSS代码：
/*[混合定位布局，参考示例6-35.html]*/
body {/*<定义窗体属性>*/
margin:0; /*清除IE默认边距*/
padding:0; /*清除非IE默认边距*/
text-align:center; /*设置在IE浏览器中居中对齐*/
}
#contain {/*<定义父元素为相对定位，实现包含块>*/
width:100%;/*定义宽度*/
height:310px; /*必须定义父元素的高度，该高度应大于绝对布局的最大高度，否则父元素背景色就无法显示，且后面的布局区域也会无法正确显示*/
position:relative; /*定义为相对定位*/
background: #E0EEEE;
margin:0 auto; /*非IE浏览器中居中显示*/
}
#header,#footer {/*<定义头部和脚部区域属性，以默认的流动模型布局>*/
width:100%;
height:50px;
background:#C0FE3E;
margin:0 auto; /*非IE浏览器中居中显示*/
}
#sub_contain1 { /*<定义左侧子元素为绝对定位>*/
width:30%; /*根据包含块定义左侧栏目的宽度*/
position:absolute; /*定义子栏目为绝对定位*/
top:0; /*在包含块顶边对齐*/
left:0; /*在包含块左边对齐*/
height:300px; /*定义高度*/
background:#E066FE;
}
#sub_contain2 { /*<定义右侧子元素为绝对定位>*/
width:70%; /*根据包含块定义右侧栏目的宽度*/
position:absolute; /*定义子栏目为绝对定位*/
top:0; /*在包含块顶边对齐*/
right:0; /*在包含块右边对齐*/
height:200px; /*定义高度*/
background:#CDCD00;
}
然后，输入XHTML结构代码：
<div id=”header”>头部区域</div>
<div id=”contain”>
<div id=”sub_contain1″>左栏</div>
<div id=”sub_contain2″>右栏</div>
</div>
<div id=”footer”>脚部区域</div>
显示效果：
图6.53
左侧是用绝对定位和相对定位混合实现的两列布局。
注意，在示例中你会发现父元素的高度不会随子元素的高度而变化，因此要实现合理布局，必须给父元素定义一个足够高的高度才能显示父元素的背景和边框等属性，后面的布局元素也才能跟随绝对定位元素之后正常显示。
因为绝对定位遵循层布局模型，而普通元素遵循流动布局模型，两个模型是互不干扰的两个布局层面。但这也给布局中高度自适应带来严重挑战，如何实现高度自适应？我们将在6.6节中专题研究。
另外，浏览器在处理相对定位元素是有差异的，把一个绝对定位元素插入一个相对定位元素里面，同样有可能产生一些不可预料的结果，这些兼容性问题需要设计师认真总结和思考。
评论（0）
2007-09-13
HTML 表格
归类于： html — admin @ 12:00 下午
With HTML you can create tables.
通过HTML你可以建立表格。
--------------------------------------------------------------------------------
Examples
例子
Tables
表格
This example demonstrates how to create tables in an HTML document.
这个例子演示了怎么在一个HTML文档中建立表格。
Table borders
表格边框
This example demonstrates different table borders.
演示不同的表格边框。
(You can find more examples at the bottom of this page)
下面会有更多的例子。
--------------------------------------------------------------------------------
Tables
表格
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for “table data,” which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
<table>标签用来定义表格。一个表格被划分为若干行(使用<tr>标签) 然后每个行可以被分成若干数据格（使用<td>标签）。td的意思就是”Table data”里面可以带数据，数据类型可以是文字、图象、列表、段落、表单、水平分割线、表格、等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How it looks in a browser:
在浏览器中的效果就是:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
--------------------------------------------------------------------------------
Tables and the Border Attribute
表格和其边框属性
If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.
如果你不加以说明那表格的边框属性为不显示。有时候这是蛮有用的，但大多数时候你还是需要显示边框的。
To display a table with borders, you will have to use the border attribute:
如果你想要显示表格边框的话，就必须使用边框属性：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
--------------------------------------------------------------------------------
Headings in a Table
表格中的标题
Headings in a table are defined with the <th> tag.
一个表格中的标题是由<th> 标签定义的。
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How it looks in a browser:
显示的效果为：
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
--------------------------------------------------------------------------------
Empty Cells in a Table
表格的空单元格
Table cells with no content are not displayed very well in most browsers.
大多数浏览器可以显示单元格不包含任何东西。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>
How it looks in a browser:
显示效果:
row 1, cell 1 row 1, cell 2
row 2, cell 1
Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).
注意包围空单元格的边框消失了（Mozilla Firefox浏览器则会显示）
To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible:
为了避免这个的话就得添加一个空格符号来让这个边框显示出来：
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td> </td>
</tr>
</table>
How it looks in a browser:
显示的效果：
row 1, cell 1 row 1, cell 2
row 2, cell 1
--------------------------------------------------------------------------------
Basic Notes - Useful Tips
实用提示
The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML. If you have Internet Explorer 5.0 or newer, you can view a working example in our XML tutorial.
<thead>,<tbody> and <tfoot>这些元素很少用到，因为它们不能很好的被浏览器支持，除非将来的XHTML版本改变这一现状。如果你的浏览器是IE5。0以上的你可以看看在我们的XML教程里一个效果的例子 。
--------------------------------------------------------------------------------
More Examples
更多例子
Table with no border
没边框的表格
This example demonstrates a table with no borders.
这个案例展示了无边框的表格。
Headings in a table
表格中的标题
This example demonstrates how to display table headers.
这个案例展示了如何显示表格的标题。
Empty cells
空单元格
This example demonstrates how to use “ ” to handle cells that have no content.
这个案例展示了如何使用“ ”来处理无内容的单元格。
Table with a caption
表格起头
This example demonstrates a table with a caption.
这个案例展示了包含标题的表格。
Table cells that span more than one row/column
表格中单元格的多行或多列
This example demonstrates how to define table cells that span more than one row or one column.
这个案例展示了如和对跨行、跨列的单元格进行定义。
Tags inside a table
表格中使用标签
This example demonstrates how to display elements inside other elements.
这个案例展示了如何显示元素内的元素。
Cell padding
表格的内补丁
This example demonstrates how to use cellpadding to create more white space between the cell content and its borders.
这个案例展示了如何使用cellpadding在内容和表格之间设定更多留白。
Cell spacing
单元格之间的空隙
This example demonstrates how to use cellspacing to increase the distance between the cells.
这个案例展示了如何使用cellspacing增加单元格之间的距离。
Add a background color or a background image to a table
给整个表格添加背景颜色或者是图象
This example demonstrates how to add a background to a table.
这个案例展示了如何给表哥添加一个background[背景]属性。
Add a background color or a background image to a table cell
给单元格添加背景颜色或者是图象
This example demonstrates how to add a background to one or more table cells.
这个案例展示了如何给多个单元格添加background[背景]属性。
Align the content in a table cell
单元格的文字对齐
This example demonstrates how to use the “align” attribute to align the content of cells, to create a “nice-looking” table.
这个案例展示了如何使用“align[排列]”属性对单元格的内容进行排列。
The frame attribute
框架属性
This example demonstrates how to use the “frame” attribute to control the borders around the table.
这个案例展示了如何使用“frame”属性控制边框。
--------------------------------------------------------------------------------
Table Tags
表格标签一览
Tag
标签 Description
描述
<table> Defines a table
定义一表格
<th> Defines a table header
定义表格头
<tr> Defines a table row
行
<td> Defines a table cell
表格单元
<caption> Defines a table caption
表格说明
<colgroup> Defines groups of table columns
表格队列
<col> Defines the attribute values for one or more columns in a table
为一表格中的一个或多个列定义属性值
<thead> Defines a table head
表格头部
<tbody> Defines a table body
表格主体
<tfoot> Defines a table footer
表格底部
评论（0）
HTML 框架
归类于： html — admin @ 12:00 下午
With frames, you can display more than one Web page in the same browser window.
使用多个框架你可以在同一窗口下显示多个WEB页面。
--------------------------------------------------------------------------------
Examples
实例
Vertical frameset
垂直的框架
This example demonstrates how to make a vertical frameset with three different documents.
演示如何去建立一个垂直框架并包含三个不同的文档。
Horizontal frameset
水平框架
This example demonstrates how to make a horizontal frameset with three different documents.
演示如何建立包含三个不同文档的框架。
(You can find more examples at the bottom of this page)
你可以在下面找到更多的实例
--------------------------------------------------------------------------------
Frames
框架
With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.
使用多框架你可以在同一窗口下显示多个WEB页面。每个HTML文档叫做一个框架，每个框架都是相对独立的。
The disadvantages of using frames are:
使用框架的缺点：
The web developer must keep track of more HTML documents
WEB开发者必须明确更多HTML文档。
It is difficult to print the entire page
要打印整个页面就十分的麻烦。
--------------------------------------------------------------------------------
The Frameset Tag
Frameset标签
The <frameset> tag defines how to divide the window into frames
<frameset>标签用来定义怎么去划分框架
Each frameset defines a set of rows or columns
每个frameset定义行集或是列集。
The values of the rows/columns indicate the amount of screen area each row/column will occupy
里面的值用来确定排/列在显示区域里的范围。
--------------------------------------------------------------------------------
The Frame Tag
Frame标签
The <frame> tag defines what HTML document to put into each frame
<frame>标签定义了在每个框架里显示什么HTML文档。
In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document “frame_a.htm” is put into the first column, and the HTML document “frame_b.htm” is put into the second column:
在下面这个例子中我们有一个双列的框架集。第一个列被设置为在本页窗口占据25%宽度。第二个为75%的宽度。”frame_a.htm”显示在第一个列，”frame_b.htm”在第二个。
<frameset cols="25%,75%">
<frame src="frame_a.htm" mce_src="frame_a.htm">
<frame src="frame_b.htm" mce_src="frame_b.htm">
</frameset>
--------------------------------------------------------------------------------
Basic Notes - Useful Tips提示
If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize=”noresize” to the <frame> tag.
如果框架的边框能够显示，那浏览者就能够拖拉边框改变框架的范围大小，如果你不希望用户自定义框架大小，那么可以在<frame>标签里添加noresize=”noresize”。
Add the <noframes> tag for browsers that do not support frames.
为了那些不支持的浏览器就得添加<noframes>标签。
Important: You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags! See how it is done in the first example below.
重点提示：你不能同时使用<frameset></frameset>和<body></body>标签；如果你需要在<noframe>标签中添加一个说明内容（仅当浏览器不支持框架时，会显示该内容），那你必须将这段文本写在<body></body>标签内。见下面的案例1：
--------------------------------------------------------------------------------
More Examples
更多实例
How to use the <noframes> tag
怎样去使用<noframes>标签
This example demonstrates how to use the <noframes> tag.
这个例子演示怎么样去使用<noframes>标签的。
Mixed frameset
混合的框架
This example demonstrates how to make a frameset with three documents, and how to mix them in rows and columns.
演示怎样做个框架能够让三个文档混合在几个行和列中。
Frameset with noresize=”noresize”
使用了noresize=”noresize”的框架
This example demonstrates the noresize attribute. The frames are not resizable. Move the mouse over the borders between the frames and notice that you can not move the borders.
演示了noresize属性。框架就不能改变大小了。点住边框并移动鼠标你会发现你不能改变框架大小。
Navigation frame
导航框架
This example demonstrates how to make a navigation frame. The navigation frame contains a list of links with the second frame as the target. The file called “tryhtml_contents.htm” contains three links. The source code of the links:
这个例子演示了怎么去做一个导航框架。导航框架包含了连接列表并指向第二个框架。叫做”tryhtml_contents.htm”的文件包含了三个连接。连接源代码如下：
<a href=”frame_a.htm” mce_href=”frame_a.htm” target =”showframe”>Frame a</a><br>
<a href=”frame_b.htm” mce_href=”frame_b.htm” target =”showframe”>Frame b</a><br>
<a href=”frame_c.htm” mce_href=”frame_c.htm” target =”showframe”>Frame c</a>
The second frame will show the linked document.
第二个框架就会显示所连接的内容。
Inline frame
轴向框架
This example demonstrates how to create an inline frame (a frame inside an HTML page).
演示怎样去建立一个IFRAME（框架被包含在一个HTML页面中）
Jump to a specified section within a frame
在一个框架中跳转到一个位置
This example demonstrates two frames. One of the frames has a source to a specified section in a file. The specified section is made with <a name=”C10″> in the “link.htm” file.
这个例子演示了两个框架，其中的一个其内容来源是一个文件的特殊位置，是通过在 “link.htm”文件中使用<a name=”C10″>实现的。.
Jump to a specified section with frame navigation
用导航框架跳转到一个位置
This example demonstrates two frames. The navigation frame (content.htm) to the left contains a list of links with the second frame (link.htm) as a target. The second frame shows the linked document. One of the links in the navigation frame is linked to a specified section in the target file. The HTML code in the file “content.htm” looks like this: <a href=”link.htm” mce_href=”link.htm” target =”showframe”>Link without Anchor</a><br><a href=”link.htm#C10″ mce_href=”link.htm#C10″ target =”showframe”>Link with Anchor</a>.
这个案例演示了两个框架。navigation框架（content.htm）位于左边，它包含了一组连接列表（link.htm），以第二个框架为连接目标。第二个框架展示了连接的文档内容。导航框架中的连接是用于连接到目标文件的指定部分的。在“content.htm”文件中的HTML代码就如同：<a href=”link.htm” mce_href=”link.htm” target =”showframe”><br>a href=”link.htm#C10″ mce_href=”link.htm#C10″ target =”showframe”>（注意：这两个连接都不含</a>锚）（简单演示了一个左册目录导航）
--------------------------------------------------------------------------------
Frame Tags
框架标签介绍
Tag
标签 Description
描述
<frameset> Defines a set of frames
定义了一框架集
<frame> Defines a sub window (a frame)
子窗口（框架）
<noframes> Defines a noframe section for browsers that do not handle frames
无框架处理
<iframe> Defines an inline sub window (frame)
定义子窗口（框架）
评论（0）
下一页 »
分享到：
发表评论
相关推荐
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
好看的button样式CSS,你值得下载，
HTML+CSS旅游网站，非常好看的旅游网站设计
CSS 好看的菜单、导航 ,两面有连个JAR ，第一个是一级菜单。第二是多级菜单。第一个 如果是JSP 请修改HEIGHT 40
好看的css table列表样式
HTML加CSS社交网站，非常好看的社区网站设计
几个漂亮网站首页的源码（全），学习css和自己设计网页的一大助力。
国外人写的，8款非常好看的css表格，纯英文 国外人写的，8款非常好看的css表格，纯英文 国外人写的，8款非常好看的css表格，纯英文
20个精美的css网站模板，很好的学习DIV+CSS布局的资料
Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面
这是我在网上收集的几款好看的div+css模板，欢迎大家拿去使用
很好看的css样式列表，自己经常使用的 。喜欢的朋友可以下载
《css网站布局实录》实例源码,大家学习CSS的好帮手
div+css实现网站首页排版，这样可以制作好网站首页
好看的css table样式 常见用于报表相关
CSS完全参考手册 很好的css学习教材CSS完全参考手册 很好的css学习教材CSS完全参考手册 很好的css学习教材CSS完全参考手册 很好的css学习教材CSS完全参考手册 很好的css学习教材
金融网站CSS网页模板 绿色 商务 网页 模板 商业 公司 设计 主页 HTML DIV+CSS 模板下载
最好的CSS中文教程，最好的CSS中文教程，最好的CSS中文教程
非常好看的css布局-深蓝色 修改代码非常容易
整理十几个好看的后台css样式模版，做后台可能能用的着。