CSS网页布局全精通
互联网 发布时间：2008-10-17 19:25:26 作者：佚名 
我要评论
我要评论在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局.
相关文章：CSS网页布局开发小技巧24则
稍后在"技巧延伸"中,将会讨论Windows版Internet Explorer 5.0盒模型的问题,以及绕
方法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指定坐标.
页尾问题
以先前的方法浮动分栏时,可以用clear属性确保页尾横跨整个浏览器视窗的宽度,而不受主内容,侧边栏的长度影响.
在定位时,侧边栏的文档流独立于整个页面之外,所以只要侧边栏比内容还长,它就会盖住页尾部分.(图12-8)
图12-8 侧边栏与页尾重叠
面对这个问题我常用的解决方法之一,是为页尾指定与主内容一样的右外补丁,让侧边栏能够延伸超过页尾.
使用这个方法的话,CSS需要调整成这样:
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 {
margin-right: 34%;
padding: 20px;
background: #eee;
}
这个解决方案在内容很短,侧边栏很长的页面上看起来有点怪,但是它的确有效,结果可参照图12-9,示范了侧边栏避开页尾的情况.
图12-9 外补丁和主内容相同的页尾
除了使用float属性之外,也能用定位制造出分栏布局,让我们看看最后一个选择,方法D.
相关文章
本文主要介绍了css九宫格布局的五种方法，内容包括grid布局、flex布局、table布局、float浮动定位、inline-block+letter-spacing属性这五种方法的实现，感兴趣的可以了解下2023-09-18- 在Web开发中，经常会遇到需要将元素水平和垂直居中的情况,今天，将为大家分享几种CSS方法，让你的元素轻松居中，让页面更美观吸引人，感兴趣的小伙伴可以自己动手试一试2023-09-08
- 相信大家在面试的时候也会经常碰到css实现元素居中的方法，下面我介绍6种方法给大家，欢迎大家评论区交流2023-09-07
最近需要做个换行的布局，本文主要介绍了flex布局中使用flex-wrap实现换行的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需2022-06-16CSS布局之浮动(float)和定位(position)属性的区别
今天看到有朋友留言问浮动和定位有什么区别，如何使用？今天找了篇文章，讲的比较通俗易懂，供大家参考2021-09-23
这篇文章主要介绍了css实现元素居中的N种方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了div水平布局两边对齐的三种实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2021-01-21
这篇文章主要介绍了waterfall瀑布流布局+动态渲染的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2021-01-19
这篇文章主要介绍了页面中有间隔的方格布局如何完美实现方法。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-11-27- 这篇文章主要介绍了css实现六种自适应两栏布局方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2020-10-28
最新评论