博客网 >

说说如何更改文字颜色和给非日志板块插入背景图片。

  第一招——将图片作为文章栏目的背景。

  找到以下这段代码:

  /*=======栏目=======*/

  div#category{

  ……

  在它的最后面加一句话:

  background-image: url(图片网址);

  比如我的是:

  /*=======栏目=======*/

  div#category{

  margin-left:12px;

  margin-right:12px;

  color: #636563;

  height: 30px;

  padding-top:12px;

  margin: 5px;

  background-image: url(http://bimzcy.blogchina.com/inc/xiaonvhai.jpg);

  }

  (友情提示:根据笔者的经验,图片的宽度以<=540象素合适,如果超过这个宽度的话可以用ACDSEE来裁剪、来重调图片大小,很方便的)

  第二招——将图片作为博客介绍的背景

  找到以下这段代码:

  /*=======Blog介绍=======*/

  div#blogContent{

  在最后同样加入一段下面的代码:

  background-image: url(图片网址);

  比如我的是

  /*=======Blog介绍=======*/

  div#blogContent{

  width:570px;

  text-align: left;

  background-color:#ffffff;

  font-family: Arial,Helvetica,sans-serif;

  font-size:9pt;

  color: #333333;

  margin-top:2px;

  background-image: url(http://bimzcy.blogchina.com/inc/xiaonvhai.jpg);

  }

  (嘻嘻,为了省事,弄的是同一张图片)

  第三招:同时改变主页上的“文章”、“最新文章”、“日历”、“快速登陆”、“在线留言”、“友情链接”这些标题文字颜色(但我想如果要只改其中的一项的颜色也是可以做到的,不过今天太累了,就研究到这里了)。

  找到以下代码:

  /*===============每一栏的标题=====================*/

  h4{

  font-family: Arial,Helvetica,sans-serif;

  font-size:9pt;

  font-weight: bold;

  color: Black;

  把color:后面的颜色名称改为你想要的颜色名称即可。

  第四招:改变文章栏目(目录)的文字颜色。

  早些时候看到论坛里有网友宣称做到改变文章栏目颜色,还说very easy。然而我照他们的方法做了后发现能是能实现改变颜色,但是并不是最优的办法。其中一种比较典型的做法是通过改变最开始的

  a:link {

  font-family: Arial,Helvetica,sans-serif;

  FONT-SIZE: 9pt;

  COLOR: #333333;

  LINE-HEIGHT: 20px;

  TEXT-DECORATION: none;

  }

  a:visited {

  font-family: Arial,Helvetica,sans-serif;

  FONT-SIZE: 9pt;

  COLOR: #333333;

  LINE-HEIGHT: 20px;

  TEXT-DECORATION: none;

  }

  a:hover {

  font-family: Arial,Helvetica,sans-serif;

  FONT-SIZE: 9pt;

  COLOR: #0099ff;

  LINE-HEIGHT: 20px;

  TEXT-DECORATION: blink;

  }

  中的color:后面的颜色代码来实现。然而这种做法的最大缺点是——这么一改后,所以的文字都同一变成了改后的颜色,也就是说作用范围有些大得过头了。

  下面是我自己钻研出的一种改且只改文章栏目字体的办法:

  找到以下代码:

  /*=======栏目=======*/

  div#category{

  margin-left:12px;

  margin-right:12px;

  color: #636563;

  height: 30px;

  padding-top:12px;

  margin: 5px;

  }

  然后在其后面加入以下代码:

  div#category a:link {

  font-family: Arial,Helvetica,sans-serif;

  color: Red;

  text-decoration: none;

  }

  div#category a:visited {

  font-family: Arial,Helvetica,sans-serif;

  color: Red;

  text-decoration: none;

  }

  div#category a:hover {

  font-family: Arial,Helvetica,sans-serif;

  color:MediumOrchid;

  text-decoration: none;

  }

  这里大家可以把color:后面的颜色名称随便改成自己喜欢的颜色名称。

  具体说明是:a:link里的color代表文字的初始颜色(访问前),a:visited里的color代表文字(链接)被访问(即被鼠标点击)后的颜色,a:hover里的color则代表鼠标指针指在它上面时的颜色。

  第五招:改变博客介绍的文字颜色

  找到以下代码:

  /*=======Blog介绍=======*/

  div#blogContent{

  width:570px;

  text-align: left;

  background-color:#ffffff;

  font-family: Arial,Helvetica,sans-serif;

  font-size:9pt;

  color: #F8F8FF;

  margin-top:2px;

  将color:后面的代码改成你想要的颜色的代码即可(注意不是改background-color)。

  附录1:

  颜色代码表1,里面包含了各种颜色的代码和名称:

  http://www.toodoo.com/db/color.html

  颜色代码表2,同上:http://www.91qz.com/Article/Class6/Class8/200409/355.html

  附录2:

  颜色代码拾取器1,用来拾取颜色代码的工具,鼠标指到什么地方,它就显示什么地方的颜色代码,必备的好工具:http://www.herozhan.com/soft/2132.htm

  颜色代码拾取器2,同上:http://www.msmir.net/Soft/down200/down1000/200505/700.html

【作者: 【白月光下】】【访问统计: 486】【2005年11月18日 星期五 13:06】【 加入博采】【打印

<< 博客背景颜色的设置和修改方法 / 网页制作的各种效果 >>

专题推荐

不平凡的水果世界

不平凡的水果世界

平凡的水果世界,平凡中的不平凡。 今朝看水果是水果 ,看水果还是水果 ,看水果已不是水果。这境界,谁人可比?在不平凡的水果世界里,仁者见仁,智者见智。

中国春节的那些习俗

中国春节的那些习俗

正月是农历新年的开始,人们往往将它看作是新的一年年运好坏的兆示期。所以,过年的时候“禁忌”特别多。当然,各个地方的风俗习惯不一样,过年的禁忌也是不一样的。

评论
0/200
表情 验证码:

cb83184929

  • 文章总数0
  • 画报总数0
  • 画报点击数0
  • 文章点击数0
个人排行
        博文分类
        日期归档