>>> 下载【朝花夕拾 – DIV+CSS布局实战系列视频教程】图片素材
在完成主内容区的分栏布局之后，我们就可以开始往这两个版块中填充子容器及相应内容了。首先讲解 main 区域的内容元素，它里面的内容形式比较多样，有标题、段落、列表、图片等，似乎一下子理不清头绪，但是只要放下急功近利的心态，静下心来慢慢的去解决它们，到最后你就会觉得不过如此而已。先来看看左侧内容区上半部分的标题和段落部分怎么实现。
标题和段落我们应该用什么标签作为容器呢？有时候我们会把一些简单的问题想得很复杂，比如先入为主的以为每块内容都应该定义DIV作为容器。事实上很多的HTML标签都具有容器的功能，只不过如果对CSS的外观控制功能不是很有信心的话，就会在这些问题上犹豫起来。事实上可能因为初学者接触过的CSS实例不多，一时也无从体会CSS到底可以帮助我们做什么，个人认为在理解能力范围之内，新手也可以先花点时间学习一些CSS实例，最好是纯CSS实现的一些效果。
回主题，那么我们应该在什么标签中放置标题呢？当然就是H1或者H2这一系列的标签了；那么段落呢？当然就是P标签了。那么只要在main容器的起始标签之后加上如下HTML代码就可以了：
About ximicc.com
相信大家都能体会到DIV+CSS的热潮已经越来越高了...
基本的轮廓就已经出来了：
对照最终效果图，首先修改标题文本的字体、字号和颜色：
#main h2{
color:#690;
font-size:24px;
font-family:Arial, Helvetica, sans-serif;
}
接下来调整一下段落文本的行高：
#main p{
line-height:22px;
}
不要觉得这个行高的设置是多余的，一张网页优秀与否，差别往往就体现在这些细节上，吸引浏览者最重要的因素固然是页面中内容的质量，但视觉上的舒适度也有着其影响力，如果能从用户体验的角度出发去对细节进行一些完善和优化，小小的工作量就能让浏览者有赏心悦目的感觉，何乐而不为呢？有篇文章《用CSS设计垂直间距优化文字界面》朋友们不妨参考一下。
针对标题和文本的CSS设置暂时就这么多，在最终示例页面的段落文本中还有一个红色的链接，它的样式没有体现在我们的CSS文件中，而是直接在HTML代码里用行间样式的形式定义的，不熟悉的朋友可以观察一下行间样式的格式：
本教程中对此就不多加说明了，格式比较简单，如果有多个CSS属性要设置的话相互之间用分号间隔。但是注意行间样式对某些CSS属性的缩写支持不是很好，比如margin属性不支持四个方向上的缩写赋值，你可能要用margin-top、margin-left等属性来进行分别设置。虽然行间样式表的优先级是最高的，但是不推荐经常使用。
段落元素之后紧跟着的是一个带有标题的列表，列表的标题我们使用span标签，没有特别的用意，真要说的话就是体现一下同一种类型的元素我们还是可以用不同的标签作为容器的。HTML中在段落的结束标签之后添加如下代码：
What is new
如果仔细学习过之前的教程内容，相信现在对这段代码应该不会不理解了。首先我们参照最终效果，对span中的标题文本进行一些基本的样式定义：
.subhead{
color:#690;
font-size:14px;
font-weight:bold;
background:#F4F7EA;
}
预览效果：
离预期的效果似乎还差很多，我们一个一个来调整。首先就是它的宽度问题，我们需要让它的背景色横向填满外围容器的宽度，而这里由于span是内联级对象，其宽度只会自适应到刚好容纳下它里面的文本内容，所以我们可以将它强制转换为块级元素：
.subhead{
... ...
display:block;
}
然后需要对一些距离和间隔进行设置，主要是标题文本与span容器边缘之间的距离、标题与其上面段落之间的间隔，针对这两个问题我们分别在CSS中添加如下规则：
.subhead{
... ...
padding:5px 3px;
margin:20px 0px 0px 0px;
}
OK，不知不觉写了这么长，关于列表样式的定义我们放到下节教程。最后稍微扯点家常，虽然DIV+CSS越来越为人熟知，但个人觉得初学者真正开始学习CSS之前，最好先花点时间去问一下自己：为什么要学DIV+CSS？你准备把它用在哪里？事实上做一张简单的网页的话，用简单而直接的表格来来布局也无可厚非。Web标准并不意味着抛弃表格，如何在DIV和表格之间权衡，朋友们不妨花点时间参考一下《CSS VS Table – 你必须要知道的！》。