div+css网页布局教程(1)：float属性介绍

最新推荐文章于 2022-11-01 15:50:04 发布

noaighost

最新推荐文章于 2022-11-01 15:50:04 发布

阅读量992

点赞数

文章标签： div float css table class border

大家好，我是毛仔，从今天开始毛仔和大家一起学习div+css页面布局。
　　从2008年7月份开始，毛仔辞去了原来的工作，和ofseo老兄一起“网络创业”。在那半年时间里学习了不少东西，包括div+css网页设计，seo相关知识，单页面做google adsense，玩熟了dedecms等各大cms和论坛系统……

　　通过几个月的学习和摸索，毛仔也是有很多心得，也通过做单页面赚了一点点上网费，本来很想把自己的学习心得也想给网络菜鸟们分享分享，使得和我一样的网络菜鸟们能早点掌握一些搞网络的基本技术，使大家的站都能快速发展起来。但是毛仔太懒，不喜欢写东西，前段时间也忙，所以虽然有这份心思，但一直没有动手，这段时间毛仔在找工作阶段，所以闲余时间比较多，就想写点东西和大家一起分享分享。其实，还有个原因，大家可能不相信，毛仔摸电脑摸了这么长时间了，做网站也起码有100个了，但是打字速度超级慢，至今还不会盲打，更不会五笔这种高深的打字法，所以写东西对我来说是一个浩大的工程。

　　好了，闲话先不说了，先开始我们的div+css教程。

　　关于这个教程，我主要是讲div+css页面布局，所以最基本的html和css基本知识我就不多讲了，如果一点都不会的话可以自己去看看基本教程。

　　怎么样用div+css来实现页面布局：

　　把div看成一个容器，网页上的内容就包含在一个个的容器里面，我们可以像使用表格(table)一样来使用div，能够像table套table一样来套div。对于熟悉使用table来布局的朋友，学习初期可以按照使用table的思路来使用div。

　　对于div的横向排列各位朋友很容易理解，这里要说的div的竖向排列问题。

　　先来看看一个例子：

　　有个页面左右两栏，如果用传统的table结构来布局代码如下：

<head>
<title>无标题文档</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>容器一</td>
</tr>
</table>

那么这个效果用div+css怎么实现那，我们来看看代码：
<head>
<title>无标题文档</title>
</head>
<style>
.div1{ width:100%}
.div2{ float:left; width:50%}
.div3{ float:right; width:50%}

</style>
<body>
<div class="div1">容器一</div>
<div class="div2">容器二</div>
<div class="div3">容器三</div>
</body>
</html>

　　大家看看简单吧!这里用到了一个div+css里面最重要的一个css属性float.

　　语法：

　　float : none | left | right

　　取值：

　　none : 默认值。对象不飘浮

　　left : 文本流向对象的右边

　　right : 文本流向对象的左边

　　说明：

　　该属性的值指出了对象是否及如何浮动。

　　跟随浮动对象的对象将移动到浮动对象的位置。浮动对象会向左或向右移动直到遇到边框( border 、内补丁( padding 、外补丁( margin 或者另一个块对象( block-level )为止。

　　示例：

　　div { clear : left }

　　img { float: right }

　　所以我们要设置两个并列的容器，只需要给这两个容器设置float属性就可以，左边的容器设置float:left，右边的容器设置float:rigeht。特别需要的注意的是两个并列容器的总宽度不能超过父容器，否则可能显示的不是并列的，而是有一个容器会显示到某一个的下方去。

　　说到这里有朋友会问，两个容器可以这样排列，那么三个或更多并列容器怎么样排列?因为float属性只有三个值float : none | left | right ，也就是只能向左边或右边浮动，所以要设置多个并列容器完全可以借鉴套table一样的思路。我们可以先设置两个并列的大容器，然后再在个个大容器里面再套两个并列小容器，以此类推，只要你想要，可以设置n个并列的容器。

　　我们来看下面的例子：

简略代码如下：
<head>
<title>无标题文档</title>
</head>
<style>
.div1{ width:100%}
.div2{ float:left; width:50%}
.div3{ float:right; width:50%}
.div4{ float:left; width:50%}
.div5{ float:right; width:50%}

</style>
<body> <div class="div1">容器一</div>
<div class="div2">
<div class="div4">容器四</div>
<div class="div5">容器五</div>
</div>
<div class="div3">容器三</div>
</body>
</html>

　　大家可以看到用div和table的思路有很多相似之处，但是代码却简洁的多，并且实际中页面加载速度比table结构要快的多。

　　好，第一讲就到这里，请继续关注下一讲。

文章来自: 站长网(www.admin5.com) 详文参考：http://www.admin5.com/article/20090310/135003.shtml