一、准备工作
1.1 必需的一些基础
你要有学习知识的欲望，这个是一切的前提。你对Pjblog的使用有一定的了解（如果你还不知道Skin是什么、怎么安装，建议你不要往下看）。在做Skin的时候要细心，严格要求自己，有一定的审美观。最好熟悉一些制图软件（Adobe Potoshop、Fireworks之类）。对CSS方面番茄做过很不错的教程（需要注册）。
2.2 涉及的工具
首先你要有太电脑，并且显示器的色彩不是很差（我的本本的液晶显示器让我哭笑不得呀……）。制图软件Adobe Potoshop、Fireworks之类。CSS编写工具，你当然用记事本也可以写。色彩调配软件，屏幕截图软件。这些基本在本站都有下载，为了防止站点流量过大被K，我只能加了下载级别，并随机变换下载地址。请注册后下载，谢谢你的合作！
Macromedia Studio 8.0 官方简体中文正式版
电驴下载地址:http://lib.verycd.com/2005/10/14/0000069569.html
比较认同的网页制作类软件，这里我们主要是用套装里面的 Fireworks（教程里面用的就是他）。当然你也可以用Adobe Potoshop。
CSS编写工具EditPlus V2.1.2 Build 147 汉化版
下载地址：500){this.resized=true;this.style.width=500;}"> 该文件只允许会员下载! 登陆 | 注册
当然有人说用Dreamweaver不是更好？这里不建议用，手写更容易记住代码的含义，再说CSS可视化编写不是很理想。本来TopStyle3是可视化编写CSS的最佳工具，但介于Pjblog的CSS是分几个文件的用他效果也不怎么明显。
Color Schemer Studio1.5配色工具
下载地址：500){this.resized=true;this.style.width=500;}"> 该文件只允许会员下载! 登陆 | 注册
配色是你构思Skin的第一步。这款工具对颜色的搭配比较专业。
苏昱式样表中文手册2.0（一下简称《手册》）
下载地址：500){this.resized=true;this.style.width=500;}"> 该文件只允许会员下载! 登陆 | 注册
调试软件Firefox
下载地址：500){this.resized=true;this.style.width=500;}"> 点击下载文件
现在有94％的人在用IE，但Firefox的用户也在不断的增长。Firefox的好我在这里就不说了。但CSS在这两个浏览器之间肯定有兼容的问题。
截图工具HyperSnap5
下载地址：500){this.resized=true;this.style.width=500;}"> 该文件只允许会员下载! 登陆 | 注册
这个也是我用后认为功能比较强大的截屏软件。
如果你打瞌睡了 500){this.resized=true;this.style.width=500;}" ***>那就休息一下……
二、 构思你的Skin
2.1配色
你的Blog给人的第一印象就是视觉上的，所以说色很重要。
500){this.resized=true;this.style.width=500;}" ***>
这里我们用的是白、灰、红。一般灰色是通用的，就像血型里的O型血一样。
2.2布局
500){this.resized=true;this.style.width=500;}" ***>
页面的布局先不说太复杂的，你理解了结构后可以发挥自己的想象力。在这里要说的是CSS（Cascading Style Sheets层叠样式表单）这里的重点就是层叠。如果说Skin设计是平面设计，那我认为就错了。从欣赏的角度看这是个平面作品，但从设计的角度看那就是三维的。要不怎么有z-index这样的属性呢。再者我们可以这样做个比较，CSS是说的层类似于PS或FW里面的图层，不一样的地方仅仅在于：层交换顺序－－PS可以而DIV＋CSS不可以；Alpha通道－－PS可以而CSS不可以（一些浏览器可以）。图片的如上图所示，我们可以看到Pjblog的结构和DIV的前后顺序，前面的覆盖后面的（当然也可以是透明的）。我们先不玩花哨的，Blog的布局一般都就这样。
这里的header就是头部，里面包含Blog名、副标题、横向菜单；
Tbody是中部内容，里面包含着主内容（mainContent也就是我们写的日志，就像这个教程在的位置）、侧栏（sidebar）；
foot是底部，里面包含我们的一些版权信息、备案什么的；
我们说了这么多都是说的Pjblog的结构，也就是说是Box和Box之间的关系。而Box是怎么组成的呢？这里已经有高人Douglas做个个Flash模型，里面很明白的说明了margin，background-color，background-image，padding ，border 以及他们之间的关系。

