http://www.fineemb.com/blog/archives/171.html 刺绣数字化专家 - 泛艺 Tue, 13 Dec 2011 10:53:20 +0000 hourly 1 http://wordpress.org/?v=3.3.1 http://www.fineemb.com/blog/archives/171.html#comment-11154 Pjblog模板制作教程 | 厚飞博客 Sat, 30 Jul 2011 15:57:50 +0000 http://blog.dnxh.cn/archives/171.html#comment-11154 [...] 然后我们看主内容的式样。主内容的式样比侧栏要复杂一点，首先主内容的标签是#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编辑器式样是另外一个文件控制，这就放到后面说。 到这里内容式样基本结束，下面我们主要看这节的部分代码。 内容块的结构会出现几种情况，首页状态、单篇日志、内容插件等模式。着重说前两种情况。 首页状态代码 HTML代码 <style type="text/css"> <!– #innermainContent{font-size:12px;} #mainContent-topimg{height:10px;background-color:red;color:#999;} #mainContent-bottomimg{height:10px;background-color:red;color:#999;} #Content_GG{background-color:yellow;} #Content_ContentList{background:#ddd;padding:0 10px 0 10px} .pageContent{background:#faa;} .Content{background:#aaa;} .Content-top{margin:10px 0 10px 0;background-color:red} .Content-bottom{margin:10px 0 10px 0;background-color:red} .titleA{margin:10px 0;} .titleA:link,.titleA:visited{font-size:18px;font-weight: bold;text-decoration:none;text-align:left;color:#999;} .titleA:hover{text-decoration:none;color:#fff;} .ContentAuthor{color:#fff;font-size:12px;} #log_173{background-color:#444;color:#fff} –> </style> <div id="innermainContent"> <div id="mainContent-topimg">内容头部</div> <div id="Content_GG" class="content-width">自定义模块GG</div> <div id="Content_ContentList" class="content-width">内容列表 <div class="pageContent" style="text-align:Right;overflow:hidden;height:18px;line-height:140%"><span style="float:left"></span> <div class="page" style="float:Left"><ul><li class="pageNumber"><strong>1</strong> | <a href="/blog/default.asp?page=2">2</a> | <a href="/blog/default.asp?page=3">3</a></li></ul></div> 预览模式: <a href="?distype=normal" accesskey="1">普通</a> | <a href="?distype=list" accesskey="2">列表</a></div> <div class="Content">内容块 <div class="Content-top"><div class="ContentLeft"></div><div class="ContentRight"></div> <h1 class="ContentTitle"> <img src="images/icons/1.gif" style="margin:0px 2px -4px 0px;" alt="" class="CateIcon"/> <a class="titleA" href="article.asp?id=174">标题1编号174</a> </h1> <h2 class="ContentAuthor">作者:×××; 日期:×××××</h2></div> <div id="log_174"> <div id="logPanel" class="Content-body">文章内容1</div> <p><a href="article.asp?id=174" class="more">查看更多…</a></p> <p>Tags: <a href="default.asp?tag=blog">blog</a> </p> </div> <div class="Content-bottom"> <div class="ContentBLeft"></div><div class="ContentBRight"></div> 分类:<a href="default.asp?cateID=4" title="基本都是转贴">技术文档</a> | <a href="?id=174">固定链接</a>|<a href="article.asp?id=174#comm_top">评论: 0</a>|引用: 0 | 查看次数: 42 </div> </div> <div class="Content">内容块 <div class="Content-top"><div class="ContentLeft"></div><div class="ContentRight"></div> <h1 class="ContentTitle"><img src="images/icons/1.gif" style="margin:0px 2px -4px 0px;" alt="" class="CateIcon"/><a class="titleA" href="article.asp?id=174">标题2编号173</a></h1> <h2 class="ContentAuthor">作者:×××; 日期:×××××</h2></div> <div id="log_173"> <div id="logPanel" class="Content-body">文章内容2</div> <p><a href="article.asp?id=173" class="more">查看更多…</a></p> <p>Tags: <a href="default.asp?tag=blog">blog</a> </p> </div> <div class="Content-bottom"><div class="ContentBLeft"></div><div class="ContentBRight"></div> 分类:<a href="default.asp?cateID=4" title="基本都是转贴">技术文档</a> | <a href="?id=174">固定链接</a> |<a href="article.asp?id=174#comm_top">评论: 0</a>| 引用: 0 | 查看次数: 42 </div> </div> </div> <div id="mainContent-bottomimg">内容底部</div> </div> [...] [...] 然后我们看主内容的式样。主内容的式样比侧栏要复杂一点，首先主内容的标签是#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编辑器式样是另外一个文件控制，这就放到后面说。 到这里内容式样基本结束，下面我们主要看这节的部分代码。 内容块的结构会出现几种情况，首页状态、单篇日志、内容插件等模式。着重说前两种情况。 首页状态代码 HTML代码 <style type="text/css"> <!– #innermainContent{font-size:12px;} #mainContent-topimg{height:10px;background-color:red;color:#999;} #mainContent-bottomimg{height:10px;background-color:red;color:#999;} #Content_GG{background-color:yellow;} #Content_ContentList{background:#ddd;padding:0 10px 0 10px} .pageContent{background:#faa;} .Content{background:#aaa;} .Content-top{margin:10px 0 10px 0;background-color:red} .Content-bottom{margin:10px 0 10px 0;background-color:red} .titleA{margin:10px 0;} .titleA:link,.titleA:visited{font-size:18px;font-weight: bold;text-decoration:none;text-align:left;color:#999;} .titleA:hover{text-decoration:none;color:#fff;} .ContentAuthor{color:#fff;font-size:12px;} #log_173{background-color:#444;color:#fff} –> </style> <div id="innermainContent"> <div id="mainContent-topimg">内容头部</div> <div id="Content_GG" class="content-width">自定义模块GG</div> <div id="Content_ContentList" class="content-width">内容列表 <div class="pageContent" style="text-align:Right;overflow:hidden;height:18px;line-height:140%"><span style="float:left"></span> <div class="page" style="float:Left"><ul><li class="pageNumber"><strong>1</strong> | <a href="/blog/default.asp?page=2">2</a> | <a href="/blog/default.asp?page=3">3</a></li></ul></div> 预览模式: <a href="?distype=normal" accesskey="1">普通</a> | <a href="?distype=list" accesskey="2">列表</a></div> <div class="Content">内容块 <div class="Content-top"><div class="ContentLeft"></div><div class="ContentRight"></div> <h1 class="ContentTitle"> <img src="images/icons/1.gif" style="margin:0px 2px -4px 0px;" alt="" class="CateIcon"/> <a class="titleA" href="article.asp?id=174">标题1编号174</a> </h1> <h2 class="ContentAuthor">作者:×××; 日期:×××××</h2></div> <div id="log_174"> <div id="logPanel" class="Content-body">文章内容1</div> <p><a href="article.asp?id=174" class="more">查看更多…</a></p> <p>Tags: <a href="default.asp?tag=blog">blog</a> </p> </div> <div class="Content-bottom"> <div class="ContentBLeft"></div><div class="ContentBRight"></div> 分类:<a href="default.asp?cateID=4" title="基本都是转贴">技术文档</a> | <a href="?id=174">固定链接</a>|<a href="article.asp?id=174#comm_top">评论: 0</a>|引用: 0 | 查看次数: 42 </div> </div> <div class="Content">内容块 <div class="Content-top"><div class="ContentLeft"></div><div class="ContentRight"></div> <h1 class="ContentTitle"><img src="images/icons/1.gif" style="margin:0px 2px -4px 0px;" alt="" class="CateIcon"/><a class="titleA" href="article.asp?id=174">标题2编号173</a></h1> <h2 class="ContentAuthor">作者:×××; 日期:×××××</h2></div> <div id="log_173"> <div id="logPanel" class="Content-body">文章内容2</div> <p><a href="article.asp?id=173" class="more">查看更多…</a></p> <p>Tags: <a href="default.asp?tag=blog">blog</a> </p> </div> <div class="Content-bottom"><div class="ContentBLeft"></div><div class="ContentBRight"></div> 分类:<a href="default.asp?cateID=4" title="基本都是转贴">技术文档</a> | <a href="?id=174">固定链接</a> |<a href="article.asp?id=174#comm_top">评论: 0</a>| 引用: 0 | 查看次数: 42 </div> </div> </div> <div id="mainContent-bottomimg">内容底部</div> </div> [...]

]]>