| 分类: 一笔之力(blog教程及其他) |
学习CSS,自己更改新浪博客模版
【本文内容,为“大话游虾”原创,转载请注明出处】
随着新浪博客使用人数越来越多,各种blog技巧也越来越受到大家的欢迎,不过可以看到的是,现在有些blog“老师”教授的技巧,尤其是模版技巧,仍然停留在对css文件的修改上,实际上,这些技巧都是在新浪本身的css文件中发掘出来的,一天拿一点出来固然能够对博客点击率产生不错的影响,但对于真正想学好css设置的朋友却未必是件好事。
新浪博客的界面是基于css文件的,这也是现在web2.0时代的一个共性——网友自己参与到网站的建设中来,给大家带来了不少的乐趣。
现在游虾把新浪默认的css文件地址放出来,大家可以用记事本打开(推荐使用UltraEdit-32),对里面的内容进行研究和学习。
博客首页模版整体文件
博客首页正文摘要模版文件
博客留言板模版文件
新窗口打开的文章正文模版文件
文章评论处模版文件
在新浪的css文件里,我们能够比较明显的看到和更改的主要是一些高度(height)和宽度(width)值,以及更换模版图片和修改模版文字的颜色大小等等。学会看懂css文件,就是更改模版的第一要素。下面游虾就典型的一些代码给大家讲解一下css代码的基本语法——
.feeds .title A {FONT-SIZE: 18px!
important;}
这是一段关于文字的代码,.feeds.title A
是对象名称,即告诉浏览器应当处理的对象是什么,{}大括号内的就是代码,例如上面的这段,FONT-SIZE
会点英语的人一看就明白了,这是对文字(FONT)大小(SIZE)进行设置,设置多大呢?18像素(PX)。(像素是计算机图像的大小单位,表示图像纵向和横向的点阵数量,例如一般显示器的分辨率是1024*768,就代表显示器此时横向显示1024个点阵,竖向显示768个点阵)
代码到这儿就完了,为什么还要有个!important
呢?这个代码的意思是优先级,也就是浏览器在解析的时候会将加有!important
的代码进行优先显示,如果有时候你的代码设置正确也无法出现期望的效果的时候就应当加上它试试。
另外,如果同时有两个以上的代码,别忘了加上“;”,这是代码的分隔符,在每一个分号后面都可以接着放入可作用于该对象的其他代码(注意分号为英文输入状态下,非中文分号)
再看看下面的这个代码——
.banner {BACKGROUND: url(http://s13.sinaimg.cn/orignal/55a641f54272fc3a79ffc); WIDTH: 900px; HEIGHT: 300px}
这是题图banner的修改代码,.banner是被修改对象,大括号里的BACKGROUND:
url指的是banner背景图片(BACKGROUND)的网址(url),后面跟着的当然就是图片的地址了,分号之后紧跟着一个WIDTH和HEIGHT是指banner的宽度和高度。各个代码之间用分号分隔。
当然了,在css语法里还有不少特效,一般没有学习过网页制作的朋友很难自行改动,可以配合现在众多的博客教程进行设置。但是基本上css代码的格式就是:
.对象名称{代码;代码;}
我们只需要对“代码”部分进行修改(改改宽度高度值、文字颜色、图片的地址等等),然后多加实验,你也会成为css模版高手的哦!!
这篇文章作为《新浪博客变脸总动员》的完结篇,希望能把修改博客的方法告诉大家,而不是让大家等着别人研究一点再学一点,有兴趣的可以买一本网页制作的书籍来看看,没兴趣的就用现成的代码好了,博客本来就是一个自己的网络空间,文章才是最重要的,美不美化就看个人的兴趣了。
好了,连载断断续续长达一年的《新浪博客变脸总动员》结束了,但游虾为博友服务的行动不会结束,将来还会有更精彩的内容等着大家捧场呢!!
再会,朋友们!!!
游虾的其他教程文章:
游虾的其他教程文章:

加载中…