blogbus代码分析.docx

《blogbus代码分析.docx》由会员分享，可在线阅读，更多相关《blogbus代码分析.docx（18页珍藏版）》请在冰点文库上搜索。

blogbus代码分析

博客大巴代码详细分析

我以我的这个模板为例，说一下一些基本代码的用处。

head--里面的东西貌似没啥改的，就算改也和不改差不多，所以不作说明

css--模板的样式基本上都在这里改，颜色，大小，插入图片等等

index--主页里的布局，在这里可以修改blog名称，描述，日志主体，副栏的位置

index-posts--主页里日志主体的一些布置，比如分类，题目，时间，标签的位置

detail--日志页里的布局，就是你"阅读全文"后看到的页面

detail-post--日志主体部分，也是"阅读全文"后看到的页面

6个模块，介绍的不是特别清楚，后面如果能补充说明的，我尽量补充进去。

head模块跳过，反正我一般不改，有兴趣和能力的可以自我钻研解读一下，到时别忘了分享。

哈哈

css是内容最多，代码最复杂，同时又可以尽显个性的一个模块，我用我模板的代码详细介绍一下。

代码着实很多，我只介绍我用的，不常用的能说明的也会说明一下，具体情况具体分析。

后面有很多重复的，把最常用的先说一下。

color是字体颜色，font-size是字体大小，大家一般都用11px或12px，中文字体大小没啥区别，如果是英文的话，11px显示的比12px的要小一点。

font-family是字体样式，一般设置成Verdana就可以了，你喜欢设置成别的字体也行，不过得要浏览者的电脑里有你这种字体，才能看见。

所以建议设置成大家电脑里都有的字体。

*

html

bodybody基本上最有用的代码了，它控制的是整个页面的样式。

包括字体，颜色，大小，背景等等。

ul,ol,li

img页面里图片的边框。

一般这样设置就行，有黑色的框框反而很难看。

.clear这里基本上不需要动，它的功能很大，不过不是你需要的。

.dis_none

a页面链接的设置。

这个是鼠标放上去前的样式。

a:

hover同上，不过这个是鼠标放上去后的样式。

#index

#container

#innerContainer整个主页面的设置。

这里只设置了宽度。

它包括了两大部分，一部分是日志主体，另一部分是副栏。

下面有介绍。

#outerContent日志主体部分。

padding-top指距页面顶部填充多少，margin-left指距页面左侧多少。

这样说有点狭隘，其实它还是包括在innerContainer部分里的，所以应该是距整个innerContainer的边框填充多少。

#outerSidebar副栏部分。

副栏就是你页面里日志主体旁边的那栏。

里面具体的内容有登录，评论，标签，搜索等等。

看你在首页和页面定制里放了什么，这里才会显示什么。

像我只放了日历，登录，日志更新，链接。

所以显示的内容只有那些。

elin如果看到这，就不需要设置了。

按你现在的模板看，没有副栏。

.innerBottom这个就是innerContainer部分的底部。

没有特殊的什么设置，如果你想在你的页面底部加个什么版权信息的话，这里可以调调颜色，也可以放图片。

具体就不说了，因为我没设置。

#header这里是你blog标题的设置了。

我只放了一张图片，就是页面上那个"男人和女人"的图片。

#headerh1blog标题。

#headerh1ablog标题的链接。

鼠标放上去前。

#headerh1a:

hover同上，鼠标放上去后。

#header.descriptionblog描述。

下面这部分是日志主体的设置。

很重要。

#content

#posts

#posts.postHeaderh2"阅读全文"后，日志页里的日志标题。

border-bottom是线条的设置。

我页面里有，喜欢的可以设置这个，不喜欢的不设置也行。

solid是实线。

dashed是虚线。

#posts.postHeaderh2a主页面里日志标题。

鼠标放上前。

#posts.postHeaderh2a:

hover同上，鼠标放上后。

#posts.postHeaderh3这个是分类的设置。

#postsdiv.category

#postsdiv.categorya

#postsdiv.categorya:

hover

#postsspan.category

#postsspan.categorya

#posts.postBody整个日志主体部分的设置。

height是行距。

#posts.postBodyp每段间的设置。

#posts.postFooterfooter这整个一部分是日志后面，有tag，时间，阅读全文，评论的那块。

具体的下面列的很清楚。

#posts.postFooter.tagstag部分。

这里我没改动过，我没有设置tag，主页上的部分也去掉了。

#posts.postFooter.tagsa

#posts.postFooter.tagsa:

hover

#posts.postFooter.menubar昵称，我也去掉了。

#posts.postFooter.menubara

#posts.postFooter.menubara:

hover

.pageNavi这一块是日志页数的设置。

.pageNavispan

.pageNavia

.pageNavia:

hover

副栏的设置。

这部分能省的我要全省了，前面说得很详细，各位举一反三..

#sidebar.module副栏里所有内容的标题设置。

#sidebar.moduleh2

#sidebar.module.modBody

#sidebar.moduleulli

#sidebar.modulea

#sidebar.modulea:

hover

#sidebar.modBodyformdiv这一部分都是"登录框"的设置。

可惜新版的bus已经把登录框去掉了，没有设置无所谓。

#sidebar.modBodyformdivlabel

#sidebar.modBodyformdivinput

#sidebar.modBodyinput#username

#sidebar.modBodyinput#password

