CSS实例教程:浮动(float)页面布局

前四节的大练习大家做的怎么样？有没有难度，如果你觉着有难度没有关系，这节课，我带着大家做一下这个练习！
【第一步 整体布局与公共CSS定义】
我们先来分析一下这个页面

页面主要分5大块，顶部的Logo、导航条Nav、Banner、Content、Footer，如下图
 

这样HTML就很容易写出来了

<div id="Logo"></div>
<div id="Nav"></div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="Footer"></div>

因为这5块的宽度都是900像素，并且都是水平居中的，所以相应CSS代码如下

body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}
/*为什么写这段代码没有忘记吧，作用就是重置可能用到的标签，不明白的去看第四节的课程关键词*/
#logo,#Nav,#Banner,#Content,#Footer{width:900px; margin:0 auto;}

【第二步 布局Logo栏】
首先我们需要把页面上的logo给切割出来，其大小为173*46,名字为：logo.gif
 

一般网站都会做到点击logo，就会回到主页，应该怎么做呢，大家首先会想到，给图片加上链接就可以了，代码一般会这么写
<a href="#" id="logoLink"><img src="#" /></a>
不过KwooJan要介绍另外一种方法，将图片做成链接a的背景，同样可以达到上面说的效果，并且HTML代码就会更精简，少了<img...>，看看下面Logo栏的页面代码，红色的为将logo.gif作为背景的链接

HTML代码：
<div id="Logo">
<a href="#" id="logoLink"></a>
</div>

CSS代码
#Logo{
height:80px;/*公共代码中没有定义高度，在这里定义*/
}
#logoLink{
display:block;/*将链接a转化成块状元素，这样才能显示出背景*/
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
float:left;/*为了让ie6和ff显示效果一样，如果不加上这句话，后面的margin-top:20px;两个浏览器解析不一样，大家可以去掉这句话，看看两者显示效果差别*/
margin-top:20px;/*设置a的顶部外边距为20像素，这样才能和浏览器顶部有段距离，才能和图片中做的一样*/
}

好到这里，头部含有logo的区域已经写完。

【第三步 布局导航栏Nav】
页面上的导航栏和第四节讲的几乎是一样的，并且更简单些，这里我就不再给大家一步一

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!