[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
很清楚，一个Foot标签的DIV和两个<p>。通过前面的学习我想大家应该了解怎么做了。其实一般这个不需要我们设置，基本的字体大小什么的都默认已经定义了。但我们可以要在底部加一些图片之类的，利用padding、margin等属性控制文字的位置，文本的左对齐、右对齐等等。这里要了解的一点是对<p>的控制，程序里面用了两<p>字段，可能在设置边框或补白的时候出现分行的问题。
五、细节表现
5.1 Pjblog默认模块
我们知道Pjblog的很多功能是有模块构成的，而程序默认的模块我们在做Skin的时候为了通用性也必须要注意定义的。
5.1.1 日历式样
同样我们要来了解它的结构。
日历它是一个侧栏模块。我们前面说了模块是包含在侧栏的sidepanel面板里的，然后给各自的模块一个唯一的ID。在这里日历的ID就是Side_Calenbar。那我们就可以对这class为sidepanel、ID为Side_Calendar的DIV进行定义了。对于class、ID 是怎样定义式样的我们前面也说了在这里再复习一下。前者是类选择符，表现形式为：.类属性。后者是ID选择符，表现形式为：#ID名称。以后就不再重复了。一般为了Skin的统一协调是对sidepanel进行统一定义的，只有特殊式样的时候才定义这个ID为Side_Calendar的DIV。当然这个DIV里面和其他侧栏面板一样同样有一个Class为Ptitle的H4标签、一个Class为Pcontent的内容DIV和一个Class为Pfoot的底部DIV。
日历的主要内容是在Pcontent里的一个ID为Calendar_Body的DIV。这里面一共保护了7行。一个ID为Calendar_Top的DIV里面显示的就是XXXX年XX月和两个方向按钮，一个ID为Calendar_week的DIV里面显示的是星期， 还有5个都是ID为Calendar_Day的DIV这里就是具体的日期了。
我们再来看看进一步的结构，充分的了解结构才能做好Skin。
Calendar_Top:除了内容外还有ID为LeftB和RightB两个DIV，分别控制两个方向按钮。我们可以自定义按钮的图片
Calendar_week:里面是一个<ul><li></ul></li>的结构其中第一个也就是星期天“日”外面套了一个<font>程序默认定义了红色。我们通过导航的了解知道了这个结构要使它横向排列必须用Float，要不见点必须用liststyle:none;
Calendar_Day:这里面的结构和Calendar_week是一样的，不同的是li里面都包含超链接<a>,对不同情况的日期做了不同的Class。日期选中（.click）、今天（.today）、非本月日期（.otherday）、本日存在日志（.haveD）、今天存在日志（.DayD）
那我们来看代码，日历的式样表在模板的typography.css里面。因为CSS有继承的特性，因此我们最好按照默认式样的顺序书写代码。
/*日历式样－－－对整个框架进行定义，这里定义的内容是会继承的下面的。也就是说如果下面的不另外声明就表现这里定义的内容*/ #Calendar_Body{margin:5px 10px 5px 0px;font-family:arial;line-height:120%} /*顶部－－－对顶部定义式样，这里定义了一下文本居中*/ #Calendar_Body #Calendar_Top{padding:0px 2px 0px 2px;height:18px;text-align:center;font-weight:bold;} /*按钮左－－－按钮图片（我这里用了颜色背景代替）*/ #Calendar_Body #Calendar_Top #LeftB{background:#333;width:9px;height:16px;float:left;cursor:pointer;overflow:hidden;} /*按钮右－－－和上面的一样都要注意float*/ #Calendar_Body #Calendar_Top #RightB{background:#333;width:9px;height:16px;float:rightright;cursor:pointer;overflow:hidden;} /*星期－－－这里要注意的是浮动（float）和宽度（width），宽带是用的%，这样做是为了适应个个Skin*/ #Calendar_Body #Calendar_week{text-align:center;height:20px;padding:0px 0px 0px 2%;font-weight:bold;} ul.Week_UL{display:inline;list-style:none;margin:0px;padding:0px;} ul.Week_UL li{display:inline;margin:3px 0px 2px 0px;padding:0px;float:left;color:#003;width:14%;} /*日期－－－日期的整体使用这里定义了li使之横向排列同时注意宽带也是和上面一样用的%*/ .Calendar_Day {text-align:center;height:20px;padding:0px 0px 0px 2%;color:#9c1c1c} .Calendar_Day ul.Day_UL{display:inline;list-style:none;} .Calendar_Day ul.Day_UL li{display:inline;float:left;width:14%;} /*日期超链接－－－可以定义鼠标式样等等，包括下面的个个项完全可以自由发挥，不过要注意的是宽带、高度不需要再定义了。*/ .DayA a{cursor:default;padding:2px 0px 3px 0px;display:block;font-size:11px;height:13px;color:#9c1c1c} .DayA a:link,.DayA a:visited{color:#06c;} .DayA a:hover{color:#f0821d;background:#FFBFBF} /*选中日期*/ .DayA a.click{cursor:default;background:#9c1c1c;font-weight:bold;} .DayA a.click:link,.DayA a.click:visited{cursor:pointer;font-weight:bold;text-decoration:none;color:#fff} .DayA a.click:hover{text-decoration:none;color:#336633;} /*今天*/ .DayA a.today{cursor:default;color:#9c1c1c;border:1px solid #9c1c1c;background:#fff;} /*非本月日期*/ .DayA a.otherday{cursor:default;color:#fff;text-decoration:none;/*visibility:hidden*/} .DayA a.otherday:link,.DayA a.otherday:visited{cursor:default;color:#eee;font-weight:bold;} .DayA a.otherday:hover{cursor:default;color:#9c1c1c;font-weight:bold;} /*本日存在日志*/ .DayA a.haveD{cursor:pointer;} .DayA a.haveD:link,.DayA a.haveD:visited{color:#9c1c1c;font-weight:bold;} .DayA a.haveD:hover{color:#9c1c1c;} /*今天存在日志*/ .DayA a.DayD{cursor:pointer;} .DayA a.DayD:link,.DayA a.DayD:visited{border:1px solid #9c1c1c;background:#fff;font-weight:bold;text-decoration:none;color:#9c1c1c} .DayA a.DayD:hover{color:#9c1c1c;text-decoration:underline;border:1px solid #9c1c1c;background:#fff;font-weight:bold;}
5.2 按钮、信息框和输入框
都被指着鼻子说了，实在是不好意思再偷懒了。由于前段时间工作的变动，以及自己的懒惰
以后说的内容可能影响的地方不大，都是对一些细节方面的表现。前一节我们说了默认模块日历的编排，这最重要的就是要学习和了解CSS的继承性，其他默认模块里面其实就是一些超链接，其他没什么特别的。
首先我们要了解这一节里面我们要对哪些地方的式样进行定义。内容有文本输入框（用户名）、密码输入框（密码）、按钮、置顶日志按钮、日志分类图标、信息框（确认、报错等等）。而这些部位有些内容是在特定的时候出现的往往一些朋友刚开始做Skin的时候不注意这些地方，使得模版不够完美。这些内容Pjblog一般都是用类选择符来定义的，什么是类选择符我们在第四章第一节里面做了简短的说明。
在CSS里面你只要选择了一个元素那你可以把这个元素看成或认为这个元素就是一个BOX。在第二章第二节里面有BOX的Flash模型，你可以尽情的对他们定义发挥你的创意。其中输入框（.inputBox）、密码输入框（.userpass）、按钮（.userbutton）、分类图标（.CateIcon）。这些我们可以定义他们的背景（background）、边框等等。重要的是他们还具有伪类（什么是伪类，在上面提供下载的CSS2.0手册里面有详细的说明），这样我们就可以做出鼠标在和不在的时候的式样。对于分类图标你还可以利用BOX的display属性定义他是否需要显示。还有就是置顶按钮，我们知道置顶按钮有两种状态，一个就是打开的时候的状态（.BttnC），还有一个就是关闭的状态（.BttnE），这样我们就可以给两个不同的图片作为按钮了。在当前我的这个Skin上面做了以下定义：