侯体宗的博客
  • 首页
  • Hyperf2.1版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 2年前   107


在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 隔行换色
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • TP(3/5)
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • uni-app在详情页中给电话信息添加点击拨打电话的功能按钮(0个评论)
    • uni-app开发小程序搜索功能及添加搜索历史记录、添加热门搜索关键词功能demo(0个评论)
    • uni-app开发小程序使用uni.getLocation()实现页面即时获取当前定位信息demo(1个评论)
    • uni-app开发小程序实现列表页条件筛选显示功能demo(0个评论)
    • vue+elementui实现百度地图api滑上列表显示位置信息(0个评论)
    • 近期文章
    • Laravel 9.13版本发布(0个评论)
    • beego+GeoLite2免费数据库获取ip地址经纬度等定位归属信息(0个评论)
    • redis安全配置之修改端口、添加密码流程步骤及启动使用(0个评论)
    • PHP + Memcache实现简单的统计当前在线人数功能(0个评论)
    • Thinkphp5.1框架中实现Session+Redis会话共享流程步骤(0个评论)
    • go语言中使用Signbit()函数判断一个整数是正数或负数(0个评论)
    • 删库跑路之一链家程序员删除公司9TB数据被判7年,望各大码农警之!(0个评论)
    • Laravel角色和权限:拦截器Gates和策略Policies的解释(0个评论)
    • Laravel 9.12版本发布(0个评论)
    • go语言中实现把数据写入文件函数WriteFile()编写(0个评论)
    • 近期评论
    • 博主 在

      hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 @路过的靓仔:cdn静态资源被墙,已修复..
    • GGGGGGGGG 在

      layui框架常用输入框介绍中评论 写的很好解决问题..
    • 路过的靓仔 在

      hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 剩下好多 wait 状态的..
    • 激光豆芽 在

      为什么你不能安逸?国内996为什么没有国外955香?中评论 国内现在无意义的内卷太多了..
    • 激光豆芽 在

      阿里云香港服务器搭建自用vpn:Shadowsocks使用流程步骤中评论 厉害了..
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客