【第七步 内容左侧板块(ContentL)布局】
我们分析一下他的结构，主要包括标题和文章内容两块，并且标题和内容之间有一条虚线，而第二篇文章的内容部分是图片和文字相结合且文字环绕图片。
好!！既然搞清楚结构了，后面我们布局就容易了 我打算标题用
第一:
第二:如果标题用
对于文章内容，我们就放到
中就OK了，相应的代码如下： HTML代码：
我们是一群热爱页面前端技术并热衷于推广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代码：
群上很多朋友在刚接触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板块布局的经验，右侧就会很容易，标题“加入我们！”当然还是用
标题区域代码如下 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;才会起作用，才能使
相关推荐：
loading