新浪博客模版代码精讲二_大话游虾

http://blog.sina.com.cn/u/1436959221

首页博文目录关于我

个人资料

微博

加好友发纸条

写留言加关注

博客等级：
博客积分：

博客访问：
关注人气：
获赠金笔：0支
赠出金笔：0支
荣誉徽章：

正文字体大小：大中小

新浪博客模版代码精讲二

(2006-12-13 10:31:09)

分类：一笔之力（blog教程及其他）

本文内容为[大话游虾]原创，请转载者注明出处！！

上次讲到了css的一些基本特性和代码的基本写法。（相关链接：《自己改新浪博客模版》、《新浪博客模版代码精讲一》），这次游虾将用现在（2006.12.13）的模版作为范本给大家讲一讲自己做模版需要做到些什么。

<STYLE type=text/css> body {background:url("http://s16.sinaimg.cn/orignal/4a2a34e3ef72078b6720f") repeat fixed!important;} .bodyTop {display:none;} .logo{display:none);} .banner{background:url(http://s3.sinaimg.cn/orignal/4a2a34e3498b6e4a70682) no repeat no scroll!important;;HEIGHT: 243px} .menu{background:url("http://s15.sinaimg.cn/orignal/4a2a34e326dd2d81a3e2e") no-repeat center;HEIGHT: 28px} .feeds .function{background:url(display:none)! important} .feeds .up{background:url(display:none)} .feeds .down{background:url(display:none)} .links .up{background:url(display:none)! important;} .links .down{background:url(display:none)! important;} .callboard .up{background:url(display:none)! important;} .callboard .down{background:url(display:none)! important;} .comment .up{background:url('display:none')! important} .comment .down{background:url('display:none')! important} .comment .iUp{background:url("display:none")! important} .comment .iDown{background:url("display:none")! important} .serial .up{background:url("display:none")! important} .serial .down{background:url("display:none")! important} .gbook .up {BACKGROUND:display:none! important;} .gbook .down {BACKGROUND:display:none! important;} .aList .sysHand .up {BACKGROUND: url(display:none)! important} .aList .sysHand .down {BACKGROUND: url(display:none)! important} .circles .up{BACKGROUND: url(display:none)! important} .circles .down{BACKGROUND: url(display:none)! important} .bodyBg {background:url(http://s10.sinaimg.cn/orignal/4a2a34e3d70e9ad4721a9)! important} .links .more{background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/2/images/more.gif") no-repeat center! important;} .feeds .page{background:url(display:none)! important;} .calendar .mid{background:url(display:none)! important;} .callboard .mid{background:url(display:none)! important;} .links .mid{background:url(display:none)! important;} .photo .mid{background:url(display:none)! important;} .label .mid{background:url(display:none)! important;} .links .top{background:url(display:none)! important;} .photo .top{background:url(display:none)! important;} .label .top{background:url(display:none)! important;} .calendar .top{background:url(display:none)! important;} .callboard .top{background:url(display:none)! important;} .links .bottom{background:url(display:none)! important;} .label .bottom{background:url(display:none)! important;} .photo .bottom{background:url(display:none)! important;} .calendar .bottom{background:url(display:none)! important;} .callboard .bottom{background:url(display:none)! important;} .gbook .post {BACKGROUND:display:none !important;} .gbook .pTextarea {BACKGROUND:display:none!important;} .gbook .input {BACKGROUND:display:none!important;} .gbook .aSubmit{background:url('http://s11.sinaimg.cn/orignal/55a641f5fe5e854dd4e0a') no-repeat center! important;} .gbook .pSubmit{background:url('http://s15.sinaimg.cn/orignal/55a641f5e97edae7d558e') no-repeat center! important;} .add .ico{background:url("display:none")!important;} .add{background:url("display:none")!important;} .serial .comm{background:url("http://s14.sinaimg.cn/orignal/55a641f53e98abfe0d95d")! important} .comment textarea{background:url("display:none")! important} .bodyBottom{background:url(http://s2.sinaimg.cn/orignal/4a2a34e3ea8cf52eb1501);height:100px;} .feeds .title A {FONT-FAMILY: Tahoma,monospace,arial,system! important;TEXT-ALIGN: center! important;FONT-SIZE: 16px! important;color:#006464! important;} .feeds .title{TEXT-ALIGN: center! important;} .menu a{color:#000! important;margin-top:-100px! important} .menu .text{color:#000! important;margin-top:-100px! important} .links .text{color:#fff! important;TEXT-ALIGN: center! important;font-size:16px! important} .callboard .title{color:#fff! important;TEXT-ALIGN: center! important;font-size:16px! important} .links .desc{color:#005151! important;} .feeds .text{color:#005151! important;} .links td a{color:#000! important;} .feeds .time{color:#005151! important;} .banner .link a{color:#005151! important;} .photo .infoText a{color:#005151! important;} .feeds .title a{color:#000! important;} .feeds .function a{color:#005151! important;} .feeds .page a{color:#005151! important;} .feeds .page span{color:#005151! important;} .feeds .text a{color:#8000FF} .add a{color: #005151! important;} .photo .infoText a{color:#005151;} .feeds .time{color:#005151;} .box_1 td{color:#000! important;} .box_1 {POSITION: relative; TOP: 30px;left:10} .box_2 {POSITION: relative; TOP: 20px} .gbook .title{color:#000! important;text-align:center;font-size:18px;} .gbook .title{background:#transparent! important} .gbook .aAuthor{color:#005151! important;} .gbook .item a{color:#005151! important} .gbook .text a{color:#FF0080! important} .gbook .text{color:#5E8E8C! important} .gbook .aText{color:##008080! important;} .gbook .postFSet{color:##15B6C8! important;} .gbook .postFSet legend{color:#005151! important;} .gbook .page a{color:#005151 !important;} .gbook .page span{color:#C40005! important;} .aList .list .title{color:005151! important} .aList .sysHand .up{color:#005151! important;} .aList .sysHand .down{color:005151! important;} .aList .list td{color:005151! important;} .aList .page a{color:005151! important;} .aList .page span{color:#c4005! important;} .serial .title{color:#005151! important;} .serial .listTitle a{color:#005151! important;} .serial .listNo{color:#005151! important} .serial .outline{color:#005151! important} .serial .outline a{color:##FF0080! important} .serial table td{color:#005151! important;} .serial .total{border-top:1px dashed #FF0080! important;border-bottom:1px dashed #FF0080! important;} .foot {display:none} .banner table{background:#transparent; filter:alpha(opacity=100); border:0px solid #000;} .banner .title td{display:none} .banner .link{display:none} A:hover {LEFT: 1px; POSITION: relative; TOP: 1px} body{ SCROLLBAR-FACE-COLOR:#609b9d; SCROLLBAR-HIGHLIGHT-COLOR:#609b9d; SCROLLBAR-SHADOW-COLOR:#609b9d; SCROLLBAR-3DLIGHT-COLOR:#609b9d; SCROLLBAR-ARROW-COLOR:#c4ece9; SCROLLBAR-TRACK-COLOR:#c4ece9; SCROLLBAR-DARKSHADOW-COLOR:#c4ece9; } .bodyTop{width:900px;} .bodyBg{width:900px;} .bodyBottom{width:900px;} .feeds .text{width:600px;} .label{width:240px;} .photo{width:240px;} .callboard{width:240px;} .links{width:240px;} .calendar{width:240px;} .zone{width:240px;} .sysBr180{width:240px;} a:hover {cursor:url('http://dhyouxia.googlepages.com/Link.ani')} BODY {cursor:url('http://dhyouxia.googlepages.com/Arrow.ani')} .syshand{cursor:url('http://dhyouxia.googlepages.com/Link.ani')} </STYLE>

的确，代码有些多，但大家千万别被这些代码所吓到，因为很多东西都是有规律可循的，完全不必担心你会看不明白。

首先我们看到的是

<STYLE type=text/css>

STYLE，英文意思是“样式”，也就是说告诉浏览器，从现在开始我们将使用css代码对网页进行定义，一直到</style>（也就是代码的最后一行）结束。

下面的一排body{background:url("图片文件地址") repeat fixed!important}代码的意思前面已经说过，fixed的英文意思就是“固定”的意思，所以你们可以看到我的大背景是固定不动的（相关链接：《新浪博客背景图片全代码》）

接下来看到的是

.bodyTop {display:none;}和.logo{display:none);}

bodyTop和log是新浪题图上面的一排——

在很多时候，这一排logo会影响模版整体的效果，与我们期望的风格有冲突，所以在这里动用了display:none代码。

display——显示，none——没有。很显然，这是告诉浏览器，这个东东就不显示了。于是难看的log被无情的屏蔽了：）

banner（前面文章以提到过）和menu（菜单的意思，就是那排写着“登录┆系统消息┆控制面板┆搜索┆帮助┆退出”的地方）肯定风格要统一，因为二者是紧密相连的部分。

相对与其他部分来说，这一部分高度值可以自行更改，就像

.menu{background:url(“图片地址") no-repeat center;HEIGHT: 28px}

加上了HEIGHT：28像素。这个XXpx其实就是你用作menu（或者banner）的图片的高度值，图片有多高就照着设置多大。

接下来就是长长的一排含有display：none属性的部分，其实这些都是模版里各部分的图片，比如文章标题栏的图片，面板里的图片等等，在游虾的这个范例里，因为这些都和模版本身有风格上的冲突，所以都使用display：none将其隐藏了。

这里要着重提到的是——严格来说，display：none用在这里并不是正确的用法，正确的代码应当是

background:#transparent（背景透明）

当然你要说我非要用display：none不可，那也没有什么不好的后果。（大家如果有兴趣可以试试连display：none都不要，只是直接把图片地址删掉，一样有屏蔽图片的作用哦！）

除了这些以外，还有一个非常重要的代码。

! important

important，英文意思是“重要”，加上! important其实就是告诉浏览器，如果遇到代码冲突（比如新浪自带的模版代码和我们自定义的模版代码）那么以加有! important的代码为首选，有些朋友在更换了模版图片或者高宽度之后发现并未起效，可能就是在某些地方忽略了! important属性，请大家一定要注意这点！

字数原因，今天先讲这么多，下次再来跟大家讲讲一些模版细节方面的问题。再会，朋友们！！

新浪博客模版代码精讲 二

新浪博客模版代码精讲二