技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> CSS/HTML --> CSS两列流式布局

CSS两列流式布局

浏览:2622次  出处信息

流式布局一般设计者和开发者都会尽量避免，因为大家都觉得这个实现比较复杂。这篇文章的目的就是来打破这个认识，流式布局不是那么的难以实现。

点击这里，查看示例。

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比较长，所以没有问题。

建议继续学习：

  1. 流式布局的原理和代码实现    (阅读：1121)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：跨浏览器的HTML5占位文本(PlaceHolder)方案
后一篇：CSS圆角制作 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1