为网站添加网址图标favicon.ico

DDBug — Sun, 01 Nov 2009 09:01:01 +0000

今天终于有时间把domety的图标设计好，并显示在了网站地址前面。如果你还不知道怎么把自己的图标放到网站上，今天DDBug就和你分享一下实现方法。

制作图标

首先是准备一张ico图标，你可以从网上搜索，不过最好是按照自己的想法制作一个自己的图标，如果你不会作图，可以找身边的朋友帮你做个。我的做法是先用photoshop做一个48*48的png格式的图标，然后再转换成ico格式。目前已经有很多网站提供在线转换ico图标的服务，比如这个网站http://tools.dynamicdrive.com/favicon/，它转换的效果不错，而且还支持同时包含32*32和48*48大小的图标

转换后

然后把图标下载到本地

上传图标

然后把图标上传到网站的根目录（图标文件的文件名一定要是favicon.ico）,这时候，一般来说你的图标应该可以显出效果了。可能你不想把favicon放在网站的根目录下，而是其它文件夹里(比如images目录下)，这样也是可以的，不过你需要在每个网页的头部之间添加一句代码

以wordpress为例，比如我把favicon.ico文件放在了主题模板的目录下面，那么我就在网页的头部添加了如下代码：

到这里其实我们的工作已经基本完成了，接下来就打开你的网站，测试一下有没有效果

如果你在打开你的网站的时候，没有在地址前面看到你的favicon图标，你可以先到下面这个网站测试一下

http://www.html-kit.com/favicon/validator/

你可以根据测试结果查找问题出在了哪里。如果在这里测试通过，都没有问题，那么就是浏览器保存的临时文件引起的。这时候其实你的图标已经生效了，只是你自己看不到而已。你可以把你的网址发给你的朋友，让你的朋友看一下有没有图标。或者删除你电脑中的网页临时文件，重新打开你的网站，一般来说就能看到效果了。这一步的处理方法由于浏览器的不同而不同。

版权声明: 转载时请以超链接形式标明文章原始出处和作者信息
本文来自: Domety»《为网站添加网址图标favicon.ico》
本文链接: http://domety.com/archives/135/
本文作者: DDBug
发表时期: 十一月 1st,2009
关键字: favicon html

本站的feed地址已经更改为http://feed.domety.com/,请朋友们手动更改一下，谢谢

CSS自定义链接样式常用技巧总汇

DDBug — Mon, 26 Oct 2009 17:04:25 +0000

首先我们先来看一下链接的默认样式：有下划线、蓝色，点击访问之后变为暗红色，激活状态下四周有虚线

http://domety.com>点击访问domety主页

效果

点击访问domety主页

那么如何改变这种样式，让我们的链接个性化呢？我们可以结合CSS技术，发挥你的想象，展现你的个性链接样式。

四个伪类

要达到个性化效果，用到的主要是CSS的四个伪类

a:link —— 未点击之前的样式
a:visited —— 访问之后的样式
a:hover —— 鼠标经过时的样式
a:active —— 激活时的样式

使用的过程中，一定要按照这个顺序，不然不起效果，既LoVe:HAte(注意大写字母)。

下面是些比较常用的技巧，你可以根据这些示例举一反三，制作出更多效果。本文的示例源文件可以通过文章后面的下载链接下载

自定义链接颜色

我们来实现这样一个效果：鼠标经过、激活以及访问之后都有不同的颜色，这个颜色你可以根据网站的配色方案定义。

比如CSS样式为

a:link{color:#FF7F00;}

a:visited{color:#1F9554}

a:hover，a:active{color:#2AFF2A}

自定义链接下划线

下面我们在上面例子的基础上添加这样一个效果：链接默认没有下划线，当鼠标经过以及激活的时候下划线出现。text-decoration可以定义有无下划线，CSS如下：

a{text-decoration:none}

a:link{color:#FF7F00;}

a:visited{color:#1F9554}

a:hover,a:active{color:#2AFF2A;text-decoration:underline}

我们还可以通过定义border样式来模拟下划线的效果，比如默认下划是虚线，当鼠标经过以及激活的时候变为实线，CSS如下：

a{text-decoration:none;border-bottom:1px dotted}

a:link{color:#FF7F00;}

a:visited{color:#1F9554}

a:hover,a:active{color:#2AFF2A;border-bottom-style:solid}

动态下划线

我们可以通过设定背景为一张动态的gif图片来实现动态下划线的效果。首先制作两张gif图片，一张用作默认不动的下划线(underline.gif)，另一张用作鼠标经过时的动态gif(underline_over.gif)，CSS如下：

a{text-decoration:none;background:url("images/underline.gif") repeat-x left bottom;}

a:link{color:#FF7F00;}

a:visited{color:#1F9554}

a:hover,a:active{color:#2AFF2A;background:url("images/underline_over.gif") repeat-x left bottom}

模拟按钮效果

为链接添加背景色或背景图片，可以实现按钮效果。下面是一个背景色模拟的按钮效果，当时鼠标经过时按钮颜色改变，CSS如下：

a{

display:block;

width:90px;

padding:2px;

text-decoration:none;

background-color:#94B8E9;

border:1px solid black;

color:#000;

}

a:hover,a:active{

color:#fff;

background-color:#369

}

另外一种方法是通过设置背景图片来实现这一效果。比如我们做三张按钮图片，分别作为默认（button.png）、鼠标经过（button-over.png）以及激活时（button-active.png）的状态，可以定义如下CSS样式来实现这一效果：

a{

display:block;

width:203px;

height:72px;

text-indent:-1000px;

background:url("images/button.png") no-repeat top left;

overflow:hidden

}

a:hover{

background:url("images/button-over.png") no-repeat top left

}

a:active{

background:url("images/button-active.png") no-repeat top left

}

这种方法有一个小缺点，可能在网页第一次加载的时候，当鼠标经过时需要切换图片，所以需要加载另一张图片，这时候由于网速原因，会感觉有一点的停顿。

解决这一问题的办法是把几张图片做在一张图片里，通过改变背景图片的位置来实现上面的效果，比如我们把上面三张图片并列排在一张图片里(bottons.png)，定义如下的CSS可以达到同样的效果，而且会更流畅：

        a{

         display:block;

         width:203px;

         height:72px;

         text-indent:-1000px;

         background:url("images/buttons.png") no-repeat -203px 0;

         overflow:hidden

         }

         a:hover{

         background-position:top right

         }

         a:active{

         background-position:top left

         }

这种方法的好处是，在网页加载的时候已经把图片加载到本地，当鼠标经过的时候直接改变图片的位置，不需要重新加载图片。

上例中text-indent和overflow:hidden的作用是隐藏链接文字，因为我们已经在背景图片里把文字已经做出来，这里就不再需要再显示文字了。

下载本文的示例文件： Xun6下载趣盘下载

版权声明: 转载时请以超链接形式标明文章原始出处和作者信息
本文来自: Domety»《CSS自定义链接样式常用技巧总汇》
本文链接: http://domety.com/archives/125/
本文作者: DDBug
发表时期: 十月 27th,2009
关键字: CSS