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，我们可以定制按钮的颜色、大小、形状、边框、阴影、过渡效果等，使其与网站的整体风格保持一致，提升用户的交互体验。 "好看的button样式CSS"这一主题涉及到以下几个关键知识点： 1. **基本样式设置**：...
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
`index.html`是网站的主页文件，它是用HTML编写的。在这个文件中，开发者会使用HTML标签来构建网页的结构，如`<header>`、`<nav>`、`<main>`、`<section>`、`<article>`、`<aside>`和`<footer>`等，这些标签有助于...
本资源"精美css+div网站实例源码"提供了四个不同样式的网站源码，分别是lotusflower、gumamela、CleanandBlue和fotolandia，非常适合初学者和有经验的开发者学习和参考。 1. **CSS布局**: 这些源码实例展示了如何...
本文将深入探讨8款非常出色的CSS表格，这些表格设计独特，功能丰富，能为你的网站增添专业且美观的展示效果。 1. **Pure CSS Data Tables** 这款表格完全依赖CSS实现，无需JavaScript插件，轻量级且响应式。通过...
在描述中，提到了“很好的css样式列表”和“自己经常使用的”，这暗示了这个压缩包可能包含了一组经过实践检验、效果出色的CSS样式集。对于开发者来说，拥有这样一套资源可以极大地提高工作效率，因为无需从零开始...
好看的css table列表样式
6. **SEO优化**：通过Div+CSS，可以实现语义化HTML，帮助搜索引擎更好地理解网页内容，从而提高网站的搜索引擎排名。 在提供的“新建文件夹”中，可能包含了多套购物网站模板的HTML和CSS文件。这些模板可以作为初学...
在网页设计领域，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括SVG、MathML等各种XML方言）文档中元素样式的...通过学习和借鉴这些示例，你可以掌握更多关于CSS表格设计的技巧，为你的网站增添亮点。
在网页设计领域，Div+CSS是一种常见的布局技术，它能够帮助开发者创建出美观且功能强大的网站。Div（Division）是HTML中的一个容器元素，用于组织和分隔网页内容，而CSS（Cascading Style Sheets）则负责定义这些Div...
总的来说，"html5+div+css3网站样式模板"是一个实践HTML5、Div和CSS3技术的好教材。通过学习和分析这个模板，开发者不仅可以掌握网页设计的基本技巧，还能了解到最新的前端开发趋势，为构建高质量的网站打下坚实基础...
"css编译器-网站制作者的好工具"这个标题暗示了这类工具对提升网站制作者的工作效率有着显著的帮助。接下来，我们将深入探讨CSS编译器的概念、功能以及如何使用，以便更好地理解其价值。 **CSS编译器概述** CSS...
对于学习者来说，这是一个很好的实践案例，可以从中学习到如何将HTML和CSS应用于实际项目，同时理解如何组织和呈现教育类信息。对于访问者来说，网站提供了学习资源和建议，有助于改善他们的学习体验和成效。
标题中的“CSS减肥工具Firefox插件CSS Usage”指的是一个针对Firefox浏览器的扩展，该扩展专门设计用于优化和精简CSS（层叠样式表）代码。...通过学习和运用这个插件，开发者可以更好地管理和维护他们的CSS代码库。
CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器都按照同样的...
《DIV+CSS 网站布局实录》是一本深入探讨使用DIV和CSS进行网站布局技术的专业书籍。在网页设计领域，DIV+CSS已经成为构建现代、响应式和可维护网站的标准方法。本教程通过随书源码，为读者提供实践操作的机会，帮助...
《HTML5+CSS3网站设计基础教程》是一本旨在教授读者如何使用现代Web技术构建交互式、响应式网站的教材。...对于初学者而言，这是一个极好的学习资源，能够帮助他们快速上手并逐渐精通HTML5和CSS3网站设计。
在某些情况下，开发者可能需要将SVG转换为CSS，或者反过来，以便更好地管理和优化资源。同时，为了提高性能和减小文件大小，还可能需要对这些资源进行压缩。 SVG转CSS：将SVG图形转换为CSS背景图像可以简化代码，...
CSSMania是一个非常受欢迎的CSS网站目录，它不仅展示了最新的CSS设计作品，还提供了详细的案例分析和技术分享。该网站经常更新，确保用户能够获取到最新、最前沿的设计趋势。 #### 2. CSSRemix CSSRemix是一个专注...
通过这个压缩包中的例子，你可以亲手实践上述知识点，从而更好地理解和掌握CSS在商业网站布局中的应用。动手实践是学习CSS最好的方法，它能帮助你从理论知识转化为实际技能。无论是想要打造美观的个人网站，还是为...