blogbus代码分析.docx
- 文档编号：9968466
- 上传时间：2023-05-22
- 格式：DOCX
- 页数：18
- 大小：24.52KB
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代码里这样定义了文字的风格，标签
...
间的字符为“宋体”，“大小12pt”，字符是“加粗”的，颜色“#ff0033”，字符背景色“#CCCCCC”。同样的，标签
...
之间的文字字体“arial”，大小“12pt”，颜色“#993300”。（2）在上面的CSS代码里，h1和h2称为“选择对象”，font-size以及color等称为“属性”，属性后面的称为“参数”。
（3）通过css可以控制任何HTML标签的风格。
例如
| 等。 只要在HTML的 区内的（4）如果你需要定义的一些标签的风格相同，可以将他们写在一起，这样又可以减少代码了： H1,P,TD 上面的代码表示： 所有位于 、和 标签内的字符将用Arial字体，12pt显示。 | （5）CSS设置的风格对于Javascripts输出的结果也是同样有效的。 （6）NOTES： 有的比较老的浏览器并不支持样式表单语法，会将 --和-->代码。 这一点与Javascripts相同。 （7）在 CSS的写法可以用以下的几种方法实现： （1）使用Embed（嵌入样式表单）排版样式： 即将CSS代码直接插入每个页面的HTML的 使用标签。 例如： -- .p9 h2 h1 --> （2）使用“link（外部样式表单）排版样式”： 东城牧人推荐使用 即你可以将多个页面的排版风格都用一个样式单文件控制。 这个外部的样式单文件（一个扩展名是css的文本文件）将设定你所有网页的规则。 如果你改变样式单文件中的某行，所有页面风格用这个css文件定义的页面都会随之改变。 如果你的站点文件非常多，则这项功能就非常方便了。 另外，使用“Link”可以免除页面被别人下载后直接使用。 在 区内使用标签（注意：不再是 输入的外部式样单其中my.css样式单文件的内容如下： h3 执行的结果如下： 输入的外部式样单 Notes: CSS的继承性问题： 看了下面的例子就知道了，如果定义 层叠式样单的例子对于标签并没有设定样式，但因为位于 层叠式样单的例子 Notes: CSS的优先级问题： 如果混合使用三种式样单，优先级： Inline>Embed>Link式样单。 Notes: 特别指定的样式单的优先级大于继承的式样，例： BODY P 特别规定是： 中的文字用黄色显示，但它同时也继承了 的绿色规定。但是特别指定了的式样的优先级大于继承的式样，所以 之内的文字用黄色显示。 Notes: NetscapeCommunicator和IE4.0对于CSS的理解是不完全相同的。 这就意味这并非全部的css都能在两个浏览器中执行时得到同样的结果。 所以，最好使用两种浏览器检测一下。 [第五章]关于CSS中的类--CLASS *Notes先看一个简单的例子： 以下是常见按钮，使用“类”控制字体的按钮是不是漂亮了许多？ 而没有使用“类”控制的按钮的字体看上去就有点变形？ 本例使用9pt大小的宋体字控制的。 这是“类”的一个用途。 奥秘是这样的： 先定义一个“类---class”： -- .pt9 --> 这里“类”的名字叫做“pt9”,前面有一个“.”。 然后在HTML中加上class="pt9"即可，如下： 是不是非常简单？ ★☆★再进一步看看--一个标签可以定义数个“类”。 P.green P.yellow P.red 在HTML中，这样做（只要引用相应的类就可以了）： 显示的结果如下： 绿黄色显示的字符 黄色显示的字符 红色显示的字符 ★☆★使用CSS你可以对页面的字体进行任意的控制，比起HTML简直方便不知多少。 CSS使用“font-size”属性来控制字体大小。 CSS中可以使用的单位： points,pixels等单位。 ★使用points（点）: 东城牧人推荐使用 .p9 告诉浏览器以9points的尺寸显示字符，本页就采用9pt的字体，我认为“宋体+9pt”是非常漂亮的。 也是目前大多数的站点所使用的。 Points是确定文字尺寸非常好的单位，它在所有的浏览器和操作平台上都适用。 ★使用pixels（象素）: td 使用“象素”的缺点是，页面显示不稳定，字体时大时小，而使用points则没有这种问题。 此外你还可以使用如下的单位： in（英寸） cm（厘米） mm（毫米） ★☆★字型控制 可以只设置一种字体。 也可以设置多种字体，将按照字型顺序查找显示。 字型名字包括2个以上的词时，要使用引号。 在Dreamweaver里可以编辑字体列表，你就不用去记那么多的名字了。 ★☆★字体粗细控制 字体加粗显示，还可以使用： extra-light,light,demi-light,medium,demi-bold,bold,extra-bold等参数。 ★☆★字型样式控制 设置字体倾斜，可以使用normal,italic。 ★☆★经常有朋友问： 如何使有链接的文字不出现下划线，如何使鼠标移动到超连上产生变色的效果，如何使得Onmouseover的时候，文字的背景发生变化？ 其实这些通过传统的方法是办不到的。 而通过使用CSS却可以非常轻松地作到，
冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
该用户的其他资源 更多>>
猜你喜欢
关于本文
相关资源
更多
|
|---|
《城市经济学》考试考点及复习题总结.docx
教育心理学单选多选专项训练.rtf资料文档下载
二元一次不等式组与平面区域.ppt
