当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS Div网页布局中的结构与表现

CSS样式表
让图片 div居中实现代码
去掉点击链接时周围的虚线框outline属性
CSS 优先级 详细分析
广告始终定位到网页右下角 css
superLink 让伪链接更有可用性
CSS 模块化 实现方法
css 选择器 介绍
CSS 语法 学习css入门者看
firefox 滚动条消失引起页面抖动的问题
纯CSS定位的固定垂直居中浮动层代码，附经典解说 《详解定位与定位应用》
渲染CSS选择器
CSS 兼容问题
css textarea 高度自适应,无滚动条
CSS 网页表单实现鼠标悬停交互效果
鼠标激活显示背景色网页特效CSS代码
CSS制作用户登录和用户注册的用户体验表单
CSS代码 注释的3种方法
网页头部css代码优化实例
IE7和IE8的兼容性问题
CSS 网页布局网页制作技巧总结

No. « 19 20 21 22 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-11   浏览: 185 ::
收藏到网摘: n/a


在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>
其实还能实现更复杂的布局。我举这个例子当然不是在讲布局的技巧，只是说说为什么一下强调结构与表现分例，光说不练可不好理解它的真谛。