css 浮动(float)页面布局(下)
css学习网 发布时间：2010-01-07 01:51:21 作者：佚名 
我要评论
我要评论我们接着上节课，继续学习，我把页面整体效果发出来，方便大家学习
【第七步 内容左侧板块(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了*/
}
到这里我们第一篇文章已经布局完毕，下面布局一下第二篇文章，估计大家早就注意到了，两篇文章唯一区别就是第二篇文章的内容的左侧有一张图片，哈哈，这就好办了，把第一篇文章的代码复制过来，替换标题和文章内容，然后再文章内容里面插入一张图片就OK了，代码如下：
HTML代码：
<h1>跟KwooJan学习DIV+CSS只需2天</h1>
<p>
<img src="Images/1.gif" _fcksavedurl=""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;
}
效果如下，很接近了吧，只不过图片的左侧和文字靠的太接近了
这个很好解决，设置图片的右外边距(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的下面，如图：
1）IE6和FF中有一点却显示的却不一样，底部版权在FF中却跑到了的右侧ContentR的下面，如图：
产生原因：是因为id为Content的div，没有自动适应里面ContentL的高度
解决方法：最简便的方法是设置Content的CSS属性overflow:hidden;
怎么样问题解决了吧~
2）因为ContentR的高度没有ContentL的高度高，所以在ContentR的下面留有一块空白，如图：
解决方法：只需要把Content的背景颜色设置成和ContentR背景颜色一样就OK了
这个问题也解决了吧~
最终效果
至此，整个页面算是布局完成了，感觉怎么样？有不懂的就回复帖子告诉我
顺便说一下：最终代码其实还可以进行精简，这个算是给大家一个思考题了
下节课，我们将要讲讲布局网页的第二种方法---定位
我们分析一下他的结构，主要包括标题和文章内容两块，并且标题和内容之间有一条虚线，而第二篇文章的内容部分是图片和文字相结合且文字环绕图片。
好~！既然搞清楚结构了，后面我们布局就容易了
我打算标题用<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了*/
}
到这里我们第一篇文章已经布局完毕，下面布局一下第二篇文章，估计大家早就注意到了，两篇文章唯一区别就是第二篇文章的内容的左侧有一张图片，哈哈，这就好办了，把第一篇文章的代码复制过来，替换标题和文章内容，然后再文章内容里面插入一张图片就OK了，代码如下：
HTML代码：
复制代码
代码如下:<h1>跟KwooJan学习DIV+CSS只需2天</h1>
<p>
<img src="Images/1.gif" _fcksavedurl=""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;
}
效果如下，很接近了吧，只不过图片的左侧和文字靠的太接近了
这个很好解决，设置图片的右外边距(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的下面，如图：
1）IE6和FF中有一点却显示的却不一样，底部版权在FF中却跑到了的右侧ContentR的下面，如图：
产生原因：是因为id为Content的div，没有自动适应里面ContentL的高度
解决方法：最简便的方法是设置Content的CSS属性overflow:hidden;
怎么样问题解决了吧~
2）因为ContentR的高度没有ContentL的高度高，所以在ContentR的下面留有一块空白，如图：
解决方法：只需要把Content的背景颜色设置成和ContentR背景颜色一样就OK了
这个问题也解决了吧~
最终效果
至此，整个页面算是布局完成了，感觉怎么样？有不懂的就回复帖子告诉我
顺便说一下：最终代码其实还可以进行精简，这个算是给大家一个思考题了
下节课，我们将要讲讲布局网页的第二种方法---定位
相关文章
- 这篇文章主要为大家详细介绍了CSS3定位和浮动的概念，以及实例代码讲解CSS3定位和浮动的使用方法，感兴趣的小伙伴们可以参考一下2016-05-10
- css的核心内容：标准流、盒子模型、浮动、定位（可以说不理解这些概念绝做不出合适的网页）2009-12-21
- W3School 站点上的所有页面都采用了这种技术，如果您打开我们使用 CSS 文件，您会看到我们对页脚的 div 进行了清理，而页脚上面的三个 div 都向左浮动。2009-10-15
纯CSS定位的固定垂直居中浮动层代码，附经典解说 《详解定位与定位应用
关于在html中浮动层是众多网页爱好者刚开始的难点，主要在于定位。如果你对CSS定位还不够了解 可以接着往下看，运行里面的内容即可。 【需求】： 将一个网页分成头、身2009-07-01- 网页制作Webjx文章简介：在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项（absolute 、static、relative和fixed）中的绝对定位（absolute positioning2009-04-02
- 前四节的大练习大家做的怎么样？有没有难度，如果你觉着有难度没有关系，这节课，我带着大家做一下这个练习！2010-01-07
- DIV+CSS网页布局常用到浮动方案，但浮动并不像表格那样好用，很多时候会出问题。同时设计不够良好的浮动布局，在不同的浏览器下会有不同的表现，可能设计时照着常用的浏览2009-10-28
- 在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning)，它可以将文档中的某个元素2009-07-01
网页布局 CSS简单实现垂直居中-CSS教程-网页制作-网页教学网
英文原文： http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/ 中文译文： http://www.12sui.cn/blog/71.html 本人英语还没过四级，所以不2008-10-17
最新评论