怎么做出这样的效果，以下代码分享

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{background-color:#CCC;border:1px double black;height:500px;}

#header{background-color:#CCC;border:1px double black;height:150px;width:70%;margin:20px auto;}

.demo{background-color:#CCC;border:1px double black;height:40px;width:70%;margin:35px auto;line-height:40px;padding-left:8px;}

#body{background-color:#FFF;border:1px double black;height:250px;width:70%;margin:20px auto;}

.demo1{background-color:#FFF;border:1px double black;height:40px;width:70%;margin:20px auto;line-height:40px;padding-left:8px;}

</style>

</head>


<body>

&lt;html&gt;

<div id="header">

&lt;head&gt;

<p class="demo">&lt;title&gt;页面标题&lt;/title&gt;</p>

&lt;/head&gt;

</div>

<div id="body">

&lt;body&gt;

<p class="demo1">&lt;h2&gt;这是一个标题&lt;/h2&gt;</p>

<p class="demo1">&lt;p&gt;这是一个段落。&lt;/p&gt;</p>

<p class="demo1">&lt;p&gt;这是另外一个段落。&lt;/p&gt;</p>

&lt;/body&gt;

</div>

&lt;/html&gt;

</body>

</html>