CSS+Div网页布局中的结构与表现

2024-07-11 08:21:09

字体：大中小

来源：转载

供稿：网友

在web标准中一个很重要的概念就是强调页面的结构与表现分离。说的通俗一点就是xhtml中应该没有样式化的东西，而且web在浏览器中除内容外都应该由css表现，这包括布局与其它样式。一旦一个标准的xhtml代码写完之后，那么css可以实现其实百变面孔。其实xhtml是一个演员，css是编剧，xhtml演什么角色，都由css来决定的。

这听起来似乎有点理想主义，实现起来似乎就没有那么容易了。不过我还是想通过一个简单的例子来说问题。

我们在设计页面的时候遵循的一个原则就是：重要内容首先加载，将要内容稍后加载。因此我们会发现像我的博客一样，主内容代码是写在侧边栏前面的。但是我们却可以通过css使侧边栏位于左侧，如果不看代码只看在页面中的表现，这和先加载侧边栏没有什么不同。这就是结构和表现分离的好处。

假设我们有一个三栏的布局，其中两个是主内容区域，一个是侧边栏的次内容区域。那么按照上面的原则，我们应该把两个主内容区域的代码写在侧边栏次内容区域的前面，这样浏览器才会首先加载他们。那么我们就要构建下面的代码段：

前面已经说过，结构和表现分离的好处就是我们可以任意地安排这三栏的位置。比如我们要把“sidecontent”放在页面的左侧，主内容区位于中间和左侧，同时栏与栏之间有10px的间距。我们设定页面宽度为760px，扣除两个10px的间隔，那么内容区的共有740px的宽度，我们可以设定请内容区为290px，侧边栏为160px。于是有

#primarycontent {
float:left;
   width:290px;
height:300px;
}
#secondarycontent {
float:left;
   width:290px;
height:300px;
}
#sidecontent {
float:left;
   width:160px;
height:300px;
}

注：为了演示方便没有优化代码。

float:left为使三个div元素水平对齐的常用方法。这样我们预览页面的时候，三个div便会出现在同一行内。

接下来，我们要移动它们的位置。把primarycontent移动到160+10px的位置（10px）为间距，那么可以设置为

margin-left:170px;

把sendcondary依此向右移动，和primarycontent的距离也是10px，需要

margin-left:10px;

那么这个时sidecontent已经被挤出content了，并且其左边缘正好是content的右边缘，因此我们要使用负的边距把它拉回到正常位置：

margin-left:-760px;

这样位置就正好了。

（自己查看运行效果）

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> div+css布局中的结构和表现分离 </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:middle;font-family:tahoma,arial, helvetica, sans-serif,"雅黑","宋体"; background-color:#999;}
div { background-color:#ccc; }
#wrap {
  width:760px;
  padding:10px;
  margin:0 auto;
  background-color:#fff;
}
#header {
  height:100px;
}
#content {
  height:300px;
  margin-top:10px;
  background-color:#fff;
}
#primarycontent {
  float:left;
  height:300px;
  width:290px;
  margin-left:170px;
}
#secondarycontent {
  float:left;
  height:300px;
  width:290px;
  margin-left:10px;
}
#sidecontent {
  float:left;
  height:300px;
  width:160px;
  margin-left:-760px;
}
#footer {
  height:100px;
  margin-top:10px;
}
pre { font-family:tahoma; }
</style>
</head>
<body>
<div id="wrap">
  <div id="header">header
  </div>
  <div id="content">
   <div id="primarycontent"><h3>主内容区1</h3>
   这是主内容区，为了增强用户体验，使用主要内容首先显示，它往往在放在其它内容的前面。
<pre>
#primarycontent {
  float:left;
  height:300px;
  width:290px;
  margin-left:170px;
}</pre>
   </div>
   <div id="secondarycontent"><h3>主内容区2</h3>这是主内容区，为了增强用户体验，使用主要内容首先显示，它往往在放在其它内容的前面。
<pre>
#secondarycontent {
  float:left;
  height:300px;
  width:290px;
  margin-left:10px;
}</pre>
   </div>
   <div id="sidecontent"><h4>次内容区</h4>这是将要内容区域，它往往出现在页面的后部。
