[翻译]标记语言和样式手册 Chapter 12 CSS布局（6）
作者：zhaozy 来源：3user.com 发布时间：2008-02-13 14:19:00
标签：布局,样式,标记,css,手册
方法D:定位
<div id="header">
...页首内容...
</div>
<div id="content">
...主内容...
</div>
<div id="sidebar">
...侧边栏...
</div>
<div id="footer">
...页脚内容...
</div>
方法D是使用相同的标记源代码结构,然后以最有效率的方式排列<div>:把主内容放在侧边栏之前,关闭样式的浏览器,屏幕阅读器会先收到主内容部分,再收到侧边栏,在定位时,标记源代码内的顺序与页面元素出现的位置没有关系.
能够预测的高度
CSS内容与前三个方法有点类似,第一个差异是对页首指定的像素高度,我们需要能够预测的高度以便稍后为侧边栏定位.
在这里随机选了一个数字,而这需要根据页首使用的内容调整,像是标志,导航栏,搜索表单等.
#header {
height: 40px;
background: #ccc;
}
#footer {
padding: 20px;
background: #eee;
}
为各栏留下空间
接着,要为#content这个<div>设定右外补丁,就像前几个方法一样,这能为右侧边栏留下空间,稍后会使用绝对定位法(不是浮动)把右侧边栏放进去.
#header {
height: 40px;
background: #ccc;
}
#content {
margin-right: 34％;
}
#footer {
padding: 20px;
background: #eee;
}
放进侧边栏
最后,要使用绝对定位法把#sidebar这个<div>放到#content的边界里,也必须去掉浏览器在页面周围加上的预设边界,如此一来定位座标在所有浏览器之内就会一致了.
body {
margin: 0;
padding: 0;
}
#header {
height: 40px;
background: #ccc;
}
#content {
margin-right: 34％;
}
#sidebar {
position: absolute;
top: 40px;
right: 0;
width: 30％;
background: #999;
}
#footer {
padding: 20px;
background: #eee;
}
在指定position:absolute之后,就能以top与right坐标把#sidebar准确的放到所想的位置(图12-7).
图12-7 以定位做出的两栏布局效果
我们叙述了 "把 #sidebar这个<div>放到距离浏览器视窗上边缘40像素,右边缘0像素的位置",除此之外,也能用bottom和left指定坐标.
0
投稿猜你喜欢
前言：转眼距离上篇JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）已有好几个月了，今天打算将它捡起来，发现好久不用- 代码如下:<％ '=================================================
- 前言了解 Python 的都知道 Pyinstaller 可以将 .py 文件打包成 windows 下可执行的 .exe 文件, 但是在我
- 如何为list实现find方法string类型的话可用find方法去查找字符串位置：a_list.find('a')如果找到
- 对于商业数据库而言，数据库升级是一个优先级很高的事情，有版本升级路线图，有相应的补丁，而且对于方案还有一系列的演练，显然是一场硬仗。而在My
- 大家都知道，在通过Pyqt4的designer工具创建界面.ui文件后需要手动cmd命令将.ui文件转换为.py之后才能进行事件的编写，如果
- package com.groundhog.codingmouse; import java.sql.Connection; import
- 最近接触到微服务框架go-zero，翻看了整个框架代码，发现结构清晰、代码简洁，所以决定阅读源码学习下，本次阅读的源码位于core/sync
- 前言本篇来学习在pytest中使用yaml编写测试用例项目结构conftest.py只需在 conftest.py 即可实现使用yaml编写
- 本文实例讲述了Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作。分享给大家供大家参考，具体如下：Thinkphp5.0
- 本文实例讲述了Python基于最小二乘法实现曲线拟合。分享给大家供大家参考，具体如下：这里不手动实现最小二乘，调用scipy库中实现好的相关
- 我们经常会看到后缀名为.pt, .pth, .pkl的pytorch模型文件，这几种模型文件在格式上有什么区别吗？其实它们并不是在格式上有区
- 本文实例讲述了Python基于scrapy采集数据时使用代理服务器的方法。分享给大家供大家参考。具体如下：# To authenticate
- 背景：我在爬虫处理某个文本时，用到了re.findall()，而不是re.compile。远在新加坡的同事提出了质疑，认为以我的水平，不应该
- 一、慢查询日志概念对于SQL和索引的优化问题，我们会使用explain去分析SQL语句。但是真正的企业级项目有成千上万条SQL，我们不可能从
- UEditor效果图一、简介UEditor是一个开源免费的编辑器，由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，
- 最近接到一个领导需求，将xmind脑图直接转成可以导入的excel用例，并且转换成gui可执行的exe文件，方便他人使用。因为对Python
- 一、前言前两篇博客讲解了爬虫解析网页数据的两种常用方法，re正则表达解析和beautifulsoup标签解析，所以今天的博客将围绕另外一种数
- 1.JSONObject介绍JSONObject-lib包是一个beans,collections,maps,java arrays和xml
- 程序图标主要作用是为了使该程序更加具象及更容易理解，除了上述的作用外，有更好视觉效果的图标可以提高产品的整体体验和品牌，可引起用户的关注和下
