模版制作教程7

	模版制作教程7 然后是大标题字的美化。我们使用.bigtitle标签。CSS代码如下： .bigtitle {  /* 大标题字层的CSS定义。 */ text-align: center; /* 字体居中。 */ width:200px; /* 层宽。 */ height: 24px; /* 层高。 */ font: 14px; /* 字体定义，14象素。 */ color: #333; /* 字体颜色。 */ padding: 2px 0px 0px 0px;  /* 层内边距，距离上面是2px。 */ background: url("sidebartitle.png") no-repeat top center; /* 本层的背景定义，不重复，位置：上 中。 */ } 　　写几个字（Calendar | 日　历），看效果： 点击这里预览 http://skin.midicn.cn/jc/mbjc/htm/index9.htm 　　然后就是这些栏目的内容定义了。(下面的标签我都在$前面加了个"_",要不和本BLog标记起冲突了.) 日历（$show_calendar_$） 最新日志（$show_newblog_$） 最新回复（$show_comment_$） 最新留言（$show_newmessage_$） 登陆口（$show_login_$） 搜索（$show_search_$） BLOG信息（$show_info_$） 友情连接（$show_links_$） 　　能用的几乎都在上面了。顺序就这么排吧，无所谓的。 　　接下来的事情就是定义这些小模块了~~~ 1.日历的定义： 　　先随便找个BLOG查看其源文件得知日历的代码如下： <div id="calendar"><table width='100%'> <caption>August 2005</caption><tr> <th abbr=Sunday>日</th> <th abbr=Monday>一</th> <th abbr=Tuesday>二</th> <th abbr=Wednesday>三</th> <th abbr=Thursday>四</th> <th abbr=Friday>五</th> <th abbr=Saturday>六</th></tr><tr> <td align=center> </td> <td align=center>1</td> <td align=center><a href='/blog/user1/1243/archives/2005/118466.shtml'>2</a></td> <td align=center>3</td> <td align=center>4</td> <td align=center>5</td> <td align=center>6</td> </tr><tr> <td align=center><a href='/blog/user1/1243/archives/2005/120832.shtml'>7</a></td> <td align=center>8</td> <td align=center>9</td> <td align=center><a href='/blog/user1/1243/archives/2005/122376.shtml'>10</a></td> <td align=center>11</td> <td align=center>12</td> <td align=center>13</td> </tr><tr> <td align=center>14</td> <td align=center>15</td> <td align=center>16</td> <td align=center><a href='/blog/user1/1243/archives/2005/126279.shtml'>17</a></td> <td align=center><a href='/blog/user1/1243/archives/2005/126831.shtml'>18</a></td> <td align=center>19</td> <td align=center>20</td> </tr><tr> <td align=center>21</td> <td align=center><a href='/blog/user1/1243/archives/2005/128795.shtml'>22</a></td> <td align=center>23</td> <td align=center>24</td> <td align=center>25</td> <td align=center><a href='/blog/user1/1243/archives/2005/131991.shtml'>26</a></td> <td align=center>27</td> </tr><tr> <td align=center>28</td> <td align=center>29</td> <td align=center><a href='/blog/user1/1243/archives/2005/135178.shtml'>30</a></td> <td align=center>31</td> <td align=center></td> <td align=center></td> <td align=center></td> </tr> </table> </div> 　　分析出日历是一个大表格，放在#calendar层里面，月份使用caption定义，星期几使用#calendar th定义，而日期使用#calendar td定义，写过日记的日期是连接。遗憾的是没有当前日期的定义。 　　这样，我们就可以设计出各种的样式类美化这个日历表格了~把上面的代码考到网页里bigtitle层的下面，现在的模版代码是： <link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css"> <div id="head"></div> <div id="content"> <div id="left"></div> <div id="right"> <div class="bigtitle">Calendar | 日　历</div> <div id="calendar"><table width='100%'> <caption>August 2005</caption><tr> <th abbr=Sunday>日</th> <th abbr=Monday>一</th> <th abbr=Tuesday>二</th> <th abbr=Wednesday>三</th> <th abbr=Thursday>四</th> <th abbr=Friday>五</th> <th abbr=Saturday>六</th></tr><tr> <td align=center> </td> <td align=center>1</td> <td align=center><a href='/blog/user1/1243/archives/2005/118466.shtml'>2</a></td> <td align=center>3</td> <td align=center>4</td> <td align=center>5</td> <td align=center>6</td> </tr><tr> <td align=center><a href='/blog/user1/1243/archives/2005/120832.shtml'>7</a></td> <td align=center>8</td> <td align=center>9</td> <td align=center><a href='/blog/user1/1243/archives/2005/122376.shtml'>10</a></td> <td align=center>11</td> <td align=center>12</td> <td align=center>13</td> </tr><tr> <td align=center>14</td> <td align=center>15</td> <td align=center>16</td> <td align=center><a href='/blog/user1/1243/archives/2005/126279.shtml'>17</a></td> <td align=center><a href='/blog/user1/1243/archives/2005/126831.shtml'>18</a></td> <td align=center>19</td> <td align=center>20</td> </tr><tr> <td align=center>21</td> <td align=center><a href='/blog/user1/1243/archives/2005/128795.shtml'>22</a></td> <td align=center>23</td> <td align=center>24</td> <td align=center>25</td> <td align=center><a href='/blog/user1/1243/archives/2005/131991.shtml'>26</a></td> <td align=center>27</td> </tr><tr> <td align=center>28</td> <td align=center>29</td> <td align=center><a href='/blog/user1/1243/archives/2005/135178.shtml'>30</a></td> <td align=center>31</td> <td align=center></td> <td align=center></td> <td align=center></td> </tr> </table> </div> <div class="bigtitle">New BLog | 日　志</div> <div class="bigtitle">New Reply | 回　复</div> <div class="bigtitle">New message | 留　言</div> <div class="bigtitle">User Login | 登　陆</div> <div class="bigtitle">Search | 搜　索</div> <div class="bigtitle">BLog Info | 信　息</div> <div class="bigtitle">My Links | 收　藏</div> </div> </div> <div id="footer"></div> 　　我们开始设计CSS代码： #calendar{  /* 日历层定义。 */ width:195px;  /* 日历层宽。 */ } #calendar caption {   /* 定义日历顶部月份。 */ font:11px 'Century Gothic', Arial, Helvetica, sans-serif;  /* 日历顶部月份的字体大小，字体。 */ } #calendar table { border-collapse: collapse; /*合并表格相临边框*/ } #calendar th{   /* 定义星期 */ font: normal 12px;   /* 字体正常显示，OBLog系统默认显示粗体，大小12象素，中文字最小12象素。 */ } #calendar td {  /* 定义日期 */ font-size: 10px;   /* 字体10px。 */ } #calendar td a {   /* 日历内日期链接样式 */ display:block; /* 日历内日期呈块级元素 */ background-color: #C1E27D;  /* 日历内日期背景色 */ width:16px;  /* 日历内日期宽 */ height:10px; /* 日历内日期高 */ } #calendar td a:hover{   /* 鼠标拖过日期的链接样式 */ background-color: #CF6;  /* 背景色 */ color: #333;  /* 字体色 */ } 　　完成，看看效果： 点击这里预览 http://skin.midicn.cn/jc/mbjc/htm/index10.htm