加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

实现二级页面和首页模板同步【新浪首发】

(2007-03-06 17:53:02)
分类: 互联科技类映日花别样红
   前置知识:实现博客首页和文章模板同步:大家在阅读本文前必须学会上面的文章中讲解的css文件的调用)
   什么是二级页面?
   大概很多人对这个词汇还是比较的陌生,所谓的二级页面就是在你的博客首页新窗口中打开你的文章所在的页面就成为二级页面。
   目前,大家对博客的美化仅仅停留在对首页的装饰上.打开新的文章页面(二级页面) 之后又回到了新浪自己的博客模板,心里自然不爽。如何才能更好的做到首页和二级页面同步(即自己定义的模板)呢?冰河今天就和大家一起武装我们的二级页面,让我们的二级页面和首页一样炫!
  
   二级页面的css代码,不少人已经测试过了。但是都没有从根本上解决二级页面与博客首页模板同步的问题。因为大多数人对自己博客首页的美化是通过修改:.banner;.menu;.bodyBg;.bodyBottom四处的图片地址、高度和宽度而隐藏.sysW770属性来实现的。但是在二级页面
中.bodyBottom处的宽度无论如何定义都可能不能满足要求,结果影响了页面整体的协调,更有甚者在二级页面将.sysW770属性隐藏,导致页不
能完整显示。
   由此可见,二级页面美化的关键在于不能隐藏.sysW770属性(:首页没有采用底部图片可以不用考虑此点)为了实现二级页面与首页同步,突破思维定势,可以用.sysW770 去替换.bodyBottom属性 即可以在首页采用修改 .banner;.menu;.bodyBg;.sysW770四处的图片地址、高
度和宽度而隐藏.bodyBottom属性来美化博客这样就能使首页和二级页面的代码统一,不会造成调用冲突而无法正常显示!
二级页面的css代码如下:
<style type=text/css>
body
{background:url(整体背景图片地址) repeat fixed!important;}
.bodytop
{background:url(题图上横白条背景图片地址) no repeat no scroll!mportant;}
.banner
{background:url(横幅题图背景图片地址) no repeat no scroll!important;}
.menu
{background:url(题图下的菜单背景图片地址) no-repeat center;}
.bodybg
{background:url(文章部分主体图片地址) no repeat no scroll!important;}
.sysW770
{background:url(页面底部背景图片地址) no repeat no scroll!important;}

.logo{display:none;} /*隐藏logo*/

.bodytop{display:none;} /*隐藏顶部横白条*/
.banner .title td{color:#0cf;font-size:40px;font-family:宋体;FILTER: glow(color=#000000,direction=2);}
/*博客标题文字大小,颜色,字体,阴影*/ 
.banner .link a,.banner .link td{font-size:13px;color:#0cf;font-family:宋体;filter: glow(color=#ECF5FF,direction=2);}
 /*博客地址﹥复制﹥收藏本页文字大小,颜色,字体,阴影*/

.menu a{color:#000;}      /*菜单部分“HOME、登录、注册、搜索、帮助”颜色*/
.menu .text{color:#000;}  /*菜单部分“┆”符号颜色*/
.menu .text a{color:#000;} /*菜单部分“登录、注册、搜索、帮助”颜色*/
.menu .home a{color:#000;} /*菜单部分处“HOME”颜色*/
.add{background:#transparent;}  /*“发表文章”四个字背景透明*/
.add a{color:#000;}     /*“发表文章”四个字的颜色*/
.add a{display:none;}   /*隐藏“发表文章”四个字*/
.article .title{color:#333;font-size:15px;font-family:宋体;font-weight:bolder;filter:shadow(color=gray,strength=3);text-
align:center;!important;} —文章标题字体样式:颜色,大小,字体,加粗,阴影,居中
.photo .mid{background:url(个人形象照片处的背景图片地址);}

.photo .infoText a{color:#000;}   /*形象照片处文字颜色,例如:冰河的BLOG*/

.links .up,.links .down{background:url(上下翻时的图片地址);}  /*活力地带,我的文章分类,最近更新的BLOG列表标题上下翻图片地址*/
.links .up,.links .down{background:#transparent;} /*标题上下翻图片透明*/
.links a{color:#000;}  /*标活力地带,我的文章分类,最近更新的BLOG列表出字体的颜色*/

.links .text{color:#000;} /*个人首页,控制面板,我的文章,我的相册,给我留言,我的文章分类,最近更新的BLOG列
表处文字的颜色*/
.article .up,.article .down{background:url(文章标题上下翻时的图片地址);} /*文章标题上下翻图片地址*/
.article .up,.article .down{background:#transparent;} /*文章标题上下翻图片透明*/
.article .text {color:#000;}  /*正文章中字体的颜色*/
.article .function a{color:#000;} /*'评论,引用,阅读,打印'等文字的颜色*/

.article .function td{color:#000;} /*评论,引用,阅读,打印中的“┆”符号颜色*/
.comment .title td{color:#000;} /*“文章评论”的字体颜色*/
.comment .up,.comment .down{background:url(上下翻时的图片地址);} /*'文章评论'上下翻背景图片*/
.comment .up,.comment .down{background:#transparent;}  /*“文章评论”出上下翻图片透明*/
.comment .alt{color:#000;} /*“以下网友留言只代表其个人观点,不代表新浪网的观点或立场”文字颜色*/
.comment .item a{color:#000;} /*评论者名字颜色*/
.comment .iUp,.comment .down{background:url(上下翻时的图片地址);} /*评论者名字处上下翻图片地址*/
.comment .iUp,.comment .iDown{background:#transparent;} /*评论者名字处上下翻透明*/
.comment .iText{color:#000;} /*评论内容颜色*/
.comment .iPubdate{color:#000;} /*评论日期颜色*/
.comment .itemBody td{color:#000;} /*评论内容及日期颜色*/
.comment .page a{color:#000;} /*第(1/1)页颜色*/
.comment .page span{color:#000;} /*当前页“1”颜色*/
.comment .postFSet legend{color:#000;} /*虚线框处的“发表评论”字体颜色*/
.comment .post a,.comment .postFSet a,.comment .postBox{color:#000;} /*底部“发表评论”字体颜色*/
.comment .post{background:url(图片地址);} /*当前页“1”颜色*/底部“发表评论”四个字背景
#loginname{color:#f00} /*发表评论部分“昵称”后面框里的字颜色*/
#homepage{color:#f00} /*发表评论部分“主页”后面框里的字颜色*/
#checkwd{color:#f00} /*发表评论部分“验证码”后面框里的字颜色*/
#content{color:#f00} /*发表评论留言内容的字体颜色*/
.comment .postBox{background:#transparent;} /*“发表评论”区域透明*/
</style>
--------------------------------------------------------------------------------
重要说明:
1.以上代码添加到控制面板的自定义空白面板是无法正常显示的,必须采用css文件外部调用。
css文件外部调用代码:
<LINK media=all href=你的上传得到网址  type=text/css rel=Stylesheet>
如何添加css文件外部调用代码?
在控制面板的发表文章的面板下,写好文章后,点“代码模式”添加上述代码,并点“发表文章”。那篇文章二级页面需要与首页同步就添加爱上述代码即可。

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有