500){this.resized=true;this.style.width=500;}" ***>Flash动画

500){this.resized=true;this.style.width=500;}" *** name=temp79374_img>在线播放

500){this.resized=true;this.style.width=500;}" ***>Flash动画

500){this.resized=true;this.style.width=500;}" *** name=temp71088_img>在线播放

的结构对这些特性综合运用，要培养自己的3D思维。
3.2主体的制作
我们以我现在用的这款Skin做例子，来简述制图过程。
我们先来看看我们想做的是怎样的一个主体（这个在你自己的脑海里应该已经成型，或有个模糊的构思）。
500){this.resized=true;this.style.width=500;}" ***>
白色的主调两边带点阴影，侧边是灰色（#EEEEEE）230px宽。
打开Fireworks，新建一个1000px×768px的白色背景的文件（因为这款Skin的主体背景是白色的）。确定我们的主体内容为800px宽，绘制一个宽度为800px，高度大于画布的矩形，再给加上1px宽的灰色（#999999）的边框。用滤镜发光给加点阴影，滤镜的参数设置成宽度为5，柔化为10，透明度为15，颜色为黑色，偏移为0。
再给加个侧栏绘制一个宽为230px，高度大于画布的矩形，放置到左边，注意不要压住1px的边框。这样我们的主体部分就绘制好了。制作主体部分我们要注意些什么呢。主要我们要考虑到页面的高度问题，因为页面的高度会随内容的不同而变化，那我们就要做一个有弹性的高度。我们可以利用Background-repeat设置值为y。那我们的背景就是纵向重复了。
3.2头部的制作
同样我们先看一下我们要做个什么样的Top。
500){this.resized=true;this.style.width=500;}" ***>
我们看到的是两条带质感的半透明的横条压在主体上，
我们画两个矩形，宽度大于画布（因为我们要这两条自适应宽度）。通过调节渐变给矩形加点质感，调整透明度为80。
500){this.resized=true;this.style.width=500;}" ***>
这样我们的Top就做好了。
3.3底部的制作
底部的制作一般比较简单，这里为了对应Top也加了个横条，这里就不做自适应宽度了（当然也是可以做的，我们从简单的做起）。下面是段灰色的矩形，上面压个横条。
500){this.resized=true;this.style.width=500;}" ***>
到这里我们的图基本已经画了个大概了。你看了可能就一会儿，但有的时候我们从构思到成型可能需要几天。为了配合看效果最好加点内容里面。配合链接颜色看看，反复修改而达到最佳效果。
3.4切片
所谓切片，顾名思义就是把做好的图切成你需要的一块块。有很多朋友都是在这里卡住了，不知道怎么切好。这里要说的是在可以表现出你的效果的前提下，图切的越小越好、越少越好。那需要切那些呢？怎么切？其实是根据你CSS的需要来切的。你可以先跳过这个不看，在学习了CSS后你想在某个Box里设置背景的时候，你就会想到图，那你就到做好的图里面切一块去用吧。慢慢的你就明白怎么切图了。下图就是头部背景图的切片，我们还可以看到切图用的是什么工具（我认为Fireworks切图功能好点）。在Fireworks里面切片是放在网页层里面的，我们可以给切片命名，想要这个切片的时候我们就可以导出图片。这里还要说的是导出图片的格式，就是优化栏的属性。个人比较喜欢PNG32格式，他支持Alpha通道（未来的趋势）。要是不透明图片选JPG也很好（他体积小）。
500){this.resized=true;this.style.width=500;}" ***>
整体的PNG分层文件提供给大家研究。500){this.resized=true;this.style.width=500;}">

500){this.resized=true;this.style.width=500;}"> HTML代码

<style type="text/css"><br/><!--<br/>body {<br/> font-family: Arial, Helvetica, sans-serif;/*设置字体*/<br/> background-color: #FFFFFF;/*背景颜色*/<br/> background-repeat: repeat-x;/*背景图像的重复方向*/<br/> margin: 0px;/*边距为0*/<br/> padding: 0px;/*补白为0，这里假如你不要边框和补白一般最好设置一下0值。就像做表格里的一样*/<br/> background-image: url(/skins/dnxh10/bg.jpg);/*背景图像位置*/<br/>                color: #888888;/*前景颜色*/<br/>}<br/>img {<br/> max-width: 100%;height:auto;/*图片的宽度（max-width只对非IE核心浏览器有效）*/<br/> border: none;/*无边框*/<br/>}<br/>select {<br/> font-family: "Times New Roman", Times, serif;<br/>}<br/>--><br/></style><br/></head><br/><br/><body><br/></body><br/></html>


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

500){this.resized=true;this.style.width=500;}"> HTML代码

