时间：2023-03-01 16:30:01 | 来源：建站知识
时间：2023-03-01 16:30:01 来源：建站知识
div+css网页布局教程(1)：float属性介绍： 大家好，我是毛仔，从今天开始毛仔和大家一起学习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>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="50%">容器二</td>
<td width="50%">容器三</td>
</tr>
</table>
</body>
</html>
那么这个效果用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结构要快的多。
好，第一讲就到这里，请继续关注下一讲。
作者：毛仔
来源：
原创文章，转载请保留出处。
关键词：属性,教程,布局
在线咨询
