语帝王――帝王之语

以前一直装一个lxblog5.1.5，以后终究是要用5.3，终究是需要增加一些模板风格 |*WAVKj6  
由于一直看不到lxblog的模板分析档案，以后不管是自己还是别人，改动模板总是很麻烦 PPV9sdgt*  
于是今天下载了lxblog5.3，研究一下它的模板，写一个记录，以后备用 {4&/a1XP  
（以后将逐渐更新） (_ErQVF8  
以下仅分析用户blog的模板，blog系统的模板暂不考虑 t;MQ *~.E  
1、目录 PZP$ex +  
5.3的模板目录相对5.1.5，有了很大改进，用户blog的模板全部放到了theme文件夹下面 $8HPH1#+  
同时以模板名称命名目录，目录下面包含images（放置图片）、template（放置htm模板以及style.css样式表）以及该模板的预览图片demo.png和该模板的信息文件info.txt #mkIZc^1k  
2、info.txt文件 2VB{8(?@  
该文件格式很简单，如下 )>7[Kd0N  
name:模板名称 rbJA<4zw  
author:作者 v:R%5WwD  
date:制作时间 ,<=vS2K  
仅仅三行而已 :
Md$ZovVH  
3、demo.png (oOBJoF  
模板的缩略图，用来方便用户选择模板的时候，可以一眼看个大概 A|Rbcx*t  
4、images目录 R6^F$S>O  
放置该风格的所有图片 4 I@/);Z  
5、template目录 k)G6gt  
该风格模板的所有htm文件，以及style.css样式表 "Nq2^8,  
一个最完整的风格应该包含的文件如下 eM 1qwgIo
 
blog.htm //各篇日志的模板页面 1z'G`Jv/O  
comment.htm //ajax无刷新评论模板（每个日志下面的评论，如果有评论，就是用这个模板） yM*;dp  
file.htm //文件的详细页面 F;E{@vQ){  
footer.htm //模板底部 rcBA{f)_NS  
goods.htm //商品的详细页面 4zm`hJzD  
header.htm//模板头部 %2$ZE83mz  
list_blog.htm //日志列表页面 )1yLa+)*  
list_bookmark.htm //书签列表页面 Hvk]q  
list_file.htm //文件列表页面 &Y__1DSAt  
list_gbook.htm //游客留言列表页面 ..s $KZGcr  
list_goods.htm //商品列表页面 I^UPEul*  
list_music.htm //音乐列表页面 ]=v1h+9  
list_photo.htm //相册列表页面 QHHC#$ X  
list_team.htm //朋友圈列表页面 'C6RJq>U  
main.htm //各个日志、相册、商品、音乐、文件的最外框架页面（只含最外层一个div标签） t-w4A~G.&  
music.htm //音乐的详细页面 r9{eF Iy  
photo.htm //相册的详细页面 mXa?ZB  
side.htm //左侧竖栏的最外框架模板（一个div以及一个JavaScript） p<?0_?F  
side_archive.htm // 左侧竖栏存档列表模板文件 2FAj(9Kb/}  
side_calendar.htm // 左侧竖栏日历模板文件 .:uu{[*tC  
side_comment.htm // 左侧竖栏评论模板文件 ` Ef|<j\  
side_custom.htm // }JC^4Ydn  
side_icon.htm // 左侧竖栏博主资料模板文件 ]\oUijir6  
side_info.htm // 左侧竖栏个人统计模板文件 *a
)k,E  
side_lastvisit.htm // 左侧竖栏最近访问来客模板文件 O&~$+((*^  
side_link.htm // 左侧竖栏友情链接模板文件 3
~K <WYQ'  
side_notice.htm // 左侧竖栏博客公告模板文件 E,G:4  
side_player.htm // 左侧竖栏播放器模板文件 3mmd%'}w  
side_search.htm // 左侧竖栏搜索框模板文件 0:Ez!|0  
side_userclass.htm // lFg5(fX;,|  
style.css //样式表文件 xuB-n]<%  
若你使用的风格，缺少某个文件，系统将自动去theme\default\template里面读取（这就是为何要保证系统默认风格的完整性） y22^FV)  
5、style.css文件分析 M# 8Y
?B  
先来一些css的基础知识，如果你做风格，这些是一定要知道的，如果再不懂，你就只能先去恶补一下了 AE/> G+(  
选择符 nf"Q%2{T  
任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如， ! NafB"  
[pre]P { text-indent: 3em }[/pre]当中的选择符是P。 wQcTG9J|$d  
类选择符 S-${/ew_l  
单一个选择符能有不同的CLASS(类)，因而允许同一元素有不同样式。例如，一个网页制作者也许希望视其语言而定，用不同的颜色显示代码 : C~} )0NNT  
code.html { color: #191970 } !>J[?C  
code.css { color: #4b0082 } r)q2it43  
以上的例子建立了两个类，css和html，供HTML的CODE元素使用。CLASS属性是用于在HTML中以指明元素的类，例如， M+\,Gb  
<P CLASS=warning>每个选择符只允许有一个类。例如，code.html.proprietary是无效的。</p>类的声明也可以无须相关的元素: Qve7=[  
.note { font-size: small }在这个例子，名为note的类可以被用于任何元素。 uhDh~5zK(  
一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small，但如果网页制作者决定改变这个类的样式，使得它不再是小字体的话，那么这个名字就变得毫无意义了。 ~tp *?C^r  
ID 选择符 ;K`
dt5  
ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如，ID选择符可以指定如下: ah~-E  
#svp94O { text-indent: 3em }这点可以参考HTML中的ID属性: ;Re/w[(x^  
<P ID=svp94O>文本缩进3em</P> mtZv!:Ilq#  
关联选择符 &`iy^R  
关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。例如， 以下的上下文选择符 <VT}  
P EM { background: yellow }是P EM。这个值表示段落中的强调文本会是黄色背景；而标题的强调文本则不受影响。