<style type="text/css"><br/><!--<br/>body {<br/> font-family: Arial, Helvetica, sans-serif;/*设置字体*/<br/> background-color: #FFFFFF;/*背景颜色*/<br/> background-repeat: repeat-x;/*背景图像的重复方向*/<br/> margin: 0px;/*边距为0*/<br/> padding: 0px;/*补白为0，这里假如你不要边框和补白一般最好设置一下0值。就像做表格里的一样*/<br/> background-image: url(/skins/dnxh10/bg.jpg);/*背景图像位置*/<br/>                color: #888888;/*前景颜色*/<br/>                text-align:center;/*包含的内容居中*/<br/>}<br/>img {<br/> max-width: 100%;height:auto;/*图片的宽度（max-width只对非IE核心浏览器有效）*/<br/> border: none;/*无边框*/<br/>                <br/>}<br/>select {<br/> font-family: "Times New Roman", Times, serif;<br/>}<br/><br/>#container{width:816px;text-align:center;margin: auto;background:url(/skins/dnxh10/cont_bg.jpg) repeat-y;height:600px;}<br/>--><br/></style><br/></head><br/><br/><body><br/><div id="container"><br/>       <div id="header"><br/>       </div><br/><br/>       <div id="tbody" style="height:500px"><br/>       </div><br/>      <br/>       <div id="foot"><br/>       </div><br/>       <br/></div><br/></body><br/></html>


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

500){this.resized=true;this.style.width=500;}"> HTML代码

<style type="text/css"><br/><!--<br/>body {<br/> font-family: Arial, Helvetica, sans-serif;/*设置字体*/<br/> background-color: #FFFFFF;/*背景颜色*/<br/> background-repeat: repeat-x;/*背景图像的重复方向*/<br/> margin: 0px;/*边距为0*/<br/> padding: 0px;/*补白为0，这里假如你不要边框和补白一般最好设置一下0值。就像做表格里的一样*/<br/> background-image: url(/skins/dnxh10/bg.jpg);/*背景图像位置*/<br/>                color: #888888;/*前景颜色*/<br/>                text-align:center;/*包含的内容居中*/<br/>}<br/>img {<br/> max-width: 100%;height:auto;/*图片的宽度（max-width只对非IE核心浏览器有效）*/<br/> border: none;/*无边框*/<br/>                <br/>}<br/>select {<br/> font-family: "Times New Roman", Times, serif;<br/>}<br/><br/>#container {width:816px;text-align:center;margin: auto;background:url(/skins/dnxh10/cont_bg.jpg) repeat-y;}<br/>#header {width:816px;height:110px;text-align:left;background:url(/skins/dnxh10/top.jpg) no-repeat;}<br/>#foot {width:816px;height:85px;text-align:center;background:url(/skins/dnxh10/bottom.jpg) no-repeat;}<br/>--><br/></style><br/></head><br/><br/><body><br/><div id="container"><br/>       <div id="header"><br/>       </div><br/><br/>       <div id="tbody" style="height:500px"><br/>       </div><br/>      <br/>       <div id="foot"><br/>       </div><br/>       <br/></div><br/></body><br/></html>


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

500){this.resized=true;this.style.width=500;}"> HTML代码

<div id="header"><br/>    <div id="blogname">酷秀网络<br/>            <div id="blogtitle">dnxh:电脑绣花、电脑协会、电脑笑话、呆脑小孩、等你喜欢……<br/>            </div><br/>    </div><br/>    <div id="left"></div><div id="right"></div><br/>    <div id="menu">   <br/>    <ul><br/>          <li class="menuL"></li><br/>          <li><a class="menuA" href="/blog">首页</a></li><br/>          <li class="menuDIV"></li><br/>          <li><a class="menuA" href="/rss">聚合器</a></li><br/>          <li class="menuR"></li><br/>    </ul><br/>    </div><br/>    </div><br/>


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

