语帝王――帝王之语

以前一直装一个lxblog5.1.5，以后终究是要用5.3，终究是需要增加一些模板风格 LS=.A02:  
由于一直看不到lxblog的模板分析档案，以后不管是自己还是别人，改动模板总是很麻烦 L*;6bv]M  
于是今天下载了lxblog5.3，研究一下它的模板，写一个记录，以后备用 Zu{aco  
（以后将逐渐更新） W=Pg<  
以下仅分析用户blog的模板，blog系统的模板暂不考虑 eB\l@X}f-  
1、目录 @
+cW K  
5.3的模板目录相对5.1.5，有了很大改进，用户blog的模板全部放到了theme文件夹下面 PV|k_y%3Uh  
同时以模板名称命名目录，目录下面包含images（放置图片）、template（放置htm模板以及style.css样式表）以及该模板的预览图片demo.png和该模板的信息文件info.txt YBdc*~if  
2、info.txt文件 jruJhH$u  
该文件格式很简单，如下 p=Xd$F7  
name:模板名称 DEAy[*r P!  
author:作者 !
yOpQF2  
date:制作时间 Sjq)+P#  
仅仅三行而已 :xJ0$!j@  
3、demo.png gwAjmv  
模板的缩略图，用来方便用户选择模板的时候，可以一眼看个大概 \)H-}f,  
4、images目录 :g#KeU'  
放置该风格的所有图片 [,!l$zz  
5、template目录 G[lv
opV\  
该风格模板的所有htm文件，以及style.css样式表 +;OkxADa|  
一个最完整的风格应该包含的文件如下 zhax4H8{  
blog.htm //各篇日志的模板页面 J GmL 7ISf  
comment.htm //ajax无刷新评论模板（每个日志下面的评论，如果有评论，就是用这个模板） m`,L2Cp%  
file.htm //文件的详细页面 ~0*?U<{  
footer.htm //模板底部 F{N|C;.J  
goods.htm //商品的详细页面 Fiowq//YO  
header.htm//模板头部 j#inFRr]Z  
list_blog.htm //日志列表页面 DtlpBvxi  
list_bookmark.htm //书签列表页面 fef[D(<X  
list_file.htm //文件列表页面 )?*
YN  
list_gbook.htm //游客留言列表页面 [yY4+0u}  
list_goods.htm //商品列表页面 n`ocR")  
list_music.htm //音乐列表页面 VuUL9R  
list_photo.htm //相册列表页面 e{[H5Qf  
list_team.htm //朋友圈列表页面 cx:0dCA -  
main.htm //各个日志、相册、商品、音乐、文件的最外框架页面（只含最外层一个div标签） (\0%g;.C  
music.htm //音乐的详细页面 |2VZdbRb  
photo.htm //相册的详细页面 "@8"30  
side.htm //左侧竖栏的最外框架模板（一个div以及一个JavaScript） rQX@vOg  
side_archive.htm // 左侧竖栏存档列表模板文件 8GU2\5pO  
side_calendar.htm // 左侧竖栏日历模板文件 HtZIn{nR  
side_comment.htm // 左侧竖栏评论模板文件 <Q#|M,2BLt  
side_custom.htm // gi}i;`gpa  
side_icon.htm // 左侧竖栏博主资料模板文件 ^`so)2k)  
side_info.htm // 左侧竖栏个人统计模板文件 `/{r:QL  
side_lastvisit.htm // 左侧竖栏最近访问来客模板文件 d~spQj1  
side_link.htm // 左侧竖栏友情链接模板文件 )$Q"t"tvk  
side_notice.htm // 左侧竖栏博客公告模板文件 bY5@DW|o  
side_player.htm // 左侧竖栏播放器模板文件 a0BMQy
r  
side_search.htm // 左侧竖栏搜索框模板文件 y}_*7u7p  
side_userclass.htm // tq,Frvhx  
style.css //样式表文件 $ElTMP6]  
若你使用的风格，缺少某个文件，系统将自动去theme\default\template里面读取（这就是为何要保证系统默认风格的完整性） TLx - &8  
5、style.css文件分析 kO19'qnj'F  
先来一些css的基础知识，如果你做风格，这些是一定要知道的，如果再不懂，你就只能先去恶补一下了 '/<S9Ays;K  
选择符 m<A}~"k  
任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如， s<|PE'8  
[pre]P { text-indent: 3em }[/pre]当中的选择符是P。 kl"sVXMdI  
类选择符 >D' ./_:I,  
单一个选择符能有不同的CLASS(类)，因而允许同一元素有不同样式。例如，一个网页制作者也许希望视其语言而定，用不同的颜色显示代码 : OpU<h,e%  
code.html { color: #191970 } y7A Tz}  
code.css { color: #4b0082 } y)$+-
5q  
以上的例子建立了两个类，css和html，供HTML的CODE元素使用。CLASS属性是用于在HTML中以指明元素的类，例如， I26V@:a+  
<P CLASS=warning>每个选择符只允许有一个类。例如，code.html.proprietary是无效的。</p>类的声明也可以无须相关的元素: g~aC+oP #  
.note { font-size: small }在这个例子，名为note的类可以被用于任何元素。 ]"u/}~#  
一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small，但如果网页制作者决定改变这个类的样式，使得它不再是小字体的话，那么这个名字就变得毫无意义了。 katYb;Cm1  
ID 选择符 _i
SR:z  
ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如，ID选择符可以指定如下: `un-fUvgs  
#svp94O { text-indent: 3em }这点可以参考HTML中的ID属性: +py B<h(P  
<P ID=svp94O>文本缩进3em</P> fhZ"pv^  
关联选择符 n2CO|L}  
关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。例如， 以下的上下文选择符 iA @S:3y  
P EM { background: yellow }是P EM。这个值表示段落中的强调文本会是黄色背景；而标题的强调文本则不受影响。