呵，我也测试一下PostXIING

转载于 2005-08-23 13:38:00 发布 · 144 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Jerryes/archive/2005/08/23/220898.html

博客主要围绕HTML和CSS展开，通过定义不同的DIV块展示页面布局。阐述了利用id控制内容块，用CSS选择器精确定义页面元素外观，还说明了可通过不同规则定义不同内容块里元素样式，强调了HTML结构与CSS表现相分离的特点。

<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>