500){this.resized=true;this.style.width=500;}"> 程序代码

<div id="sidebar">
<div id="sidebar-topimg"></div>
<div id="innersidebar">
<div id="Side_AA" class="sidepanel">
<h4 class="Ptitle"></h4>
<div class="pcontent"></div>
<div class="pfoot"></div>
</div>

<div id="Side_BB" class="sidepanel">
<h4 class="Ptitle"></h4>
<div class="pcontent"></div>
<div class="pfoot"></div>
</div>

<div id="Side_CC" class="sidepanel">
<h4 class="Ptitle"></h4>
<div class="pcontent"></div>
<div class="pfoot"></div>
</div>
</div>
<div id="sidebar-bottomimg"></div>
</div>

代码里的AA、BB、CC就是我们自定义的模块标识。这个在后台模块设置里可以自己定义。
500){this.resized=true;this.style.width=500;}" ***>
那我们把上面的代码定义一下式样看看效果，想要的效果就是每个功能块(AA、BB、CC)的头部(ptitle)有一个自己的式样（分别是：红、黄、蓝）。

500){this.resized=true;this.style.width=500;}"> HTML代码

<style type="text/css"><br/><!--<br/>.sidepanel{height:100px;width:200px;background:#eee;}<br/>.ptitle{height:10px}<br/>#Side_aa .ptitle{background:red}<br/>#Side_bb .ptitle{background:yellow}<br/>#Side_cc .ptitle{background:blue}<br/>--><br/></style><br/><div id="sidebar"><br/>     <div id="sidebar-topimg"></div><br/>     <div id="innersidebar"><br/>           <div id="Side_AA" class="sidepanel"><br/>           <h4 class="Ptitle"></h4><br/>           <div class="pcontent"></div><br/>           <div class="pfoot"></div><br/>           </div><br/><br/>           <div id="Side_BB" class="sidepanel"><br/>           <h4 class="Ptitle"></h4><br/>           <div class="pcontent"></div><br/>           <div class="pfoot"></div><br/>           </div><br/><br/>           <div id="Side_CC" class="sidepanel"><br/>           <h4 class="Ptitle"></h4><br/>           <div class="pcontent"></div><br/>           <div class="pfoot"></div><br/>           </div><br/>     </div><br/>     <div id="sidebar-bottomimg"></div><br/></div><br/>


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

的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是分页式样，这也是最终定义的式样。具体的是那部分呢，我们看下图：
500){this.resized=true;this.style.width=500;}" ***>
凡是这些地方都属于.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两个类。这里包含的信息如下图：
500){this.resized=true;this.style.width=500;}" ***>
再下面就是正文了.Content-body了。在单篇日志里因为【文章来自】【引用通告地址】【Tags】等内容也赋予了.Content-body这个类，为了和【文章来自】【引用通告地址】【Tags】区别还给这个ID加了#logPanel标签，在首页里是没有的。其实在首页里加个也可以，我在做

这个式样的时候，内容首字母式样就在首页加了个#logPanel标签，可以单独控制日志内容和首页摘要的式样。
内容里除了这些式样外还有评论框式样.comment和信息框式样#MsgContent、UBB框.comment。
评论框式样.comment一般是在单篇日志内容里，他是一个两栏的布局。里面包含了.commenttop和.commentcontent两个类。
500){this.resized=true;this.style.width=500;}" ***>
你往下拉了看看是不是这样的。
信息框式样#MsgContent。就是评论信息的下面，你发表评论的地方（当然还有登陆框、信息提示宽、注册等等要用到）。这个也不复杂，就一个头部#MsgHead和#MsgBody，意思也很明了。而内容里面的UBB编辑器式样是另外一个文件控制，这就放到后面说。
到这里内容式样基本结束，下面我们主要看这节的部分代码。
内容块的结构会出现几种情况，首页状态、单篇日志、内容插件等模式。着重说前两种情况。
首页状态代码

500){this.resized=true;this.style.width=500;}"> HTML代码

