那我们该怎么来用DIVCSS布局百度搜索页呢？我们分析得到：这也是一张HTML网页，也得有基本的HTML结构，考虑到标题、正文和下面的链接以及百度快照分别在不同的行，因此可以分将每个单独的结果分为3个段落<p>，并分别加上不同的CSS样式。如下所示：

<p class="title">建站教程网(www.freemoban.com)-为学习HTML,DIV+CSS教程,网站开发制与建设提供动力</p>
<p class="content">建站教程网(www.freemoban.com)提供免费的原创HTML程，CSS样式，DIV+CSS学习教程，CSS网页布局实例教程，为每个人学习网站开发制作和网站建设提供最强动力。</p>
<p class="link">www.freemoban.com/ 2012-10-2 - 百度快照</p>

另外考虑到标题部分是有链接的，因此需要用到HTML语言的<a>标记了，并且显示的关键字样式必须与其他普通文字不同，因此"freemoban"需用<span>标记分离，"百度快照"也同样要进行分离，并标上各自的标记类型，如下所示：

<p class="title"><a href="http://www.freemoban.com/">建站教程网(www.<span class="search">freemoban</span>.com)-为学习HTML,DIV+CSS教程,网站开发制与建设提供动力</a></p>
<p class="content">建站教程网(www.<span class="search">freemoban</span>.com)提供免费的原创HTML程，CSS样式，DIV+CSS学习教程，<br/>CSS网页布局实例教程，为每个人学习网站开发制作和网站建设提供最强动力。</p>
<p class="link">www.<span class="search">freemoban</span>.com/ 2012-10-2 - <span class="quick">百度快照</span></p>

下面就具体对每个段落的字体和文字大小、段落与段落间的距离和标题与内容之间的距离等，代码如下：

p{
 margin:0px;
 font-family:Arial; /*定义所有字体为Arial*/
}
p.title{
 color:#1111EE; /*标题颜色*/
 padding-bottom:0px;
 font-size:16px; /*文字大小为16像素*/
}
p.content{
 padding-top:3px; /*标题与内容之间的距离为3像素*/
 font-size：13px; /*内容字体大小*/
 line-height:18px;
}
p.link{
 font-size:13px;
 padding-bottom:25px;
 color:#44BB44; /*网址显示颜色*/
}
span.search{
 color:#DD2222; /*关键字显示颜色*/
}

最后设置好百度快照的颜色和下划线就可以出现完整的效果了。

span.quick{
 color:#808080; /*快照显示颜色*/
 text-decoration:underline; /*设置下划线*/
}
 

通过以上的HTML和DIVCSS样式的设置，就基本上实现了静态百度搜索结果页的一个实例了。怎么样？快点动手一起写代码吧。