<pre>
#sidecontent {
float:left;
height:300px;
width:160px;
margin-left:-760px;
}
</pre>
   </div>
  </div>
  <div id="footer">footer <br/><a href="http://www.dudo.org/" style="color:#000;text-decoration:none;">http://www.dudo.org/</a>
  </div>
</div>
</body>
</html>

（修正bug，请使用internet explorer 7、firefox等浏览器查看）

对于两样一段xhtml代码，我们只需要修改css样式就可以实现多种布局：

代码1（自己查看运行效果）

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> div+css布局中的结构和表现分离 </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:middle;font-family:tahoma,arial, helvetica, sans-serif,"雅黑","宋体"; background-color:#999;}
div { background-color:#ccc; }
#wrap {
  width:760px;
  padding:10px;
  margin:0 auto;
  background-color:#fff;
}
#header {
  height:100px;
}
#content {
  height:300px;
  margin-top:10px;
  background-color:#fff;
}
#primarycontent {
  float:left;
  height:300px;
  width:290px;
}
#secondarycontent {
  float:left;
  height:300px;
  width:290px;
  margin-left:180px;
}
#sidecontent {
  float:left;
  height:300px;
  width:160px;
  margin-left:-460px;
}
#footer {
  height:100px;
  margin-top:10px;
}
pre { font-family:tahoma; }
</style>
</head>
<body>
<div id="wrap">
  <div id="header">header
  </div>
  <div id="content">
   <div id="primarycontent"><h3>主内容区1</h3>
   这是主内容区，为了增强用户体验，使用主要内容首先显示，它往往在放在其它内容的前面。
<pre>
#primarycontent {
  float:left;
  height:300px;
  width:290px;
}</pre>
   </div>
   <div id="secondarycontent"><h3>主内容区2</h3>这是主内容区，为了增强用户体验，使用主要内容首先显示，它往往在放在其它内容的前面。
<pre>
#secondarycontent {
  float:left;
  height:300px;
  width:290px;
  margin-left:180px;
}</pre>
   </div>
   <div id="sidecontent"><h4>次内容区</h4>这是将要内容区域，它往往出现在页面的后部。
<pre>
#sidecontent {
float:left;
height:300px;
width:160px;
margin-left:-460px;
}
</pre>
   </div>
  </div>
  <div id="footer">footer <br/><a href="http://www.dudo.org/" style="color:#000;text-decoration:none;">http://www.dudo.org/</a>
  </div>
</div>
</body>
</html>

代码2（自己查看运行效果）

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> div+css布局中的结构和表现分离 </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:middle;font-family:tahoma,arial, helvetica, sans-serif,"雅黑","宋体"; background-color:#999;}
div { background-color:#ccc; }
#wrap {
  width:760px;
  padding:10px;
  margin:0 auto;
  background-color:#fff;
}
#header {
  height:100px;
}
#content {
  height:300px;
  margin-top:10px;
  background-color:#fff;
}
#primarycontent {
  float:left;
  height:300px;
  width:290px;
}
#secondarycontent {
  float:left;
  height:300px;
  width:290px;
  margin-left:10px;
}
#sidecontent {
  float:left;
  height:300px;
  width:160px;
  margin-left:10px;
}
#footer {
  height:100px;
  margin-top:10px;
}
pre { font-family:tahoma; }
</style>
</head>
<body>
<div id="wrap">
  <div id="header">header
  </div>
  <div id="content">
   <div id="primarycontent"><h3>主内容区1</h3>
   这是主内容区，为了增强用户体验，使用主要内容首先显示，它往往在放在其它内容的前面。
<pre>
#primarycontent {
  float:left;
  height:300px;
  width:290px;
}</pre>
   </div>
   <div id="secondarycontent"><h3>主内容区2</h3>这是主内容区，为了增强用户体验，使用主要内容首先显示，它往往在放在其它内容的前面。
<pre>
#secondarycontent {
  float:left;
  height:300px;
  width:290px;
  margin-left:10px;
}</pre>
   </div>
   <div id="sidecontent"><h4>次内容区</h4>这是将要内容区域，它往往出现在页面的后部。
<pre>
#sidecontent {
float:left;
height:300px;
width:160px;
margin-left:10px;
}
</pre>
   </div>
  </div>
  <div id="footer">footer<br/>
  <a href="http://www.dudo.org/" style="color:#000">http://www.dudo.org/</a>
  </div>
</div>
</body>
</html>