CSS网页布局全精通
互联网 发布时间：2008-10-17 19:25:26 作者：佚名 
我要评论
我要评论在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局.
相关文章：CSS网页布局开发小技巧24则
稍后在"技巧延伸"中,将会讨论Windows版Internet Explorer 5.0盒模型的问题,以及绕
三人行
如果想做三栏布局的话该怎么办?没问题,而且在使用绝对定位时很容易加入.只需要为主内容,也为加上左外补丁,大小足够容纳第三栏即可.
另一个侧边栏能够放在标记源代码之内任何地方,因为会需要再度使用绝对定位进行布局.
假设加了第二个侧栏,并将它取名# sidecolumn,接着以下面这段CSS为它空出位置,再把它放进去.
body {
margin: 0;
padding: 0;
}
#header {
height: 40px;
background: #ccc;
}
#content {
margin-right: 24%;
margin-left: 24%;
}
#sidecolumn {
position: absolute;
top: 40px;
left: 0;
width: 20%;
background: #999;
}
#sidebar {
position: absolute;
top: 40px;
right: 0;
width: 20%;
background: #999;
}
#footer {
margin-right: 24%;
margin-left: 24%;
padding: 20px;
background: #eee;
}
刚才完成的部分是在主内容,页尾区空出左外补丁(避免重叠),与之前做右侧边栏一样,接着以绝对定位法放进新的#sidecolumn ,将它放在距离上边缘40像素,距离左边缘0像素的位置.
你有留意我们稍微修正了宽度以容纳第三栏吗?由于我们使用百分比,因此这个布局会随着浏览器的宽度缩放,或者也可以为任何一栏指定像素宽度,以便使布局宽度固定下来.
图12-10是用浏览器查看这个示例的效果,一份以CSS绝对定位完成的灵活三栏布局.
图12-10 以定位法作出的灵活三栏布局
相关文章
本文主要介绍了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
最新评论