CSS两列流式布局
浏览:2639次 出处信息
流式布局一般设计者和开发者都会尽量避免,因为大家都觉得这个实现比较复杂。这篇文章的目的就是来打破这个认识,流式布局不是那么的难以实现。
点击这里,查看示例。
HTML结构
HTML结构比较简单,需要一些容器和语义化的标记。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head><title>2 Column Fluid CSS Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="container"> <div id="header"> <h1>Page Title</h1> </div> <ul id="navigation"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> <div id="content"> <h2>Page Content</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pulvinar eros eu diam. Quisque ut orci ut nunc lobortis aliquam. Praesent metus. Pellentesque luctus. Suspendisse nisl.</p> <p>Morbi convallis lectus a elit. Morbi augue. Aenean quis ipsum non dui interdum egestas. Suspendisse quis turpis. Suspendisse et sem in neque dictum hendrerit. Nulla pede.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pulvinar eros eu diam. Quisque ut orci ut nunc lobortis aliquam. Praesent metus. Pellentesque luctus. Suspendisse nisl.</p> <p>Morbi convallis lectus a elit. Morbi augue. Aenean quis ipsum non dui interdum egestas. Suspendisse quis turpis. Suspendisse et sem in neque dictum hendrerit. Nulla pede.</p> </div> <div id="footer"> <p>© <a href="http://www.dave-woods.co.uk">Dave Woods</a></p> </div> </div> </body> </html> |
直奔主题吧,CSS部分的代码也不是多么的复杂
CSS代码
首先我们需要一些通用的部分的样式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
* { padding: 0; margin: 0; } body { font-size: 100%; font-family: arial, verdana, helvetica, sans-serif; background-color: #CCC; } h1 { font-size: 1.6em; } h2 { font-size: 1.4em; } a, a:link { color: #CCC; } a:hover { color: #FFF } |
然后我们给段落设置一些基本的padding和margin,以及字体的大小。
1 2 3 4 5 6 7 |
#content p { margin-bottom: 10px; } #container { padding: 20px; font-size: 0.8em; } |
需要记住的一点是,在CSS中,块级元素总是会100%的充满容器,除非设置了大小,所以处理这些元素的时候我们不需要特别的去设置宽高。
一个普遍的错误是通过设置padding的像素值,然后去计算剩余的百分比是多少,这是很复杂的而且不兼容,所以通常是让块级元素自己充满整个容器。
1 2 3 4 5 6 |
#header { background-color: #C99; padding: 30px; border: 1px solid #000; margin-bottom: 20px; } |
我们让#header充满了页宽,然后设置了背景色和padding值,边框等等。
然后我们希望导航栏在左边,所以我们让他浮动,然后设置了一定的宽度:
1 2 3 4 5 6 7 8 |
#navigation { float: left; width: 200px; padding: 10px; background-color: #66C; border: solid 1px #000; list-style: none; } |
接着就是比较有意思的部分了,我们想让#content充满剩余的部分,所以我们这样写:
1 2 3 4 5 6 |
#content { margin-left: 242px; border: solid 1px #000; padding: 10px; background-color: #FFF; } |
其他的设置没什么特别的,你可能比较好奇的是margin-left为什么设置这么大的值?
因为#navigation是浮动的,占据了容器的一部分,所以加上导航栏的宽度以及边框和他们之间的距离,我们需要给#content设置这样的margin-left。
最后,我们设置#footer的样式:
1 2 3 4 5 6 7 |
#footer { background-color: #66C; padding: 10px; border: 1px solid #000; margin-top: 20px; text-align: center; } |
总结
如果导航栏非常的长而且比右边的内容页面还大的话,那么footer就需要清除浮动了,在我们的这个例子中还好#content比较长,所以没有问题。
建议继续学习:
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
后一篇:CSS圆角制作 >>
文章信息
- 作者:RockUX 来源: RockUX | WEB、前端、JavaScript、PHP
- 标签: 流式布局
- 发布时间:2011-06-02 00:13:47
建议继续学习
近3天十大热文
- [56] Oracle MTS模式下 进程地址与会话信
- [56] IOS安全–浅谈关于IOS加固的几种方法
- [55] 如何拿下简短的域名
- [54] 图书馆的世界纪录
- [52] android 开发入门
- [52] Go Reflect 性能
- [50] 读书笔记-壹百度:百度十年千倍的29条法则
- [49] 【社会化设计】自我(self)部分――欢迎区
- [38] 程序员技术练级攻略
- [33] 视觉调整-设计师 vs. 逻辑