#sidebar.modBodyinput.button

#sidebar#search.modBodyinput副栏里"搜索"板块的设置。

我没要搜索，喜欢的同学可以设置玩玩。

#sidebar#search.modBodyinput.button

#sidebar#profileaimg.avatar这个好像是"个人信息"的设置。

我也没有弄。

#sidebar#profilea:

hoverimg.avatar

#sidebar#profileh3.author

#sidebar#profile.about

#sidebar#calendar这一块是"日历"的设置。

后面都是个性化的小设置，喜欢的话可以随便改。

#sidebar#calendar.modBody

#sidebar#calendarh2

#sidebar#calendartable

#sidebar#calendartablea

#sidebar#calendartabletd

#sidebar#calendartable.calendarHeadtd

#sidebar#calendartable.weektd

#sidebar#calendartable.daytda

#sidebar#calendartable.daytda:

hover

#sidebar#calendartable.daytd.today

#sidebar#meta这一部分就是bus的那些logo，rss订阅等乱七八糟的东西。

我已经在主页面上全部去掉，所以这里不需要管。

#sidebar#metali

#sidebar#metali.statistics

#sidebar#metali.subscribeimg

#sidebar#metali.poweredByimg

#sidebar#metali.poweredBydiv

#sidebar#custom

span.time

"引用"部分的设置。

#trackbacksh2

#trackbacks.desc

#trackbacksli

#trackbackslih3

#trackbackslih3a

#trackbackslih3a:

hover

#trackbackslidiv

#trackbackslidiv.time

日志页里评论部分的设置。

#commentsh2

#comments

#commentsli

#commentsli.cmtBody

#commentsli.reCmtBody

#commentsli.reCmtBodydiv

#commentsli.menubar

#commentsli.menubara

#commentsli.menubara:

hover

日志页里评论框的设置。

#commentForm

#commentFormh2

#commentFormformdiv

#commentFormformdivlabel

#commentFormformdivinput

#commentFormformdivtextarea

[xmlns]#commentFormformdivtextarea

#commentFormformdivinput.button

[xmlns]#commentFormformdivinput.button

差不多了。

就这样吧，你选择不同的模板，代码自然也不同，具体情况具体分析。

elin你是不应该请我吃鸡腿阿..哈哈。

其实我估计也没帮上什么忙，你的那个模板，如果想搬到新系统里来用的话，不是不可以的。

你在index和detail里把框架弄好，然后在css里改应该就行。

稍微有点麻烦的是，新系统里index和detail的代码很乱，不是很好操作。

呃，慢慢试吧，这点难不倒你的..

本文来源于：

作者:

博客技巧基地；原文地址：

[第一章]什么是CSS-层叠样式表

CSS就是一种叫做样式表（Stylesheet）的技术。

也叫作层叠样式表（CascadingStylesheet）。

如果你在主页制作时采用了CSS技术的话，你便可以轻松而又有效地对页面的整体布局、字体、颜色、链接、

背景和其它效果实现更加精确的控制。

而且修改起来也非常简单，只要将相应的代码做一些简单的修改，就

可以改变同一页面的不同部分，或者不同页面的的外观和格式。

它的主要用途：

（1）CSS1.0在几乎所有的浏览器上都可以使用。

你可以在Dreamweaver里轻松实现。

（2）使页面的字体变得更漂亮，更容易编排，使页面效果达到真正的赏心悦目。

（3）以前一些非得通过SwapImages实现的功能，现在只要用CSS就可以轻松实现，从而减小文件大小。

（4）你可以轻松地控制页面的整体风格和布局。

（5）如果你将站点上所有的页面都使用同一个CSS文件进行控制（link形式），那么你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。

只要修改这个CSS文件中相应的代码，那么整个站点的所有页面都会随之发生变动。

想一想，没有使用CSS前我们是如何控制字体的颜色和大小以及所使用的字体的？

我们一般使用HTML标签来实现，例如实现右侧一个简单的“Dreamweaver”，它的代码是：

如果我们在一个页面里需要频繁地更替字体的颜色大小，最终生成的HTML代码的长度一定臃肿不堪。

说实话，CSS的出现简化这样的工作，当然它的功能决非这么简单。

CSS是通过对页面结构的风格控制的思想，控制整个页面的风格的。

将（CSS样式表）放在页面中，通过浏览器的解释执行，是完全的文本格式，任何懂得HTML语法的的人都可以掌握并将它应用到自己的页面里，非常的容易。

即使对一些非常老的浏览器，也不会产生页面混乱的现象。

下面是一个样式单的例子：

--------------------------------------------------------------------------------

欢迎光临织梦地带，让我们一起织梦！

！

！

Hello，Everybody，WelcomeinDreamweaverZone!

--------------------------------------------------------------------------------

而产生以上效果的HTML源代码是这样的：

--

h2

h1

-->

欢迎光临织梦地带，让我们一起织梦！

！

！

Hello，Everybody，WelcomeinDreamweaverZone!

下面是以上代码的一些简单的说明：

（1）在加粗的CSS代码里这样定义了文字的风格，标签

...

同样的，标签

...

（2）在上面的CSS代码里，h1和h2称为“选择对象”，font-size以及color等称为“属性”，属性后面的称为“参数”。

（3）通过css可以控制任何HTML标签的风格。

例如,

,