上一篇 |

学习

研究pjblog的模版设计---模版结构图CSS示意图

作者:ilank 日期:2007-01-10

字体大小: 小中大

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body{
background-color:#FFFAFA;
border:1px solid #7D7D7D;
color: #8B4513;
font:Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size:13px;
padding:2px;
margin:0px;
}
#blogname{
MARGIN:5px;
BORDER: 1px solid #9ACD32;
BACKGROUND: #C6E28D;
WIDTH:970px;
HEIGHT:20px;
}
#blogtitle{
MARGIN:5px;
BORDER: 1px solid #9ACD32;
BACKGROUND: #F0E68C;
WIDTH:960px;
HEIGHT:20px;
}
#menu{
MARGIN:5px;
BORDER: 1px solid #9ACD32;
BACKGROUND: #8AB632;
WIDTH:970px;
HEIGHT:20px;
}
#ul{
MARGIN:5px;
BORDER: 1px solid #9ACD32;
BACKGROUND: #F0E68C;
WIDTH:960px;
HEIGHT:20px;
}
#menuL{float:left; width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32;  margin: 5px 3px 5px 4px;  }
#li{float:left;width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32;margin: 5px 4px 5px 2px; }
#menuDiv{float:left;width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32;margin: 5px 3px 5px 4px; }
#menuR{float:right;width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32;margin: 5px 3px 5px 4px;  }

#header{
MARGIN:5px;
BORDER: 1px solid #7B7B7B;
BACKGROUND:#ccd2de;
WIDTH:980px;
HEIGHT:20px;
}
#container{
WIDTH:980px;
BACKGROUND:#FFF;
border: 1px double #9ACD32;
margin: 2px 2px 2px 2px;
text-align: center;
}
#leftsidebar{
border:1px solid #5F82E9;
FLOAT:left;
MARGIN:1px 0px 5px 5px;
BACKGROUND:#F2F3F7;
WIDTH:190px;
clear:left;
line-height: 150%;
}
#tbody{
border: 1px solid #ACD558;
MARGIN:5px 3px 3px 5px;
PADDING:0px;
WIDTH:970px;
BACKGROUND: #F0E68C;
}
#maincontent{
border:1px solid #A68100;
MARGIN:3px 5px 3px 5px;
PADDING:0px;
WIDTH:970px;
BACKGROUND: #C8C8C8;
}
#innermaincontent{
border:1px solid #5F82E9;
MARGIN:1px 3px 3px 5px;
WIDTH:546px;
BACKGROUND: #F0E68C;
line-height: 150%;
FLOAT:left;
}
#mainContent-topimg{border:1px solid #B58615;
MARGIN:1px 3px 8px 5px;
WIDTH:540px;
BACKGROUND: #ECC56A;
line-height: 150%; 
}
#content-width{border:1px solid #B58615;
MARGIN:5px 3px 3px 5px;
WIDTH:540px;
BACKGROUND: #ECC56A;
line-height: 150%; 
}
#pageContent{border:1px solid #9ACD32;
MARGIN:5px 3px 8px 3px;
WIDTH:530px;
BACKGROUND: #B4D96A;
line-height: 150%; 
}
#Content{border:1px solid #9ACD32;
MARGIN:8px 3px 5px 3px;
WIDTH:530px;
BACKGROUND: #B4D96A;
line-height: 150%;  
}
#Content-top{border: 1px solid #70922B;
MARGIN:5px 3px 12px 3px;
WIDTH:520px;
BACKGROUND: #8AB632;
line-height: 150%;  
}
#ContentTitle{border: 1px solid #AEA01A;
MARGIN:5px 3px 5px 3px;
WIDTH:250px;
BACKGROUND: #EBDB47;
line-height: 150%;
float:left;  
}
#ContentAuthor{border: 1px solid #AEA01A;
MARGIN:5px 3px 5px 3px;
WIDTH:250px;
BACKGROUND: #EBDB47;
line-height: 150%; 
float:right;  
}
#Content-body{border:1px solid #70922B;
MARGIN:12px 3px 5px 3px;
WIDTH:520px;
BACKGROUND: #8AB632;
line-height: 150%;  
}
#Content-bottom{border:1px solid #70922B;
MARGIN:12px 3px 8px 3px;
WIDTH:520px;
BACKGROUND: #8AB632;
line-height: 150%;  
}
#mainContent-bottomimg{border: 1px solid #B58615;
MARGIN:8px 3px 12px 5px;
WIDTH:540px;
BACKGROUND: #ECC56A;
line-height: 150%;  
}
#rightsidebar{
border: 1px solid #5F82E9;
FLOAT:right;
MARGIN:1px 5px 5px 2px;
WIDTH:190px;
BACKGROUND:#F2F3F7;
clear:right;
line-height: 150%;
}
#sidebar-topimg{
border: 1px solid #5F82E9;
MARGIN:1px 5px 2px 5px;
WIDTH:190px;
BACKGROUND: #C6E28D;
line-height: 150%;
}
#sidepanel{
border: 1px solid #5F82E9;
MARGIN:1px 5px 2px 5px;
WIDTH:190px;
BACKGROUND: #C6E28D;
line-height: 150%;
}
#Ptitle{border: 1px solid #5F82E9;
MARGIN:1px 5px 2px 5px;
WIDTH:178px;
BACKGROUND: #F0E68C;
line-height: 150%;
 
}
#Pcontent{border: 1px solid #5F82E9;
MARGIN:1px 5px 2px 5px;
WIDTH:178px;
BACKGROUND: #F0E68C;
line-height: 150%;
 
}
#Pfoot{border: 1px solid #5F82E9;
MARGIN:1px 5px 2px 5px;
WIDTH:178px;
BACKGROUND: #F0E68C;
line-height: 150%;
 
}
#sidebar-bottomimg{
border: 1px solid #5F82E9;
MARGIN:1px 5px 2px 5px;
WIDTH:190px;
BACKGROUND: #C6E28D;
line-height: 150%;
}
#footer{
CLEAR:both;
MARGIN:5px;
PADDING:5px 0px 5px 0px;
BACKGROUND:#ccd2de;
HEIGHT:20px;
WIDTH:985px;
BORDER: 1px solid #7B7B7B;
}
</style>
</HEAD>

