[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
看到了，哈哈。整个结构是不是好像成型了。这里我们定义了#header。
#header {
width:816px;宽度，这里也就是图片的宽度
height:110px;高度，这里也就是图片的高度
text-align:left;内容左对齐，因为我们以后里面的Blog名字是要靠左的。
background:url(skins/dnxh10/top.jpg) no-repeat;背景路径，不重复
}
底部的定义也一样。就不在罗嗦了。
PS:这里的<div>因为里面没内容，而设置的高度做演示用的。
4.3顶部式样
顶部的美化很重要，因为用户打开你的Blog的时候首先进入眼帘的就是顶部。做顶部式样的时候你要知道顶部式样是在什么地方，他的结构是怎样的。顶部式样就是Header和他里面的内容，结构我们可以通过上面的Flash模型来了解。我们还是看代码：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
不知道为什么这段不能加式样，可能是和页面的代码一样的缘故吧。那我们就不加，我们先来分析一下结构，看每个元素的作用是什么。我们先设置一下#header的式样，上面我们已经说过了。
#container #header{width:816px;height:110px;background: url(top.jpg) no-repeat;text-align:left;}
#blogname就是我们的Blog的名字，他包含了#blogtitle子元素。我们设置的时候先设置#blogname再设置#blogtitle。
#container #header #blogname{font-size:22px;color:#999;font-weight:bold;float:left;padding:15px 0 0 25px;}
#container #header #blogname #blogTitle{display:none}
在这里我们设置了#blogname的字体大小、颜色、粗体、和浮动左、补白的距离。而blogtitle设置了不显示。
再往下看，看到了#left和#right两个元素，看命名的意思我们就知道了。那是#header两头的式样，我们可以靠float:left和float:right来实现，在这个式样里我们不需要设置。这个主要可以实现圆角之类的#header。
#menu是菜单项，一般我们看这里的时候比较糊涂，再加上含有float属性，运用起来比较难以驾驱。我们来分析一下：
#menu是个整体式样。里面包含了一个<ul><li></li></ul>的结构。关于项目列表,而li里面又有绑定了式样，分别是menuL、menuA、menuDIV、menuR分别的作用就是menuL利用Float:left;控制菜单左端的式样，menuDIV控制菜单项目之间的式样也就是分隔符，而menuR就是利用float:right;控制菜单右端的式样。
#container #header #menu{float:right;margin:35px 15px 0 0}
#container #header #menu ul{}
#container #header #menu ul li{float:left;height:20px;list-style:none;}
.menuL{}
.menuR{}
.menuDiv{width:1px;height:20px;background:#999;margin-right:15px;margin-left:15px;}
li里面的float:left;是实现横向菜单的必要条件，list-style:none;是消除列表前的小圆点的。
仅仅就这些式样顶部还是不完美的。我们要设置菜单的链接式样。也就是我们刚才少一个没说的menuA的式样。
.menuA:link,.menuA:visited{text-align:center;text-decoration:none;color:#cc3300;line-height:19px;height:15px;}
.menuA:hover{text-decoration:none;}
:visited是访问后的式样，:link是通常的式样，:hover是鼠标接触的式样，其实还有个:active（在鼠标点击与释放之间发生的事件时的样式）这里有个书写的顺序“LoVe/HAte”（爱/恨）链接规则：Link, Visited, Hover, Acitve。具体参数可以参照手册。
4.4内容式样
内容式样里包含的元素比较多，变换也比较多，我们看看到底要做的是那些式样。首先是内容#Tbody，这个里面在首页的时候包含的是主内容#mainContent和工具条也就是侧栏#sidebar。而在登陆页的时候里面就是登陆框，注册页，还有信息提示出错，恭喜通过什么这些就是消息框式样#MsgContent。如果你看过以前的式样文件里的Layout.css的你可能会发现一个问题，我上面说的这些标签都是带#号的也就是ID选择符，而上面没有提及是.开头的是类选择符，也就是class="*"。为什么会有这样的命名方式，我们知道Pjblog是一个模块化的程序。我们可以自己自定义侧栏模块和内容模块，也就是说侧栏工具条里的若干个工具箱里的ID（模块标识）是可以自己定义名字的，内容里的模块也是如此。这就为我们的模板创造了更多式样的可能。你可以这样理解，首先我们用了统一的类class，再个我们又给每个工具箱定义了唯一的一个ID，那我们通过这两组合就可以定义每个工具箱的式样了。形式如下：
我们从侧栏开始，侧栏的结构很清晰。一个#sidebar主元素，里面包含了#sidebar-topimg、#innersidebar、#sidebar-bottomimg三个子元素，很明显#sidebar-topimg、#sidebar-bottomimg是侧栏的顶部和底部的式样，而#innersidebar里面是放工具箱.sidepanel的。工具箱.sidepanel又作为一个主元素，里面包含了.Ptitle标题、.Pcontent内容面板、.Pfoot底部。看代码：
