<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
<!--
#main {
width: 80%;
height: 200px;
background-color: #009999;
}
#left {
height: 150px;
background-color: #FF9900;
float: left;
}
#right {
width: 200px;
height: 100px;
background-color: #FF6600;
float:right;
}
#center {
width: 100%;
height: 150px;
background-color: #069;
}
#main2 {
width: 80%;
height: 200px;
background-color: #009999;
}
#left2 {
height: 150px;
background-color: #FF9900;
display:inline;
float:left;
}
#right2 {
width: 200px;
height: 100px;
background-color: #FF6600;
float:right;
display:inline;
}
#center2 {
width: 100%;
height: 50px;
background-color: #069;
display:inline;
}
#test {
height: 120px;
width: 500px;
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
background-color: #FF3300;
}
.hr {
display: block;
clear: right;
/*visibility: hidden;*/
}
-->
</style>
</head>
<body>
<div id="main2">
<div id="left2">左边的</div>
<div id="center2">中间的</div>
<div id="right2">右边的</div>
</div>
<div id="main">
<div id="right">
id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。
另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络设备中(PDA还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。
一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p加一个CSS的margin规则就可以实现缩进目的。p是结构化标签，margin是表现属性，前者属于HTML，后者属于CSS。(这就是结构于表现的相分离.)
</div>
<div id="left">左边的</div>
<div id="center">中间的</div><hr class="hr">
</div>
</body>
</html>
