DIV+CSS基础教程：浮动(float)页面布局

最新推荐文章于 2020-11-25 23:28:11 发布

danielinbiti

最新推荐文章于 2020-11-25 23:28:11 发布

阅读量2.1k

点赞数

分类专栏： CSS 文章标签： DIV HTML CSS

CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

【第一步整体布局与公共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的区域已经写完，如果自己做不出来，就来下载源代码:

SY_float1.rar (7.36 KB)

【第三步布局导航栏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;}

源代码下载：

SY_float2.rar (7.69 KB)

【第四步 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;
}

源代码下载：

SY_float3.rar (73.79 KB)

怎么样做到这里比较简单吧，好，接着来

【第五步内容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学习( www.cssxuexi.cn)所有</p>
<p>CSS交流QQ群: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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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.com整理</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.com整理有</p>
<p>CSS学习 alixixi.com整理</p>
</div>
</body>
</html>

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{
height:80px;
}
#logoLink{
display:block;
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
float:left;
margin-top:20px;
}

#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;
}
#Nav ul li a:hover{background:#68acd3;}

#Banner{
height:290px;
background:url(../Images/banner.jpg) no-repeat;
}

#Content #ContentL,#Content #ContentR{float:left; padding:15px;}
#Content #ContentL{width:570px; background:#f0f0f0;}
#Content #ContentR{width:270px; background:#d3e7f2;}

#Footer{
text-align:center;
background:#68acd3;
padding: 10px 0;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
line-height:20px;
}

【第七步内容左侧板块(ContentL)布局】

我们分析一下他的结构，主要包括标题和文章内容两块，并且标题和内容之间有一条虚线，而第二篇文章的内容部分是图片和文字相结合且文字环绕图片。
好~！既然搞清楚结构了，后面我们布局就容易了
我打算标题用<h1>标签，为什么这么用呢，原因如下

第一:<h1>标签本身字体就是加粗的这样CSS里面就不用再定义字体粗细
第二:如果标题用<h1>的话，搜索引擎会首先抓取<h1>里面的内容，然后提取关键词，这样别人在搜索引擎中输入关键词，会更容易找到你的网站哟~然后流量就唰唰滴~^_^

对于文章内容，我们就放到<p></p>中就OK了，相应的代码如下：

HTML代码：

引用:

<div id="ContentL">
<h1>CSS学习互动社区欢迎您！</h1>
<p>我们是一群热爱页面前端技术并热衷于推广W3C标准的热心好友，如果您想学或者正在学DIV+CSS布局页面，加入我们！您会很快驯服并驾驭这匹烈马！虽然我们的论坛正在起步，但是这里的每个人都很热爱页面前端技术并热衷于推广W3C标准在中国的运用，只要你有问题就可以问，一定会有人帮你解答！我们可能不是高手，但是我们都是很乐于帮助，乐于钻研。我们都很热心！</p>
</div>

CSS代码：

引用:

#Content #ContentL h1{
height:40px;
line-height:40px;/*设置行距，目的是保证h1中的文字垂直居中*/
font-size:16px;
color:#054d73;
border-bottom:1px #969696 dashed;/*设置h1的下边框为宽度1像素的虚线*/
margin-bottom:10px;/*设置外边距，让h1和下面的内容区域p保持10像素的距离*/
}
#Content #ContentL p{
font-size:12px;
line-height:20px;
text-indent:2em;/*这句话的目的就是为了让文章第一行缩进两个汉字，记住这句话就OK了*/
}

效果如下：

源代码:

SY_float5.rar (74.55 KB)

到这里我们第一篇文章已经布局完毕，下面布局一下第二篇文章，估计大家早就注意到了，两篇文章唯一区别就是第二篇文章的内容的左侧有一张图片，哈哈，这就好办了，把第一篇文章的代码复制过来，替换标题和文章内容，然后再文章内容里面插入一张图片就OK了，代码如下：

HTML代码：

引用:

<h1>跟KwooJan学习DIV+CSS只需2天</h1>
<p>
<img src="Images/1.gif" />群上很多朋友在刚接触DIV+CSS的时候，很迷茫，不知道从何学起，看网上的教程吧，理论性的东西太多，越看越糊涂，再说时间上也不允许，也没有那个耐心，其实KwooJan也不喜欢看这种视频教程，很枯燥，很乏味，即使耐着性子看完收获也不大，实用性不大，群上的一些朋友告诉我，他们学习DIV+CSS没有思路，不知道怎么去学，如何去学，希望KwooJan能带着他们一步一步走，从今天开始我将写个教程，打算以例子为主，帮主大家更轻松的驾驭DIV+CSS。好了，在这里我必须要给大家纠正一个错误，我们平时说的DIV+CSS其实是一种错误的说法，是中国人自己发明的，并不准确，不能够将所谓的页面布局思想说的很确切，其实应该说XHTML+CSS才对。
</p>

但是如果我们预览效果的话，确是这样子的

不但图片没有靠左边，而且文字的上方还有一大片空白，应该怎么做呢？很容易，只要我们给图片左侧浮动(float:left;)就可以了,CSS代码如下：

引用:

#Content #ContentL p img{
float:left;
}

效果如下，很接近了吧，只不过图片的左侧和文字靠的太接近了

