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

新浪博客模版代码精讲 一

(2006-12-11 10:03:39)
分类: 一笔之力(blog教程及其他)

新浪博客模版代码精讲 <wbr>一

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

从今天开始,游虾将连续为大家讲解新浪博客模版源代码的各部分详细含义,这个教程的目的就是让不会网页制作的朋友也能轻松自定义新浪的模版,所提到的代码均是新浪模版的源代码。我以前说过,很多“高手”之所以能轻松的更改模版上的一切,就是因为他们弄懂了新浪模版源代码,而弄懂了源代码,自然“一切皆有可能”。

好,废话不多说,先将新浪模版(朴素模版,即刚刚申请开通的博客基本的那个模版)的源代码进行详细分析——

要自定义模版,首先要定义的就是背景。在网页中,什么东西才是我们在浏览器中能看到的“背景”呢?那就是body

body的英文意思是“体、实体”,比如“No body”,就是“没人”的意思,那么在网页制作中,body就是网页的“身体”,要改变网页的背景,就是改变这个“身体的肤色”。

body {background:url("图片地址")}

这里,background顾名思义,就是背景的意思,url是指网络地址(就是网址啦),连起来的意思就是网络背景地址,在括号中就是要作为背景使用的图片的正确地址。

有了这个要素,我们就可以将任何的图片作为我们网页的背景。(当然,除此之外还有不少的特效代码,朋友们可以参照一下我前面的文章--《博客背景图片代码》

定义好body区域的背景,下一个重要的部分就是banner了。

banner的含义是横幅,条幅的意思,通常是网页的一个形象窗口,当然也有用它做广告的:)一个好的banner会使人对你的网页产生很高的亲近感,所以,我们需要对banner进行改造。它的代码也是遵循着css文件的标准,即——

banner {background:url("图片地址")}

banner后面可以跟随的参数一般有高度和宽度值,高度和宽度的代码分别是“height”、“width”,其实很多代码都是英文或者英文缩写,即使你没有网页基础,但粗通英语也是应当看得懂的。加上高宽值之后代码表现为——

banner {background:url("图片地址");height:130px;width:770px}

前面我的《博客背景图片代码》中已经提到过,px代表像素值,前面的数字要根据你的需要自行填写(新浪默认的宽度是770)。这段代码就是告诉浏览器,你的banner高度为130像素,宽度为770像素,banner图片为你制定的图片地址。

以此类推,我们可以将源代码中的所有图片更换成我们需要的图片。相关的一些值可以参考我以前的文章《新浪博客图片变变变!!!》,或者其他技术博客所提供的模版代码。

如果你不会网页制作,对英文又不太精通,那也没关系,只要你有钻研的精神,完全可以将模版里面的图片一个个替换来仔细分析一下前后发生的变化——是有些麻烦,但当年游虾自己也是这样一点点从新浪模版中扣选出那些有用的代码(那个时候游虾对网页制作一点点基础也没有!!!)

这一讲只是热身,让大家对css有一定的了解,下一将我将会逐条分析一个典型模版的各个含义,请大家一定捧场!!谢谢!!

转载请勿去掉此标识新浪博客模版代码精讲 <wbr>一

0

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

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

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

新浪公司 版权所有