CSS网页布局全精通
互联网 发布时间：2008-10-17 19:25:26 作者：佚名 
我要评论
我要评论在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局.
相关文章：CSS网页布局开发小技巧24则
稍后在"技巧延伸"中,将会讨论Windows版Internet Explorer 5.0盒模型的问题,以及绕
方法C:浮动主内容
<div id="header">
...页头内容...
</div>
<div id="content">
...主内容...
</div>
<div id="sidebar">
...侧边栏...
</div>
<div id="footer">
...页尾内容...
</div>
还有个值得一提的方法,只需要用一个float属性,同时标记源代码仍然可以将主内容的<div>放在侧边栏之前.
只要将主内容的<div>浮动到左侧,并且为它设定小于100%的宽度,如此一来就能在右侧留下足够空间摆放侧边栏.
CSS内容
方法C需要的CSS内容再简单不过了,"一个float属性",内容区希望使用的宽度,以及两栏之间留下的小边界.
#header {
padding: 20px;
background: #ccc;
}
#content {
float: left;
width: 66%;
}
#sidebar {
background: #999;
}
#footer {
clear: left;
padding: 20px;
background: #eee;
}
请注意我们并不需要定义侧边栏的宽度,因为它会自动填满主内容<div>用剩下的空间(在这个例子中是34%).
悲惨的背景
图12-5就是以浏览器查看的成果,哦喔!在某些常用浏览器里,侧边栏的背景颜色会出现在主内容区底下,由于侧边栏并未制定宽度,因此它想扩到与浏览器视窗一样宽.
图12-5 浮动内容,但是侧边栏的背景颜色透了出来
这个部分只要我们能在侧边栏左边加上宽度与内容区相同的外边界便可以避开这个问题.实际上我们会把外补丁设的稍微大一点,以便在两栏之间留下一点空白.
#header {
padding: 20px;
background: #ccc;
}
#content {
float: left;
width: 66%;
}
#sidebar {
margin-left: 70%;
background: #999;
}
#footer {
clear: left;
padding: 20px;
background: #eee;
}
简单朴素
或者是,如果涉及不需要用到背景色的话,那就不必设定边界了,图12-6是去掉整个#sidebar声明,在为主内容<div>加上一点右外补丁之后的结果.此时两栏会共用页面预设的背景色.
图12-6 不使用背景色的浮动内容
CSS则能缩减成:
#header {
padding: 20px;
background: #ccc;
}
#content {
float: left;
width: 66%;
margin-right: 6%;
}
#footer {
clear: left;
padding: 20px;
background: #eee;
}
除了加上左外补丁(或是省去背景色)之外,还有个使用背景图片的替代做法能让分栏具备背景色彩,我稍后会在本章的" 技巧延伸 "单元里提示这个小秘密.
相关文章
本文主要介绍了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
最新评论