>>> 下载【朝花夕拾 – DIV+CSS布局实战系列视频教程】图片素材

>>> 点击浏览 – 朝花夕拾系列视频教程 – 最终效果图

第二部分的教程为止，我们已经基本搭建好了页面整体的布局框架，当然进一步的版块布局规划我们会在添加内容的过程中再行考虑并实现。现在开始我们可以着手在网页中添加具体的内容了，首先是页面顶部的网站标题，它包含了一张背景图片和若干文本：

可能在一些博客类网站中这个版块称之为为Blog Name或Blog Titile更妥当，我们可以把网站名称、网址、一句话简介甚至关键字等信息放在里面。注意在我们的例子中，由于存在圆角的关系，这里的背景图片并不只是文本左侧的对话气泡图形，而是包含左右圆角的一整条，这样的话可能在图片体积上稍微有所增加，但却可以大大简化我们的HTML结构：

文本我们放置在H1标签中，当然如果有经验的话也可以使用其它标签作为容器，这里我也只是很习惯的使用了H1，可能有点基于SEO方面的理由，但说实在的，我没想过把这些知识在这里引入进来，有兴趣的朋友可以自己去网络上查阅相关的资料，包括图像替换文本技术等等。H1元素的外围定义了一个指定ID的DIV容器，真计较起来的话，这个DIV也可以省略掉，在这里我只是为了补充一些知识点，让刚入门的初学者能尽量多了解点CSS的属性和用法罢了，我们不能学得不全面还在那里妄谈什么活学活用是吧…现在来看一下背景图片的信息：

宽度刚好跟wrap容器一致，当然这并不是什么巧合…所以ID为topbar的DIV容器我们就不需要设置宽度了，在它的CSS里我们除了设置背景属性之外，只要再定义一下高度就可以了：

#topbar{
height:48px;
background:url(images/topbg.jpg) no-repeat;
}

在浏览器中预览一下效果，大致是如下模样：

接下来的工作就是处理文本的样式了，对照一下最终效果图，除了文本的颜色和字体之外，最主要还要控制它的位置和大小写。这几个属性在CSS中控制起来不是很难，只要你知道这些属性的存在及赋值方式就差不多了：

#sitename {
color:#690;
font-size:24px;
padding:15px 5px 0px 75px;
text-transform:uppercase;
}

填充属性padding中的四个值，最重要的是第四个，就是控制文本左侧间隔空间的，这个空间用于容纳背景图中的对话气泡图形，其它几个值的话依照浏览器中的预览效果稍作调整修改，看着大致位置适当就可以了。最后我们来看一看H1里面SPAN标签中的字符串：

这串字符我们一般称之为HTML转义符，就是一些特殊符号在代码中的呈现方式，经过解析之后，上图中的字符串在浏览器中表现的就是数字键7上面的那个符号。为什么要把它单独放在SPAN标签中？因为它的颜色与周围的文本不一样，我们可以在CSS中对SPAN定义样式来改变其字体颜色：

#sitename span {
color:#000;
}

注意上面CSS规则中的选择符书写方式，这种基于HTML元素树型层级关系引出的选择符组织方式，我们可以称之为继承选择符或上下文选择符，选择符部分不同的标签之间用空格分隔，我们可以简单的把这些空格翻译成”中的”，如”#sitename中的span元素”。