不但图片没有靠左边，而且文字的上方还有一大片空白，应该怎么做呢？很容易，只要我们给图片左侧浮动(float:left;)就可以了,CSS代码如下：

引用:

#Content #ContentL p img{
float:left;
}

效果如下，很接近了吧，只不过图片的左侧和文字靠的太接近了

这个很好解决，设置图片的右外边距(margin-right)嘛~,CSS代码如下：

引用:

#Content #ContentL p img{
float:left;
margin-right:10px;
}

这下效果一样了吧~！~！~！
OK！到这里ContentL板块布局搞定！

【第八步内容右侧板块(ContentR)布局】
有了ContentL板块布局的经验，右侧就会很容易，标题“加入我们！”当然还是用<h1>标签喽,好~！开工！
标题区域代码如下

HTML代码：

引用:

<h1>加入我们！</h1>

CSS代码：

复制内容到剪贴板

代码:

#Content #ContentR h1{
 height:40px;
 line-height:40px;/*设置行距，目的是保证h1中的文字垂直居中*/
 font-size:16px;
 color:#900;
 border-bottom:1px #969696 dashed;/*设置h1的下边框为宽度1像素的虚线*/
 margin-bottom:10px;/*设置外边距，让h1和下面的内容区域p保持10像素的距离*/
 }

而内容的第一句“CSS学习互动社区QQ群：”的代码如下

HTML代码：

引用:

<strong>CSS学习互动社区QQ群：</strong>

CSS代码：

复制内容到剪贴板

代码:

#Content #ContentR strong{
 display:block;/*只有把strong标签，转化成块状元素，margin-bottom:5px;才会起作用，才能使<strong>与下面的元素维持一定距离*/
 font-size:12px;
 color:#333;
 margin-bottom:5px;
 }

好~！第一行搞定！
下面的两行红色的QQ群信息怎么做？其实这个有很多办法

复制内容到剪贴板

代码:

方法一：ul、li或者dl、dt、dd来布局
 方法二：表格(Table)来布局
 方法三：用单纯的标签来布局比如<p>、<span>、<div>等标签

其实在这里，我最推荐第二种方法，可能大家看到这里挺想不透的，或者觉着用Table很丢人，好似没有什么技术含量似的，其实这时候如果你不用Table，反而认为你的技术含量低，自己给自己找麻烦，为什么这么说呢
首先你必须知道DIV和Table的诞生目的不一样， DIV的诞生就是用来布局页面，而Table的诞生就是为了放数据，大家看KwooJan所有写的代码，只有布局页面大板块的时候才用，还记得上节课一开始布局页面板块的时候代码么

引用:

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

整个页面就这5个DIV，其他地方一般不用，因为DIV的使命就是布局页面！

大家经常会进入一个误区，会认为在Web2.0时代，只要页面中用了Table就是没有技术含量，就是丢人，要是页面中没有一个table，所有元素全部用DIV做，那就是牛人！大家注意了，要是某人对你说，我的整个网站没有应用一个Table，这时候你就可以认为这个人做页面没有什么技术含量，并且CSS代码相当庞杂，根本不能算是一个高手，顶多是一个DIV的狂热分子，做的页面也能说是标准，很多用Table就可以简简单单实现的效果，非要用DIV去实现，不仅使CSS文件相当的臃肿，而且使页面加载速度变慢。
所以在这里KwooJan提醒大家，一定一定要走出这个误区！

好了说了这么多，这块的代码如下：

HTML代码：

复制内容到剪贴板

代码:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
         <tr>
             <td width="36%" height="20">1群：5505810</td>
             <td width="64%">2群：87951377</td>
         </tr>
         <tr>
             <td height="20">3群：73513641</td>
             <td>4群：72263578</td>
         </tr>
 </table>

CSS代码：

复制内容到剪贴板

代码:

#Content #ContentR table{
 font-size:12px;
 color:#900;
 }

最后一句话就更简单了，代码如下

HTML代码：

引用:

<span>希望有强烈进取精神和互助精神的朋友请加入！一块探讨一块交流一块学习！</span>

CSS代码：

复制内容到剪贴板

代码:

#Content #ContentR span{
 font-size:12px;
 }

至此我们每个版块均以布局完毕，但是却有两点瑕疵：
1）IE6和FF中有一点却显示的却不一样，底部版权在FF中却跑到了的右侧ContentR的下面，如图：

产生原因：是因为id为Content的div，没有自动适应里面ContentL的高度
解决方法：最简便的方法是设置Content的CSS属性overflow:hidden;
怎么样问题解决了吧~
2）因为ContentR的高度没有ContentL的高度高，所以在ContentR的下面留有一块空白，如图：

解决方法：只需要把Content的背景颜色设置成和ContentR背景颜色一样就OK了
这个问题也解决了吧~
最终效果

danielinbiti

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
DIV+CSS基础教程：浮动(float)页面布局

【第一步整体布局与公共CSS定义】我们先来分析一下这个页面页面主要分5大块，顶部的Logo、导航条Nav、Banner、Content、Footer，如下图这样HTML就很容易写出来了引用:因为这5块的宽度都是900像素，并且都是水平居中的，所以相应CSS代码如下引用:
复制链接

扫一扫