CSS Div网页布局中的结构与表现
前端 / 管理员 发布于 5年前 451
在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>
其实还能实现更复杂的布局。我举这个例子当然不是在讲布局的技巧，只是说说为什么一下强调结构与表现分例，光说不练可不好理解它的真谛。
上一条：
点击地图div上的按钮实现对地图数据的入库操作
下一条：
css expression 隔行换色
- 相关文章
- 使用 Alpine.js 排序插件对元素进行排序(0个评论)
- 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
- 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
- 使用mock-server实现模拟接口对接流程步骤(0个评论)
- vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
- 近期文章
- 智能合约Solidity学习CryptoZombie二课:让你的僵尸猎食(0个评论)
- 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
- 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
- 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
- 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
- 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
- gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
- 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
- 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
- Laravel从Accel获得5700万美元A轮融资(0个评论)
- 近期评论
-
122 在
学历：一种延缓就业设计，生活需求下的权衡之选中评论 工作几年后，报名考研了，到现在还没认真学习备考，迷茫中。作为一名北漂互联网打工人.. -
123 在
Clash for Windows作者删库跑路了，github已404中评论 按理说只要你在国内，所有的流量进出都在监控范围内，不管你怎么隐藏也没用，想搞你分.. -
原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了，今天刚看，已经添加。.. -
博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了，可以看看近期评论的其他文章.. -
1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开，博主百忙中能否发个APP下载链接，佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号