<style type="text/css"><br/><!--<br/>#innermainContent{font-size:12px;}<br/>#mainContent-topimg{height:10px;background-color:red;color:#999;}<br/>#mainContent-bottomimg{height:10px;background-color:red;color:#999;}<br/>#Content_GG{background-color:yellow;}<br/>#Content_ContentList{background:#ddd;padding:0 10px 0 10px}<br/><br/>.pageContent{background:#faa;}<br/>.Content{background:#aaa;}<br/>.Content-top{margin:10px 0 10px 0;background-color:red}<br/>.Content-bottom{margin:10px 0 10px 0;background-color:red}<br/>.titleA{margin:10px 0;}<br/> .titleA:link,.titleA:visited{font-size:18px;font-weight: bold;text-decoration:none;text-align:left;color:#999;}<br/> .titleA:hover{text-decoration:none;color:#fff;}<br/>.ContentAuthor{color:#fff;font-size:12px;}<br/><br/>#log_173{background-color:#444;color:#fff}<br/><br/>--><br/></style><br/><br/><div id="innermainContent"><br/><br/>   <div id="mainContent-topimg">内容头部</div><br/><br/>   <div id="Content_GG" class="content-width">自定义模块GG</div><br/>   <br/>   <div id="Content_ContentList" class="content-width">内容列表<br/>      <div class="pageContent" style="text-align:Right;overflow:hidden;height:18px;line-height:140%"><span style="float:left"></span><br/>   <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><br/>   预览模式: <a href="/?distype=normal" accesskey="1">普通</a> | <a href="/?distype=list" accesskey="2">列表</a></div><br/><br/> <div class="Content">内容块<br/> <div class="Content-top"><div class="ContentLeft"></div><div class="ContentRight"></div><br/> <h1 class="ContentTitle"><br/> <img src="/images/icons/1.gif" style="margin:0px 2px -4px 0px;" alt="" class="CateIcon"/><br/> <a class="titleA" href="/article.asp?id=174">标题1编号174</a><br/> </h1><br/> <h2 class="ContentAuthor">作者:×××; 日期:×××××</h2></div><br/> <div id="log_174"><br/> <div id="logPanel" class="Content-body">文章内容1</div><br/> <p><a href="/article.asp?id=174" class="more">查看更多...</a></p><br/> <p>Tags: <a href="/default.asp?tag=blog">blog</a> </p><br/> </div><br/> <div class="Content-bottom"><br/> <div class="ContentBLeft"></div><div class="ContentBRight"></div><br/> 分类:<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 <br/> </div><br/>     </div><br/><br/> <div class="Content">内容块<br/> <div class="Content-top"><div class="ContentLeft"></div><div class="ContentRight"></div><br/> <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><br/> <h2 class="ContentAuthor">作者:×××; 日期:×××××</h2></div><br/> <div id="log_173"><br/> <div id="logPanel" class="Content-body">文章内容2</div><br/>     <p><a href="/article.asp?id=173" class="more">查看更多...</a></p><br/> <p>Tags: <a href="/default.asp?tag=blog">blog</a> </p><br/> </div><br/> <div class="Content-bottom"><div class="ContentBLeft"></div><div class="ContentBRight"></div><br/> 分类:<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 <br/> </div><br/> </div><br/>   </div>  <br/>   <div id="mainContent-bottomimg">内容底部</div><br/> </div><br/><br/>


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

500){this.resized=true;this.style.width=500;}"> HTML代码

