DIV+CSS基础教程：浮动（float）页⾯布局html里的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代码就会更精简，少了&>，看看下⾯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】
页⾯上的导航栏和第四节讲的⼏乎是⼀样的，并且更简单些，这⾥我就不再给⼤家⼀步⼀步做，不会做的就去看第四节，这⾥我就直接把代码发出来供⼤家学习
HTML代码：
引⽤:
<div id="Nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">LINKS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
CSS代码
引⽤:
#Nav{height:42px;}
#Nav ul{
height:42px;
list-style:none;
background:#56990c;
}
#Nav ul li{height:42px; float:left;}
#Nav ul li a{
display:block;/*转化成块状元素，因链接是内链元素，若想给它定义下⾯的属性，必须将它转化成块状元素，*/
height:42px;
color:#FFF;
padding:0 10px;
line-height:42px;
font-size:14px;
font-weight:bold;
font-family:Arial;
text-decoration:none;/*去除链接样式，默认是有下划线的，加上这句就没有任何样式，下划线也没有了*/
float:left;/*这句⼀定要加，不然在IE6中会出现，这种效果*/
}
#Nav ul li a:hover{background:#68acd3;}
【第四步 Banner布局】
这个就更简单了，有两种⽅法
引⽤:
第⼀种：将图⽚作为<div id="Banner"></div>背景
第⼆种：直接将图⽚插⼊<div id="Banner"></div>之间，代码：<div id="Banner"><img src="" /></div>
⼤家可以根据需求和实际情况选择⽤哪⼀种，在这⾥我们⽤第⼀种
HTML代码没有什么变化，只需要在CSS⾥⾯定义⼀下就OK了
CSS代码：
引⽤:
#Banner{
height:290px;
background:url(../Images/banner.jpg) no-repeat;
}
怎么样做到这⾥⽐较简单吧，好，接着来
【第五步内容Content板块布局】
从图⽚上我们看到，内容板块分为左右两个区域，左边ContentL宽度是600px，右边ContentR宽度是300px，但是由于我们要将内边距设置成15px(这样才会好看)，所以ContentL的宽度在CSS中就要设置成600-15*2=570px,⽽右侧的ContentR则需要设置成300-15*2=270px；
HTML代码：
引⽤:
<div id="Content">
<div id="ContentL">此处为左边ContentL</div>
<div id="ContentR">此处为左边ContentR</div>
</div>
CSS代码:
引⽤:
#Content #ContentL,#Content #ContentR{float:left; padding:15px;}/*为什么都要左侧浮动，如果不明
⽩就去看第⼆节*/
#Content #ContentL{width:570px; background:#f0f0f0;}
#Content #ContentR{width:270px; background:#d3e7f2;}
页⾯效果：
内容部分我们就先做到这⾥，最后我们再布局⾥⾯的具体元素，下⾯接着来布局版权模块(Footer)
【第六步 Footer布局】
这部分结构⽐较简单，⼤家只需要知道怎么布局就OK了
HTML代码：
引⽤:
<div id="Footer">
<p>版权归CSS学习( )所有</p>
<p>CSS交流:5505810/87951377/73513641/72263578</p>
</div>
CSS代码：
引⽤:
#Footer{
text-align:center;
background:#68acd3;
padding: 10px 0;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
line-height:20px;
}
⽬前效果如下：
就这样我们页⾯的整体结构基本出来了，剩下的⼯作就是内容板块内部元素的具体布局了，我将在下节课接着讲~本节到这⾥的全代码如下：
引⽤:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="CSS/css.css"/>
<title>CSS学习 alixixi整理</title>
</head>
<body>
<div id="Logo">
<a href="#" id="logoLink"></a>
</div>
<div id="Nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">LINKS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div id="Banner"></div>
<div id="Content">
<div id="ContentL">此处为左边ContentL</div>
<div id="ContentR">此处为左边ContentR</div>
</div>
<div id="Footer">
<p>CSS学习 alixixi整理有</p>
<p>CSS学习 alixixi整理</p>
</div>
</body>
</html>
CSS代码:
:
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论