Pjblog模板制作教程超强推荐

发布时间：2020-03-15 06:16:39 所属栏目：Linux 来源：站长网

导读：Pjblog模板制作教程超强推荐

首先我们在<body>里添加了需要的<div>
<div>主体
       <div>顶部
       </div>

       <div>内容
       </div>

       <div>底部
       </div>

</div>
我们先从#container加起（为什么要加个#号，不明白的去看手册）。
#container{width:816px;宽度，应该和你切片的时候有所对应
             text-align:center;内容居中
             margin:0 auto;边框为零。这里要注意的是，要#container居中我们必须设置margin为auto而且父元素（body）为text- align:center;
                    background:url(skins/dnxh10/cont_bg.jpg) repeat-y;背景路径并以Y方向重复。
                    height:600px;
}
现在预览一下看看，好像主体出来了。但顶部不是我们想象的那样呀！在#container上不是有三个元素吗，那我们再来定义一下#header和#foot就可以了。#tbody我们可以留空有更大的活动性。

HTML代码

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

看到了，哈哈。整个结构是不是好像成型了。这里我们定义了#header。
#header {
                 width:816px;宽度，这里也就是图片的宽度
                 height:110px;高度，这里也就是图片的高度
                 text-align:left;内容左对齐，因为我们以后里面的Blog名字是要靠左的。
                 background:url(skins/dnxh10/top.jpg) no-repeat;背景路径，不重复
}
底部的定义也一样。就不在罗嗦了。
PS:这里的<div>因为里面没内容，而设置的高度做演示用的。
4.3顶部式样
顶部的美化很重要，因为用户打开你的Blog的时候首先进入眼帘的就是顶部。做顶部式样的时候你要知道顶部式样是在什么地方，他的结构是怎样的。顶部式样就是Header和他里面的内容，结构我们可以通过上面的Flash模型来了解。我们还是看代码：

HTML代码

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

不知道为什么这段不能加式样，可能是和页面的代码一样的缘故吧。那我们就不加，我们先来分析一下结构，看每个元素的作用是什么。我们先设置一下#header的式样，上面我们已经说过了。
  #container #header{width:816px;height:110px;background: url(top.jpg) no-repeat;text-align:left;}
#blogname就是我们的Blog的名字，他包含了#blogtitle子元素。我们设置的时候先设置#blogname再设置#blogtitle。
  #container #header #blogname{font-size:22px;color:#999;font-weight:bold;float:left;padding:15px 0 0 25px;}
   #container #header #blogname #blogTitle{display:none}
在这里我们设置了#blogname的字体大小、颜色、粗体、和浮动左、补白的距离。而blogtitle设置了不显示。
再往下看，看到了#left和#right两个元素，看命名的意思我们就知道了。那是#header两头的式样，我们可以靠float:left和float:right来实现，在这个式样里我们不需要设置。这个主要可以实现圆角之类的#header。
#menu是菜单项，一般我们看这里的时候比较糊涂，再加上含有float属性，运用起来比较难以驾驱。我们来分析一下：
#menu是个整体式样。里面包含了一个<ul><li></li></ul>的结构。关于项目列表,而li里面又有绑定了式样，分别是menuL、menuA、menuDIV、menuR分别的作用就是menuL利用Float:left;控制菜单左端的式样，menuDIV控制菜单项目之间的式样也就是分隔符，而menuR就是利用float:right;控制菜单右端的式样。
  #container #header #menu{float:right;margin:35px 15px 0 0}
  #container #header #menu ul{}
  #container #header #menu ul li{float:left;height:20px;list-style:none;}
   .menuL{}
   .menuR{}
   .menuDiv{width:1px;height:20px;background:#999;margin-right:15px;margin-left:15px;}
li里面的float:left;是实现横向菜单的必要条件，list-style:none;是消除列表前的小圆点的。
仅仅就这些式样顶部还是不完美的。我们要设置菜单的链接式样。也就是我们刚才少一个没说的menuA的式样。
.menuA:link,.menuA:visited{text-align:center;text-decoration:none;color:#cc3300;line-height:19px;height:15px;}
.menuA:hover{text-decoration:none;}
:visited是访问后的式样，:link是通常的式样，:hover是鼠标接触的式样，其实还有个:active（在鼠标点击与释放之间发生的事件时的样式）这里有个书写的顺序“LoVe/HAte”（爱/恨）链接规则：Link, Visited, Hover, Acitve。具体参数可以参照手册。
4.4内容式样
内容式样里包含的元素比较多，变换也比较多，我们看看到底要做的是那些式样。首先是内容#Tbody，这个里面在首页的时候包含的是主内容#mainContent和工具条也就是侧栏#sidebar。而在登陆页的时候里面就是登陆框，注册页，还有信息提示出错，恭喜通过什么这些就是消息框式样#MsgContent。如果你看过以前的式样文件里的Layout.css的你可能会发现一个问题，我上面说的这些标签都是带#号的也就是ID选择符，而上面没有提及是.开头的是类选择符，也就是class="*"。为什么会有这样的命名方式，我们知道Pjblog是一个模块化的程序。我们可以自己自定义侧栏模块和内容模块，也就是说侧栏工具条里的若干个工具箱里的ID（模块标识）是可以自己定义名字的，内容里的模块也是如此。这就为我们的模板创造了更多式样的可能。你可以这样理解，首先我们用了统一的类class，再个我们又给每个工具箱定义了唯一的一个ID，那我们通过这两组合就可以定义每个工具箱的式样了。形式如下：

我们从侧栏开始，侧栏的结构很清晰。一个#sidebar主元素，里面包含了#sidebar-topimg、#innersidebar、#sidebar-bottomimg三个子元素，很明显#sidebar-topimg、#sidebar-bottomimg是侧栏的顶部和底部的式样，而#innersidebar里面是放工具箱.sidepanel的。工具箱.sidepanel又作为一个主元素，里面包含了.Ptitle标题、.Pcontent内容面板、.Pfoot底部。看代码：

程序代码

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

3/12

首页

尾页

Pjblog模板制作教程 超强推荐

Pjblog模板制作教程超强推荐