<style type="text/css"><br/><!--<br/>li{list-style:none;}<br/>#innermainContent{font-size:12px;}<br/>#mainContent-topimg{height:10px;background-color:red;color:#fff;}<br/>#mainContent-bottomimg{height:10px;background-color:red;color:#fff;}<br/>#Content_AdSense{background-color:yellow;}<br/>#Content_ContentList{background:#ddd;padding:0 10px 0 10px}<br/><br/>.pageContent{background:#faa;}<br/>.page{background:#faa;}<br/>.Content{background:#aaa;}<br/>.Content-top{margin:10px 0 10px 0;background-color:red}<br/>.Content-bottom{margin:10px 0 10px 0;background-color:red}<br/>.ContentTitle{font-size:16px;}<br/>.ContentAuthor{color:#fff;font-size:12px;}<br/>.Comment{background:#fee;margin-top:10px;}<br/>.Commenttop{margin:15px;background:#000;color:#fff;}<br/>.Commentinfo{background:#fff;color:#000;}<br/><br/>--><br/></style><br/><br/><br/>   <div id="innermainContent"><br/>       <div id="mainContent-topimg">内容顶部</div><br/>    <div id="Content_AdSense" class="content-width">自定义模块AdSense</div><br/>    <div id="Content_ContentList" class="content-width"><br/>    <div class="pageContent"><br/>    <div style="float:right;width:180px !important;width:auto"><br/>     <a href="#" target="_blank" ><img border="0" src="/images/rss.gif"  style="margin-bottom:-1px"/> 订阅</a><br/>     | <a href="#" ><img border="0" src="/images/Cprevious.gif" /> 上一篇</a> | <a href="#" ><img border="0" src="/images/Cnext.gif" /> 下一篇</a><br/>    </div><br/>    <img src="/images/icons/13.gif" style="margin:0px 2px -4px 0px" alt=""/> <strong><a href="#" >IT 、软件信息</a></strong><br/>    </div><br/>    <div class="Content"><br/>    <div class="Content-top"><div class="ContentLeft"></div><div class="ContentRight"></div><br/>      <h1 class="ContentTitle"><strong>文章标题</strong></h1><br/>      <h2 class="ContentAuthor">作者:**** 日期:****</h2><br/>    </div><br/>     <div class="Content-Info"><br/>   <div class="InfoOther">字体大小: <a href="javascript:SetFont('12px')" accesskey="1">小</a> <a href="javascript:SetFont('14px')" accesskey="2">中</a> <a href="javascript:SetFont('16px')" accesskey="3">大</a></div><br/>   <div class="InfoAuthor"><img src="/images/weather/hn2_sunny.gif" style="margin:0px 2px -6px 0px" alt=""/><img src="/images/weather/hn2_t_sunny.gif" /> <img src="/images/level3.gif" style="margin:0px 2px -1px 0px" /><br/>     <br/>   </div><br/> </div><br/>   <div id="logPanel" class="Content-body"><br/> 文章内容<br/>    </div><br/>    <div class="Content-body"><br/><br/> <img src="/images/From.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>文章来自:</strong> <a href="#" target="_blank">本站原创</a><br/><br/> <img src="/images/icon_trackback.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>引用通告地址:</strong> <a href="#" target="_blank"><a href="http://www.dnxh.cn/blog/trackback.asp?tbID=27" target="_blank">http://www.dnxh.cn/blog/trackback.asp?tbID=27</a></a><br/><br/>     <br/> <img src="/images/tag.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>Tags:</strong> <a href="/default.asp?tag=Google">Google</a> <br/> <br/>    </div><br/>    <div class="Content-bottom"><div class="ContentBLeft"></div><div class="ContentBRight"></div>评论: 112 | 引用: 0 | 查看次数: 2693<br/>    </ul><br/>    <br/>    </div><br/>    </div><br/>    </div><br/>       <div class="pageContent"><div class="page" style="float:right"><ul><li class="pageNumber"><strong>1</strong> | <a href="#">2</a></li></ul></div></div><br/>    <br/>   <div class="comment"><br/>   <br/>     <div class="commenttop"><a name="comm_557" href="#"><img border="0" src="/images/icon_quote.gif" alt="" style="margin:0px 4px -3px 0px"/></a><a href="#"><strong>jim</strong></a> <span class="commentinfo">[2006-04-24 08:19 AM]</span></div><br/>     <div class="commentcontent" id="commcontent_557">评论1</div><br/>   <br/>    </div><br/>   <br/>   <div class="comment"><br/>   <br/>     <div class="commenttop"><a name="comm_550" href="#"><img border="0" src="/images/icon_quote.gif" alt="" style="margin:0px 4px -3px 0px"/></a><a href="#"><strong>seamcker</strong></a> <span class="commentinfo">[2006-04-22 08:02 PM]</span></div><br/>     <div class="commentcontent" id="commcontent_550">评论2</div><br/>   <br/>    </div><br/>   <br/>   <div class="comment"><br/>   <br/>     <div class="commenttop"><a name="comm_548" href="#"><img border="0" src="/images/icon_quote.gif" alt="" style="margin:0px 4px -3px 0px"/></a><a href="#"><strong>dnxh</strong></a> <span class="commentinfo">[2006-04-22 03:48 PM]</span></div><br/>     <div class="commentcontent" id="commcontent_548">评论3</div><br/>   <br/>    </div><br/>   <br/>   <br/>   <br/>       <div class="pageContent"><div class="page" style="float:right"><ul><li class="pageNumber"><strong>1</strong> | <a href="#">2</a> </li></ul></div></div><br/>       <br/>   <div id="MsgContent" style="width:94%;"><br/>      <div id="MsgHead">发表评论</div><br/>      <div id="MsgBody"><br/>      <br/>      <form name="frm" action="blogcomm.asp" method="post" onsubmit="return CheckPost()" style="margin:0px;">   <br/>   <table width="100%" cellpadding="0" cellspacing="0">   <br/>   <tr><td align="right" width="70"><strong>昵　称:</strong></td><td align="left" style="padding:3px;"><input name="username" type="text" size="18" class="userpass" maxlength="24" /></td></tr><br/>      <tr><td align="right" width="70"><strong>密　码:</strong></td><td align="left" style="padding:3px;"><input name="password" type="password" size="18" class="userpass" maxlength="24"/> 游客发言不需要密码.</td></tr><tr><td align="right" width="70"><strong>验证码:</strong></td><td align="left" style="padding:3px;"><input name="validate" type="text" size="4" class="userpass" maxlength="4"/> </td></tr><br/>   <tr><td align="right" width="70" valign="top"><strong>内　容:</strong><br/><br/>   </td><td style="padding:2px;"></td></tr><br/>   <tr><td align="right" width="70" valign="top"><strong>选　项:</strong></td><td align="left" style="padding:3px;"><br/>             <label for="label5"><input name="log_DisSM" type="checkbox" id="label5" value="1" />禁止表情转换</label><br/>             <label for="label6"><input name="log_DisURL" type="checkbox" id="label6" value="1" />禁止自动转换链接</label><br/>             <label for="label7"><input name="log_DisKey" type="checkbox" id="label7" value="1" />禁止自动转换关键字</label><br/>   </td></tr><br/>          <tr><br/>            <td colspan="2" align="center" style="padding:3px;"><br/>   <input name="logID" type="hidden" value="27"/><br/>              <input name="action" type="hidden" value="post"/><br/>   <input name="submit2" type="submit" class="userbutton" value="发表评论" accesskey="S"/><br/>              <input name="button" type="reset" class="userbutton" value="重写"/></td><br/>          </tr><br/>          <tr><br/>            <td colspan="2" align="right" ><br/> 虽然发表评论不用注册，但是为了保护您的发言权，建议您<a href="register.asp">注册帐号</a>. <br/> <br/>   字数限制 <b>1000 字</b> | <br/>   UBB代码 <b>开启</b> | <br/>   [img]标签 <b>关闭</b><br/><br/> </td><br/>          </tr>   <br/>   </table></form><br/>    </div></div><br/>       <div id="mainContent-bottomimg">内容底部</div><br/>   </div><br/>   <br/>            <br/>   


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

