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

在Web标准中一个很重要的概念就是强调页面的结构与表现分离。说的通俗一点就是XHTML中应该没有样式化的东西，而且Web在浏览器中除内容外都应该由CSS表现，这包括布局与其它样式。一旦一个标准的XHTML代码写完之后，那么CSS可以实现其实百变面孔。其实XHTML是一个演员，CSS是编剧，XHTML演什么角色，都由CSS来决定的。这听起来似乎有点理想主义，实现起来似乎就没有那么容易了。不过我还是想通过一个简单的例子来说问题。我们在设计页面的时候遵循的一个原则就是：重要内容首先加载，将要内容稍后加载。因此我们会发现像我的博客一样，主内容代码是写在侧边栏前面的。但是我们却可以通过CSS使侧边栏位于左侧，如果不看代码只看在页面中的表现，这和先加载侧边栏没有什么不同。这就是结构和表现分离的好处。假设我们有一个三栏的布局，其中两个是主内容区域，一个是侧边栏的次内容区域。那么按照上面的原则，我们应该把两个主内容区域的代码写在侧边栏次内容区域的前面，这样浏览器才会首先加载他们。那么我们就要构建下面的代码段： <div id="content"> <div id="primaryContent"></div> <div id="secondaryContent"></div> <div id="sideContent"></div> </div> 前面已经说过，结构和表现分离的好处就是我们可以任意地安排这三栏的位置。比如我们要把“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> 其实还能实现更复杂的布局。我举这个例子当然不是在讲布局的技巧，只是说说为什么一下强调结构与表现分例，光说不练可不好理解它的真谛。

　　推荐阅读

　　英文教程：鼠标悬停（hover）效果

前面一个CSS教程介绍了在网页中利用CSS建立立体表格效果，今天给大家来一篇很不错的鼠标悬停效果，也是用CSS实现的。　　这是一个很棒的鼠标悬停（hover）效果。从国外的网站上看到了，转载过来。没有作任何翻>>>详细阅读

本文标题：CSS Div网页布局中的结构与表现

地址：http://www.17bianji.com/kaifa2/CSS/17391.html

1/2 1