<BODY>
<div id="container">
    container
    <div id="header">header
 <div id="blogname">blogname
 <div id="blogtitle">blogtitle</div>
 </div>
    <div id="menu">menu
 <div id="ul">ul
 <div id="menuL">menuL</div><div id="li">li</div><div id="menuDiv">menuDiv</div><div id="li">li</div><div id="menuDiv">menuDiv</div><div id="li">li</div><div id="menuR">menuR</div>
 </div>
 </div>
 </div>
 <div id="tbody">tbody
 <div id="maincontent">maincontent
    <div id="leftsidebar">leftsidebar
 <div id="sidebar-topimg">sidebar-topimg</div><div id="sidepanel">sidepanel
 <div id="Ptitle">Ptitle</div><div id="Pcontent">Pcontent</div><div id="Pfoot">Pfoot</div>
 </div><div id="sidebar-bottomimg">sidebar-bottomimg</div>
 </div>
 <div id="innermaincontent">innermaincontent
 <div id="mainContent-topimg">mainContent-topimg</div>
    <div id="content-width">content-width
 <div id="pageContent">pageContent</div>
 <div id="Content">Content
 <div id="Content-top">Content-top
 <div id="ContentTitle">ContentTitle</div><div id="ContentAuthor">ContentAuthor</div>
 </div><div id="Content-body">Content-body</div><div id="Content-bottom">Content-bottom</div>
 </div>
 </div>
 <div id="mainContent-bottomimg">mainContent-bottomimg</div>
 </div>
 <div id="rightsidebar">rightsidebar
 <div id="sidebar-topimg">sidebar-topimg</div><div id="sidepanel">sidepanel
 <div id="Ptitle">Ptitle</div><div id="Pcontent">Pcontent</div><div id="Pfoot">Pfoot</div>
 </div><div id="sidebar-bottomimg">sidebar-bottomimg</div>
 </div>
 </div>
 </div>
 <div id="footer">footer</div>
</div>
<div></div>
</BODY>
</HTML>

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

转自：http://www.aloostudio.com/blog/article.asp?id=5