500){this.resized=true;this.style.width=500;}"> HTML代码

<br/><style type="text/css"><br/><!--<br/>  /*---底部式样---*/<br/>  #foot1{width:816px;text-align:center;background:url(/skins/dnxh10/bottom.jpg);height:85px;padding-top:6px;margin:0;border-bottom:1px solid #fff;font-size:12px;font-family: Arial, Verdana, Helvetica;}<br/>  #foot1 p{padding:0;margin:0;}<br/>--><br/></style><br/> <div id="foot1"><br/>    <p style="font-size:11px;">Powered By <a href="#" target="_blank"><strong> </SPAN></TD></TR><br/><TR><br/><TD align=right>[<a href="#" >阅读全文<span id="ob_logreaded"></span></a> | <a href="#cmt">回复(0)</a> | <a href="/showtb.asp?id=119147" target="_blank">引用通告<span id="ob_tbnum"></span></a> | <a href="/vote.asp?id=35924&logid=119147&type=1" target="_blank">鲜花<span id="ob_logfn"></span></a>| <a href="/vote.asp?id=35924&logid=119147&type=0" target="_blank">板砖<span id="ob_logbn"></span></a>| <a href="/user_post.asp?logid=119147" target="_blank">编辑</a>] </TD></TR><br/><TR><br/><TD><br/><HR width="100%" color=#f0f0f0 size1><br/></TD></TR></TBODY></TABLE><div id="morelog"><ul><li>上一篇：<a href="/user2/guger/archives/2006/118891.html">慈禧的秘密生活</a></li><li>下一篇：<a href="/user2/guger/archives/2006/120860.html">[小破孩]景阳岗</a></li></ul></div><script src="/ad/ad_usercommentjs.htm"></script><a name='cmt'></a><h2>发表评论：</h2><br/><div id="form_comment"><form action='/savecomment.asp?logid=119147' method='post' name='commentform' id='commentform' onSubmit='return Verifycomment()'><br/><ul>昵称：<input name='UserName' type='text' id='UserName' size='15' maxlength='20' value='' /></ul><br/><ul>密码：<input name='Password' type='password' id='Password' size='15' maxlength='20' value='' /> (游客无须输入密码)</ul><br/><ul>主页：<input name='homepage' type='text' id='homepage' size='42' maxlength='50' value='http://' /></ul><ul>标题：<input name='commenttopic' type='text' id='commenttopic' size='42' maxlength='50' value='Re:Pjblog模板制作教程' /></ul><ul><input type='hidden' name='edit' id='edit' value='' /><br/><div id="oblog_edit"></div><br/></ul><br/><ul><span id="ob_code"></span><input type='submit' value=' 提交 '></ul><br/></form></div><br/></TD></TR><br/><TR><br/><TD width=22 background="" height=5></TD><br/><TD></TD></TR><br/><TR><br/><TD background="" height=1></TD><br/><TD bgColor=#cccccc height=1><FONT size=3></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><br/><DIV align=center><br/><TABLE cellSpacing=0 cellPadding=0 width=768 align=center ***><br/><TBODY><br/><TR><br/><TD><IMG height=30 src="/skin/bluedream/blog_footerright.gif" width=18></TD><br/><TD style="PADDING-BOTTOM: 2px" vAlign=center align=middle width="100%" background="/skin/bluedream/blog_footer.gif"></TD><br/><TD><br/><P align=center><IMG height=30 src="/skin/bluedream/blog_footerleft.gif" width=18></P></TD></TR></TBODY></TABLE></DIV><br/><P align=center><br/><SCRIPT type=text/javascript><!--<br/>google_ad_client = "pub-0274078557875230";<br/>google_alternate_color = "E6E6E6";<br/>google_ad_width = 728;<br/>google_ad_height = 90;<br/>google_ad_format = "728x90_as";<br/>google_ad_type = "text_image";<br/>google_ad_channel ="";<br/>google_color_border = "E6E6E6";<br/>google_color_link = "0066CC";<br/>google_color_bg = "E6E6E6";<br/>google_color_text = "000000";<br/>google_color_url = "008000";<br/>//--></SCRIPT><br/><br/><SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript><br/></SCRIPT><br/><br/><SCRIPT type=text/javascript><!--<br/>google_ad_client = "pub-0274078557875230";<br/>google_ad_width = 468;<br/>google_ad_height = 60;<br/>google_ad_format = "468x60_as_rimg";<br/>google_cpa_choice = "CAAQ1JXL9gEaCAemxFZJHZMWKMDx6n4";<br/>//--></SCRIPT><br/><br/><SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript><br/></SCRIPT><br/></P><script src="/ad/ad_userbotjs.htm"></script><div id="powered"><a href="http://blog.phoenixtv.com" target="_blank"><img src="/images/phblog.jpg" border="0" alt="Powered by Phoenixtv.com" /></a></div><br/></body><br/></html><script src="/user2/guger/inc/show_subject.htm"></script><br/><script src="/user2/guger/inc/show_placard.htm"></script><br/><script src="/user2/guger/calendar/200605.htm"></script><br/><script src="/user2/guger/inc/show_search.htm"></script><br/><script src="/user2/guger/inc/show_newblog.htm"></script><br/><script src="/user2/guger/inc/show_comment.htm"></script><br/><script src="/user2/guger/inc/show_newmessage.htm"></script><br/><script src="/user2/guger/inc/show_info.htm"></script><br/><script src="/user2/guger/inc/show_links.htm"></script><br/><script src="/user2/guger/inc/show_blogname.htm"></script><br/><script src="/commentedit.asp"></script><br/><script src="/count.asp?action=code31"></script><br/><Script src="/count.asp?action=logtb31&id=119147"></Script><script src="/count.asp?action=site&id=35924"></script><br/><script src="/login.asp?action=showindexlogin"></script><br/>