html5图⽚浮动float,css浮动（float）页⾯布局（下）
【第七步 内容左侧板块(ContentL)布局】
我们分析⼀下他的结构，主要包括标题和⽂章内容两块，并且标题和内容之间有⼀条虚线，⽽第⼆篇⽂章的内容部分是图⽚和⽂字相结合且⽂字环绕图⽚。
好~！既然搞清楚结构了，后⾯我们布局就容易了
我打算标题⽤
标签，为什么这么⽤呢，原因如下
第⼀:
标签本⾝字体就是加粗的这样CSS⾥⾯就不⽤再定义字体粗细
第⼆：如果标题⽤
的话，搜索引擎会⾸先抓取
⾥⾯的内容，然后提取关键词，这样别⼈在搜索引擎中输⼊关键词，会更容易到你的⽹站哟~然后流量就唰唰滴~^_^
对于⽂章内容，我们就放到
HTML代码：
CSS学习互动社区欢迎您！
我们是⼀热爱页⾯前端技术并热衷于推⼴W3C标准的热⼼好友，如果您想学或者正在学DIV+CSS布局页⾯，加⼊我们！您会很快驯服并驾驭这匹烈马！虽然我们的论坛正在起步，但是这⾥的每个⼈都很热爱页⾯前端技术并热衷于推⼴W3C标准在中国的运⽤，只要你有问题就可以问，⼀定会有⼈帮你解答！我们可能不是⾼⼿，但是我们都是很乐于帮助，乐于钻研。我们都很热⼼！
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代码：
跟KwooJan学习DIV+CSS只需2天
上很多朋友在刚接触DIV+CSS的时候，很迷茫，不知道从何学起，看⽹上的教程吧，理论性的东西太多，越看越糊涂，再说时间上也不允许，也没有那个耐⼼，其实KwooJan也不喜欢看这种视频教程，很枯燥，很乏味，即使耐着性⼦看完收获也不⼤，实⽤性不⼤，上的⼀些朋友告诉我，他们学习DIV+CSS没有思路，不知道怎么去学，如何去学，希望KwooJan能带着他们⼀步⼀步⾛，从今天开始我将写个教程，打算以例⼦为主，帮主⼤家更轻松的驾驭DIV+CSS。好了，在这⾥我必须要给⼤家纠正⼀个错误，我们平时说的DIV+CSS其实是⼀种错误的说法，是中国⼈⾃⼰发明的，并不准确，不能够将所谓的页⾯布局思想说的很确切，其实应该说XHTML+CSS才对。
但是如果我们预览效果的话，确是这样⼦的
不但图⽚没有靠左边，⽽且⽂字的上⽅还有⼀⼤⽚空⽩，应该怎么做呢？很容易，只要我们给图⽚左侧浮动(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板块布局的经验，右侧就会很容易，标题“加⼊我们！”当然还是⽤css设置文字垂直居中
标签喽，好~！开⼯！
标题区域代码如下
HTML代码：
加⼊我们！
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代码：
CSS学习互动社区QQ：
CSS代码：
#Content #ContentR strong{
display:block;/*只有把strong标签，转化成块状元素，margin-bottom:5px；才会起作⽤，才能使与下⾯的元素维持⼀定距离*/
font-size:12px;
color:#333;
margin-bottom:5px;
}
好~！第⼀⾏搞定！
下⾯的两⾏红⾊的QQ信息怎么做？其实这个有很多办法
⽅法⼀：ul、li或者dl、dt、dd来布局
⽅法⼆：表格(Table)来布局
⽅法三：⽤单纯的标签来布局⽐如
、、
等标签
其实在这⾥，我最推荐第⼆种⽅法，可能⼤家看到这⾥挺想不透的，或者觉着⽤Table很丢⼈，好似没有什么技术含量似的，其实这时候如果你不⽤Table，反⽽认为你的技术含量低，⾃⼰给⾃⼰⿇烦，为什么这么说呢
⾸先你必须知道DIV和Table的诞⽣⽬的不⼀样，DIV的诞⽣就是⽤来布局页⾯，⽽Table的诞⽣就是为了放数据，⼤家看KwooJan所有写的代码，只有布局页⾯⼤板块的时候才⽤，还记得上节课⼀开始布局页⾯板块的时候代码么
整个页⾯就这5个DIV，其他地⽅⼀般不⽤，因为DIV的使命就是布局页⾯！
⼤家经常会进⼊⼀个误区，会认为在Web2.0时代，只要页⾯中⽤了Table就是没有技术含量，就是丢⼈，要是页⾯中没有⼀个table，所有元素全部⽤DIV做，那就是⽜⼈！⼤家注意了，要是某⼈对你说，我的整个⽹站没有应⽤⼀个Table，这时候你就可以认为这个⼈做页⾯没有什么技术含量，并且CSS代码相当庞杂，根本不能算是⼀个⾼⼿，顶多是⼀个DIV的狂热分⼦，做的页⾯也能说是标准，很多⽤Table就可以简简单单实现的效果，⾮要⽤DIV去实现，不仅使CSS⽂件相当的臃肿，⽽且使页⾯加载速度变慢。
所以在这⾥KwooJan提醒⼤家，⼀定⼀定要⾛出这个误区！
好了说了这么多，这块的代码如下：
HTML代码：
1：55058102：87951377
3：735136414：72263578
CSS代码：
#Content #ContentR table{
font-size:12px;
color:#900;
}
最后⼀句话就更简单了，代码如下
HTML代码：
希望有强烈进取精神和互助精神的朋友请加⼊！⼀块探讨⼀块交流⼀块学习！
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了
这个问题也解决了吧~
最终效果
⾄此，整个页⾯算是布局完成了，感觉怎么样？有不懂的就回复帖⼦告诉我
顺便说⼀下：最终代码其实还可以进⾏精简，这个算是给⼤家⼀个思考题了
下节课，我们将要讲讲布局⽹页的第⼆种⽅法---定位

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。