Pjblog模板制作教程 超强推荐(6)



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


.ptitle{height:10px}定义一下ptitle共有的式样属性;
#Side_aa .ptitle{background:red}下面就分别定义不同的颜色。
#Side_bb .ptitle{background:yellow}
#Side_cc .ptitle{background:blue}
这里要注意的是PJ侧栏模块的ID命名规则:在模块标识前加Side_。比如这里的aa,那就是#Side_aa。而程序默认得模块标识是不可以更改的。
看到效果后你是不是已经感觉到了Pjblog的模块功能的神奇了,我们还可以给个个模块给于绝对定位来实现各式各样的布局。比如Eternal Love的日历式样、Yahoo Weight的Skins切换模块式样。我们这里同样说的是Pj的构造和怎么运用这些构造,具体的CSS属性还是去参考手册。
这里我们着重要了解的是模块标识、选择符之间的关系。关于选择符手册里有更详细的说明。

然后我们看主内容的式样。主内容的式样比侧栏要复杂一点,首先主内容的标签是#innermainContent,这也是一个三栏(或说成是多栏,因为可以添加自定义模块)的布局。包括了头部#mainContent-topimg、中栏#Content_Contentlist和底部#mainContent-bottomimg。我们可以分别定义他们的式样,头部和底部已经是最基层的DIV了,不含有子元素了,你可以尽情的定义他们的式样,不用考虑他里面还有什么式样,这句话的含义就是定义完后就是最终式样了。而#Content_Contentlist是程序的默认模块,是不可以删除的,在后台设置模块的最下面一个。如果你增加了内容模块,那增加的那些内容模块就像上面侧栏说到的一样,可以自由定义。这里也要注意的是:PJ内容模块的ID命名规则:比如内容模块标识是Contentlist那这个模块的ID就是#Content_Contentlist,要在内容模块标识前加Content_,这个很重要
自定义模块因为具有不确定性,我在这里就不具体的说了,着重说说Contentlist这个默认模块。这里面的内容和侧栏一样不再是用ID选择符了,用的是类选择符。首先#Content_Contentlist包含了两栏,.pageContent.Content.pageContent是分页式样,这也是最终定义的式样。具体的是那部分呢,我们看下图:

凡是这些地方都属于.pageContent这个类的。这就是类选择符的优点。你可能觉得怎么说了半天的结构不说CSS呢,别急,了解结构很重要。忍着点往下看。
分页式样了解后我们再看.Content的式样。.Content里面的内容比较丰富。首先他是一个三栏的布局,头部.Content-top、内容.content-body、底部.content-bottom。而头部和底部又分别挂了左右两DIV。头部的是.Contentleft和.contentright,底部的是.ContentBleft和.contentBright。我们从字面上就可以了解到这些分别是在那个位置了。如果你还不了解请去看模型
.Content-top里面还包含着一些日志其他信息,就是日志的标题、作者、日期。那这些分别是在哪里呢?标题是属于.ContentTitle一类,作者和日期包是属于.ContentAuthor一类。他们分别包含在<h1></h1>和<h2></h2>里面。
上面说道这些是在首页情况下的式样,在单篇日志的模式下有一点不一样。在<h2></h2>下面多了个.Content-Info类,再里面又包含了InfoAuthor和InfoOther两个类。这里包含的信息如下图:

再下面就是正文了.Content-body了。在单篇日志里因为【文章来自】【引用通告地址】【Tags】等内容也赋予了.Content-body这个类,为了和【文章来自】【引用通告地址】【Tags】区别还给这个ID加了#logPanel标签,在首页里是没有的。其实在首页里加个也可以,我在做Yahoo Weight这个式样的时候,内容首字母式样就在首页加了个#logPanel标签,可以单独控制日志内容和首页摘要的式样。
内容里除了这些式样外还有评论框式样.comment和信息框式样#MsgContent、UBB框.comment。
评论框式样.comment一般是在单篇日志内容里,他是一个两栏的布局。里面包含了.commenttop和.commentcontent两个类。

你往下拉了看看是不是这样的。
信息框式样#MsgContent。就是评论信息的下面,你发表评论的地方(当然还有登陆框、信息提示宽、注册等等要用到)。这个也不复杂,就一个头部#MsgHead和#MsgBody,意思也很明了。而内容里面的UBB编辑器式样是另外一个文件控制,这就放到后面说。
到这里内容式样基本结束,下面我们主要看这节的部分代码。
内容块的结构会出现几种情况,首页状态、单篇日志、内容插件等模式。着重说前两种情况。
首页状态代码

Pjblog模板制作教程 超强推荐

HTML代码

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzddxy.html