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(自己查看运行效果)
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)!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"footerbr/
a href="http://www.dudo.org/" style="color:#000"http://www.dudo.org//a
/div
/div
/body
/html
其实还能实现更复杂的布局。我举这个例子当然不是在讲布局的技巧,只是说说为什么一下强调结构与表现分例,光说不练可不好理解它的真谛。