PJBlog2的界面一共用到 5 个CSS文件,(5个文件,其实不用担心,我只是为了方便阅读,所以把CSS文件分成了5个)
global.css 全局样式表
layout.css 层次样式表
typography.css 局部样式表
link.css 超链接样式表
UBB/editor.css UBB编辑器样式表
2. 关于Skins的XML定义
PJBlog2的界面必须拷贝到 Skins\ 文件夹下面,而且每一个界面都必须包含一个 skin.xml 界面配置的XML文件才可以被系统读取
1. 界面配置文件 skin.xml 结构

程序代码

<?xml version="1.0" encoding="UTF-8"?>
<SkinSet>
<SkinName>默认皮肤 - Flash导航条风格</SkinName>
<SkinDesigner>PuterJam</SkinDesigner>
<pubDate>2004-11-6</pubDate>
<DesignerURL>puterjam.vipx.net" target="_blank">http://puterjam.vipx.net</DesignerURL>
<DesignerMail>puterjam@etang.com</DesignerMail>
<Flash>
<UseFlash>-1</UseFlash>
<FlashPath>head.swf</FlashPath>
<FlashWidth>748</FlashWidth>
<FlashHeight>80</FlashHeight>
<FlashAlign>center</FlashAlign>
<FlashTop>0</FlashTop>
<FlashTransparent>-1</FlashTransparent>
</Flash>
</SkinSet>

2. 界面配置文件 skin.xml 字段分析
SkinName 界面名称
SkinDesigner 界面设计者
pubDate 发布时间
DesignerURL 设计者主页
DesignerMail 设计者电子邮件
Flash/UseFlash 是否使用Flash导航条 0=false -1=true
Flash/FlashPath Flash导航条路径名
Flash/FlashWidth Flash导航条宽度
Flash/FlashHeight Flash导航条高度
Flash/FlashAlign Flash导航条对齐方式 left | right | center
Flash/FlashTop Flash导航条距离页面顶部高度
Flash/FlashTransparent Flash导航条是否透明 0=false -1=true
3. PJBlog2界面的其他说明
1. 每个界面下面的 UBB/ 文件夹里面的文件都不能少.因为它提供给UBB编辑器图片和样式等信息
2. 自定义模块也有属于自己的样式定义. 自定义模块目前有两总类型:
一种是内容模块 Content Module
另一种是侧边模块 Side Module.
我们需要控制某个自定义模块时就可以使用
#Content_ 或者 #Side_ 来独立控制它们的样式.例如:
某个 侧边模块 的标识是 Category, 那么就可以用 #Side_Category 来控制这个模块的CSS.
3. Flash 导航条如何获取日志分类?
PJBlog2提供了一个 menu.asp 的文件,它动态输出了日志分类的XML文件
演示看这里

SiteName 站点名字
SiteURL 站点地址
Menu/MenuName 分类名称
Menu/MenuIntro 分类说明
Menu/MenuType 分类类型 0=同时在顶部和侧边显示 1=只在顶部显示 2=只在侧边显示
Menu/MenuUrl 分类链接地址
Menu/logNum 分类日志数目

[本日志由 ilank 于 2007-01-28 06:46 PM 编辑]

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags: pjblog css

相关文章:

评论: 4 | 引用: 0 | 查看次数: 30456

李李 [2008-02-07 10:31 AM]

想问一下,老大你首页上面滚动区域图标代码是怎样写的..........能否提供一下.谢谢...

doggou [2007-10-18 12:13 AM]

很喜欢贵站的皮肤，能不能分享一个

回复：本站分类“下载”中的24个打包风格里就有。去下载吧

路过 [2007-08-11 11:53 PM]

大哥，能不能指点一下我的网站　http://www.gzzcgs.cn http://www.gzcompany.cn 谢谢

yy [2006-11-28 06:36 PM]

终于开始研究这个东东啦~我们是不是快有属于自己的模板啦~[icon_heart]

发表评论

研究pjblog的模版设计---模版结构图CSS示意图

作者:ilank 日期:2007-01-10

Photo

超级搜索︱Search

我的地盘︱User Panel

随机日志︱Random

新的记忆︱NewLog

访客足迹︱Comments

css小站收藏

反向链接︱referer