默认样式，就是最原生态的样式。就像大家经常用的按钮或者蓝色有下划线的超链接。本文，潜行者 m 将从两个元素来讨论默认样式在设计中的应用。

超链接的默认样式

超链接的默认样式 超链接是网页中最常用最基础的元素，可以说是必不可少的。我们设置超链接，也是希望人们去点击，去使用它。那么我们拿什么让人们知道，这是一个超链接呢？你可以在旁边说，这里有个超链接，快来点击我。但是，当人们看到这几个字的时候，是需要思考的，实际情况下，人们是不想思考的。所以，我们设计的目的，就是让人们一看上去，就觉得这是一个可以点击的超链接。这里几个超链接，我分别为他们加上了样式，请看下图：

请你告诉我，这里面究竟哪一个才是可以点击的超链接？很显然，第一个超链接是默认样式，这种蓝色下划线的样式，已经深入人心，任何一个经常上网的朋友，看到这个就知道它是一个可以点击的超链接。但是有个非常明显的问题，这种蓝色下划线的样式实在是太丑了。而且和我的设计风格不相似。那么，我们就可能会考虑后面三种。

现在，我们的任务就变成了，如何让后面的这三个超链接，变得让人以为这是一个可以点击的超链接。这时，我们需要结合具体的文境来说。请看下面这张图，我已经把上面这三个超链接加入了文章中：

这是比较常见的文章环境，当超链接在文章中时，我们就会发现一些东西。现在请你告诉我，这四个链接的位置以及究竟哪一个链接可以点击？很显然，第一个下划线的可以点击。然后红色、蓝色链接也可以轻易找到，但是黑色的却不见了。因为它的样式和文章的一样。

当我们抛开第一个，请你再告诉我，究竟哪个是可以点击的超链接？很显然，是红色后面的蓝色超链接，因为蓝色是超链接的默认颜色，是标志性的颜色，所以我们会认为蓝色是可以点击超链接。如果排除蓝色链接，你还会点击什么？这时候，你会发现文中突然黑字里面出现了一个红色超链接。这是你的大脑会进行短暂的思考，这个红色超链接是什么，为什么别的都是黑色的，它是红色的？它是不是有特殊的功能，是不是可以点击？要不我把鼠标移动上去，看看吧。

当我们把鼠标移动上去之后，发现鼠标变成了小手状，红色还变了色，而且还加了下划线。OK，这个就是可以点击的超链接了。

至于黑色超链接，潜行者 m 就直接找不到了，碰巧鼠标移动到什么，可能会变成小手。但是一般人是无法注意到了。

通过这个案例，我们可以分析出，超链接应当如何定义：

1. 尽可能的使用默认的蓝色，甚至加上下划线。如果与风格不符，请使用与其他文字差别较大的色彩来表示，这是一段与众不同的文字，它有特殊的含义。
2. 当鼠标移动上去的时候，请定义：hover，让其进行变色，并且加上下划线，因为这是一个超链接默认的样式，经过这样处理之后，能够让人深信不疑的认为这是一个超链接。
3. 如果你无法合理的配色或者你的作品无法使用多种色彩，请尝试让字体变大或者变小或者倾斜，让超链接变得与众不同，这样就会让人产生疑问。
4. 如果你无法比较合理的完成上面三条，请不要使用默认样式。

按钮的默认样式

按钮也是使用比较广泛的网页元素，通常用于表单提交，或者其他需要点击的地方。通常有以下三种形式的定义

第一种就是默认情况下的，而第二种只是简单的个边框，使其去掉默认样式平面化，第三中则可以代表使用图片背景的自定义按钮。

当你第一眼看到这三个按钮的时候，很显然，第一个是最想按钮，并且可以让人产生点击欲望的按钮。除了第一个之外的后面两个呢？这里需要注意一下，第三个是有一个变色处理的，当鼠标移动到上面，会变成这样：

默认的按钮样式以及满足不了我们网站的风格，所以我们目前的任务，就是让后面两个按钮，变得像可以点击的按钮。我们主要来分析一下，为什么后面两个按钮不像前面那个可以点击的按钮，有什么特点和区别。

1，外观要像一个按钮，其中第三个要比第二个更像按钮，因为它是圆角、椭圆形的，它要比直来直去的方框更容易给人以按钮的感觉。

2，要有 3d 突出感，按钮是一个突出的东西，给人一种 3d 突出的感觉更让人容易相信这是一个可以点击的按钮，例如淘宝购买按钮

可以通过添加阴影或者渐变等,制造这种突出的效果。

3，要有变换特效，及时的和浏览者沟通，告诉他们，这是一个可以点击的按钮。

4，如果你的设计，无法很好的完成上面说的三点，请使用默认样式。

本文仅列出开发ThinkSAAS app比较常用的数据表结构，这样，可以方便构造sql语句，对数据库的信息进行操作。

ts_article =>文章列表

+—————+————+——+—–+———————+—————-+
| Field | Type | Null | Key | Default | Extra |
+—————+————+——+—–+———————+—————-+
| articleid | int(11) | NO | PRI | NULL | auto_increment |
| userid | int(11) | NO | | 0 | |
| cateid | int(11) | NO | | 0 | |
| title | char(64) | NO | | | |
| content | text | NO | | NULL ||
| path | char(32) | NO | | | |
| photo | char(32) | NO | | | |
| isaudit | tinyint(1) | NO | | 0 | |
| isrecommend | tinyint(1) | NO | | 0 | |
| count_comment | int(11) | NO | | 0 | |
| addtime | datetime | NO | | 0000-00-00 00:00:00 | |
| isrecommend | tinyint(1) | NO | | 0 ||
| count_comment | int(11) | NO | | 0 ||
|addtime | datetime | NO | | 0000-00-00 00:00:00 |
+—————+————+——+—–+———————+—————-+

ts_article_cate =>文章目录

+———-+———-+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+———-+———-+——+—–+———+—————-+
| cateid | int(11) | NO | PRI | NULL | auto_increment |
| catename | char(16) | NO | | | |
| orderid | int(11) | NO | | 0 | |
+———-+———-+——+—–+———+—————-+

ts_article_comment =>文章评论

+———–+———+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+———–+———+——+—–+———+—————-+
| commentid | int(11) | NO | PRI | NULL | auto_increment |
| articleid | int(11) | NO | | 0 | |
| userid | int(11) | NO | | 0 | |
| content | text | NO | | NULL | |
| addtime | int(11) | NO | | 0 | |
+———–+———+——+—–+———+—————-+

ts_group =>小组列表

+——————-+————+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+——————-+————+——+—–+———+—————-+
| groupid | int(11) | NO | PRI | NULL | auto_increment |
| userid | int(11) | NO | MUL | 0 | |
| cateid | int(11) | NO | MUL | 0 | |
| cateid2 | int(11) | NO | | 0 | |
| cateid3 | int(11) | NO | | 0 | |
| groupname | char(32) | NO | MUL | | |
| groupname_en | char(32) | NO | | | |
| groupdesc | text | NO | | NULL | |
| path | char(32) | NO | | | |
| groupicon | char(32) | NO | | | |
| count_topic | int(11) | NO | | 0 | |
| count_topic_today | int(11) | NO | | 0 | |
| count_user | int(11) | NO | | 0 | |
| count_topic_audit | int(11) | NO | | 0 | |
| joinway | tinyint(1) | NO | | 0 | |
| role_leader | char(32) | NO | | ?? | |
| role_admin | char(32) | NO | | ??? | |
| role_user | char(32) | NO | | ?? | |
| addtime | int(11) | YES | | 0 | |
| isrecommend | tinyint(1) | NO | | 0 | |
| isopen | tinyint(1) | NO | | 0 | |
| isaudit | tinyint(1) | NO | | 0 | |
| ispost | tinyint(1) | NO | | 0 | |
| isshow | tinyint(1) | NO | MUL | 0 | |
| ispostaudit | tinyint(1) | NO | | 0 | |
| uptime | int(11) | NO | | 0 | |
+——————-+————+——+—–+———+—————-+

ts_group_cates =>小组分类

+————-+———-+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+————-+———-+——+—–+———+—————-+
| cateid | int(11) | NO | PRI | NULL | auto_increment |
| catename | char(32) | NO | | | |
| referid | int(11) | NO | MUL | 0 | |
| count_group | int(11) | NO | | 0 | |
| uptime | int(11) | NO | | 0 | |
+————-+———-+——+—–+———+—————-+

ts_group_options =>小组配置

+————-+———–+——+—–+———+——-+
| Field | Type | Null | Key | Default | Extra |
+————-+———–+——+—–+———+——-+
| optionname | char(12) | NO | PRI | | |
| optionvalue | char(255) | NO | | | |
+————-+———–+——+—–+———+——-+

ts_group_topics =>小组帖子

+—————+————–+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+—————+————–+——+—–+———+—————-+
| topicid | int(11) | NO | PRI | NULL | auto_increment |
| typeid | int(11) | NO | MUL | 0 | |
| groupid | int(11) | NO | MUL | 0 | |
| userid | int(11) | NO | MUL | 0 | |
| appkey | char(32) | NO | | group | |
| appname | char(32) | NO | | ?? | |
| appaction | char(32) | NO | | topic | |
| appid | int(11) | NO | | 0 | |
| title | char(64) | NO | MUL | | |
| content | text | NO | | NULL | |
| thread_type | char(16) | NO | | | |
| path | char(32) | NO | | | |
| photo | char(32) | NO | | | |
| photoshow | tinyint(1) | NO | | 0 | |
| attach | char(32) | NO | | | |
| attachname | char(64) | NO | | | |
| attachshow | tinyint(1) | NO | | 0 | |
| attachscore | int(11) | NO | | 0 | |
| music | varchar(512) | NO | | | |
| video | varchar(512) | NO | | | |
| count_comment | int(11) | NO | | 0 | |
| count_view | int(11) | NO | | 0 | |
| count_love | int(11) | NO | | 0 | |
| istop | tinyint(1) | NO | | 0 | |
| isshow | tinyint(1) | NO | | 0 | |
| isclose | int(4) | NO | | 0 | |
| color | int(4) | NO | | 0 | |
| iscomment | tinyint(1) | NO | | 0 | |
| isposts | tinyint(1) | NO | | 0 | |
| isaudit | tinyint(1) | NO | | 0 | |
| addtime | int(11) | YES | | 0 | |
| uptime | int(11) | NO | | 0 | |
+—————+————–+——+—–+———+—————-+

ts_group_topics_comments =>小组主题评论

+————+———-+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+————+———-+——+—–+———+—————-+
| commentid | int(11) | NO | PRI | NULL | auto_increment |
| referid | int(11) | NO | MUL | 0 | |
| topicid | int(11) | NO | MUL | 0 | |
| userid | int(11) | NO | MUL | 0 | |
| content | text | NO | | NULL | |
| path | char(32) | NO | | | |
| photo | char(32) | NO | | | |
| attach | char(32) | NO | | | |
| attachname | char(64) | NO | | | |
| addtime | int(11) | YES | | 0 | |
+————+———-+——+—–+———+—————-+

ts_group_users =>小组成员

+———–+————+——+—–+———+——-+
| Field | Type | Null | Key | Default | Extra |
+———–+————+——+—–+———+——-+
| userid | int(11) | NO | PRI | 0 | |
| groupid | int(11) | NO | PRI | 0 | |
| isadmin | int(11) | NO | | 0 | |
| isfounder | tinyint(1) | NO | | 0 | |
| addtime | int(11) | NO | | 0 | |
+———–+————+——+—–+———+——-+

ts_photo =>照片列表

+————-+————+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+————-+————+——+—–+———+—————-+
| photoid | int(11) | NO | PRI | NULL | auto_increment |
| albumid | int(11) | NO | | 0 | |
| userid | int(11) | NO | | 0 | |
| photoname | char(64) | NO | | | |
| phototype | char(32) | NO | | | |
| path | char(32) | NO | | | |
| photourl | char(120) | NO | | | |
| photosize | char(32) | NO | | | |
| photodesc | char(120) | NO | | | |
| count_view | int(11) | NO | | 0 | |
| isrecommend | tinyint(1) | NO | | 0 | |
| addtime | int(11) | NO | | 0 | |
+————-+————+——+—–+———+—————-+

ts_photo_album =>相册列表

+————-+————–+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+————-+————–+——+—–+———+—————-+
| albumid | int(11) | NO | PRI | NULL | auto_increment |
| userid | int(11) | NO | MUL | 0 | |
| path | char(32) | NO | | | |
| albumface | char(64) | NO | | | |
| albumname | char(64) | NO | | | |
| albumdesc | varchar(400) | NO | | | |
| count_photo | int(11) | NO | | 0 | |
| count_view | int(11) | NO | | 0 | |
| isrecommend | tinyint(1) | NO | MUL | 0 | |
| addtime | int(11) | NO | | 0 | |
| uptime | int(11) | NO | | 0 | |
+————-+————–+——+—–+———+—————-+

ts_photo_comment =>照片评论

+———–+———–+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+———–+———–+——+—–+———+—————-+
| commentid | int(11) | NO | PRI | NULL | auto_increment |
| referid | int(11) | NO | MUL | 0 | |
| photoid | int(11) | NO | MUL | 0 | |
| userid | int(11) | NO | MUL | 0 | |
| content | char(255) | NO | | | |
| addtime | int(11) | YES | | 0 | |
+———–+———–+——+—–+———+—————-+

ts_tag =>标签列表

+—————+————+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+—————+————+——+—–+———+—————-+
| tagid | int(11) | NO | PRI | NULL | auto_increment |
| tagname | char(16) | NO | UNI | | |
| count_user | int(11) | NO | | 0 | |
| count_group | int(11) | NO | | 0 | |
| count_topic | int(11) | NO | | 0 | |
| count_bang | int(11) | NO | | 0 | |
| count_article | int(11) | NO | | 0 | |
| count_photo | int(11) | NO | | 0 | |
| isenable | tinyint(1) | NO | | 0 | |
| uptime | int(11) | NO | | 0 | |
+—————+————+——+—–+———+—————-+

ts_system_options =>系统配置

+————-+———–+——+—–+———+——-+
| Field | Type | Null | Key | Default | Extra |
+————-+———–+——+—–+———+——-+
| optionname | char(32) | NO | PRI | | |
| optionvalue | char(255) | NO | | | |
+————-+———–+——+—–+———+——-+

ts_user =>用户列表

+———-+———-+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+———-+———-+——+—–+———+—————-+
| userid | int(11) | NO | PRI | NULL | auto_increment |
| pwd | char(32) | NO | MUL | | |
| salt | char(32) | NO | | | |
| email | char(32) | NO | UNI | | |
| resetpwd | char(32) | NO | | | |
+———-+———-+——+—–+———+—————-+

ts_user_gb =>用户留言

+———-+—————+——+—–+———————+—————-+
| Field | Type | Null | Key | Default | Extra |
+———-+—————+——+—–+———————+—————-+
| id | int(11) | NO | PRI | NULL | auto_increment |
| reid | int(11) | NO | | 0 | |
| userid | int(11) | NO | MUL | 0 | |
| touserid | int(11) | NO | MUL | 0 | |
| content | varchar(2000) | NO | | | |
| addtime | datetime | NO | | 0000-00-00 00:00:00 | |
+———-+—————+——+—–+———————+—————-+

ts_user_info =>用户信息

+—————–+————-+——+—–+———+——-+
| Field | Type | Null | Key | Default | Extra |
+—————–+————-+——+—–+———+——-+
| userid | int(11) | NO | UNI | 0 | |
| ucid | int(11) | NO | MUL | 0 | |
| fuserid | int(11) | NO | MUL | 0 | |
| username | char(32) | NO | UNI | | |
| email | char(32) | NO | PRI | | |
| sex | tinyint(1) | NO | | 0 | |
| phone | char(16) | NO | | | |
| roleid | int(11) | NO | | 1 | |
| province | int(11) | NO | | 0 | |
| city | int(11) | NO | | 0 | |
| area | int(11) | NO | | 0 | |
| areaid | int(11) | NO | | 0 | |
| path | char(32) | NO | | | |
| face | char(64) | NO | | | |
| signed | char(64) | NO | | | |
| blog | char(32) | NO | | | |
| about | char(255) | NO | | | |
| ip | varchar(16) | NO | | | |
| address | char(64) | NO | | | |
| qq_openid | char(32) | NO | MUL | | |
| qq_access_token | char(32) | NO | | | |
| count_score | int(11) | NO | | 0 | |
| count_follow | int(11) | NO | | 0 | |
| count_followed | int(11) | NO | | 0 | |
| isadmin | tinyint(1) | NO | | 0 | |
| isenable | tinyint(1) | NO | | 0 | |
| isverify | tinyint(1) | NO | | 0 | |
| verifycode | char(11) | NO | | | |
| thems_other | tinyint(1) | NO | | 0 | |
| addtime | int(11) | NO | | 0 | |
| uptime | int(11) | YES | | 0 | |
+—————–+————-+——+—–+———+——-+

ts_user_options =>用户选项

+————-+———–+——+—–+———+——-+
| Field | Type | Null | Key | Default | Extra |
+————-+———–+——+—–+———+——-+
| optionname | char(12) | NO | PRI | | |
| optionvalue | char(255) | NO | | | |
+————-+———–+——+—–+———+——-+

这里只包含常用的数据表结构，至于其他的数据表请看这里ThinkSAAS 数据库结构 -> 数据表结构

至于本文中未列出的数据表，请在mysql命令行，使用describe命令查看。

此工具正在升级，暂时无法使用看到，待升级完毕，会新发一篇文章！

工具地址：http://labs.qianxingzhem.com/app/csscreater

开发时间：2012-8-10

作者：潜行者m

在制作wordpress主题的时候，我们需要css文件，在标准的wordpress主题中，官方推荐将css文件命名为style.css。

在使用主题的时候，我们可以上传安装主题，也可以在线安装。当我们安装好主题的时候，我们会发现会有作者、作者地址、模板介绍等等信息。这些信息是写在style.css文件里面的。只有按照正确的格式，写进style.css文件，我们才能把主题压缩成zip直接上传安装。

本工具的功能就是为了简化这个流程。你只需要填写一个表单，就可以自动生成带有正确格式信息的style.css文件。

当然，不仅仅是输出你输入的wordpress主题版权信息，在style.css文件里面，还附带了一段非常成熟的CSS reset 代码，将元素在不同浏览器中的不同表现一律抹平。如果你不知道为什么使用CSS reset，可以看一下潜行者m的这篇文章：网页设计为什么要使用css reset

同时，还附带了本人常用的css原子类，使用原子类，可以非常容易的进行布局等。关于为什么要使用原子类，可以看一下潜行者m的这篇文章：网页设计中构建并使用原子类

当然，还帮你整理好了结构，因为本人患有代码整理强迫症 ^_^ 。

此外，这个工具也不仅仅可以用于wordpress，你在设计网页的时候，也需要在css文件里面，声明你的作品版权，这个工具就是为了帮助你省略这些工序。

这次，潜行者m带来一个jquery的比较实用的教程，就是为你的网站添加一个纯代码画出来的、简洁美观的回到顶部按钮。这个按钮的效果就是，当页面滑动一段距离之后，就会浮现出来这个按钮，点击这个按钮之后，就自动滚动到顶部。具体效果如下：

点击之后就会跳转到顶部，然后这个按钮平滑消失。与网上的相比，潜行者m版的是纯代码，加载速度更快，效果色彩控制好；代码精简，只有数条而已，拒绝大坨大坨的代码。废话不多说，下面就开始制作。

html结构

我使用了a标签作为这个结构，可能不太标准，但是比较方便。在a标签中，内置了一个span标签，用来显示三角号。具体代码如下：

<a id=”gotop” href=”#”>
    <span class=”gotop-shang”>▲</span>
</a>

对，你没看错，就这么简单的一句代码，直接在a标签中，填写一个三角号。剩下的就是使用css进行样式控制。

css代码

a[id=”gotop”]{
    display:block;
    width:60px;
    height:60px;
    position:fixed;
    bottom:50px;
    right:40px;
    border-radius:10px 10px 10px 10px;
    text-decoration:none;
    display:none;
    background-color:#999999;
    }

上面这段代码，定义了a标签的外观样式，定义display为block，这样，我们才能指定它的width和height。定义position为fixed，让它固定在右下角。同时为它指定圆角，就是使用border-radius属性，定于半径为10px的圆角。

span{
    display:block;
    width:60px;
    color:#dddddd;
    }
span:hover{
    color:#cccccc;
    }
span[class=”gotop-shang”]{
    font-size:40px;
    text-align:center;
    margin-top:4px;
    }

上面这一段，就是定义了span标签里面的三角号，如果你不会打三角号，可以看本人的这篇文章：亲自打造属于自己网站风格的工具边栏，里面有提到这个。这几句代码意思很简单，就是定义了三角号的外观样式，同时制定了颜色变化，这是为了用户体验。最下面的margin-top：4px，则是用来准确定位三角号，让它居中显示。

jquery代码

具体的javascript代码如下，解析已经写在注释里面了：

$(function(){

$(window).scroll(function(){  //只要窗口滚动,就触发下面代码
    var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
    if( scrollt >200 ){  //判断滚动后高度超过200px,就显示
        $("#gotop").fadeIn(400); //淡出
    }else{
            $("#gotop").stop().fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动
    }
});</pre>

    $(“#gotop”).click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
        $(“html,body”).animate({scrollTop:”0px”},200);
    });
});

怎么样，简单吧？就用这几句代码而已，就可以出现这个功能，而且可以方便的修改颜色、形状、大小等。当然缺点也是有的，就是在IE6等过时的浏览器中，可能不会兼容，无法实现。

 

这篇文章是我建博一年多以来一个观察和总结。阅读本文章，你也可以根据你博客的实际情况，对你博客的内容排版等做出调整，更有利于发挥你博客的能力。

首先要说明一点，这里说的博客，并不是生活记录类的博客。因为那类的博客，看的大多是朋友或者家人。这里说的是像潜行者m博客那样的，具有一定方向的博客，写的文章具有一定的应用价值的博客。因为这种博客，才能吸引大量网络上的有这方面需求的人来看。

从网址直接进入

浏览者的想法分析

从网址直接进入的朋友，可以能是记住了，或者是添加到了收藏夹里，也有可能是通过评论，回访进来的。但是就本人的博客而言，首页仅仅显示八篇文章，剩下的就需要继续翻页或者点击标签、目录分类才可以看到。通过这种方式进来的人，通常只会看第一页，仅仅是看到首页里面的八篇文章，而懒的继续点击看其他文章。也有个特例，如果访问者看到你首页的文章质量非常不错，可能就会收藏网站以便下次继续访问，也有可能会点击自己感兴趣的分类，查看更多文章。

解决方法：

1. 设置醒目的目录链接等，吸引有兴趣的用户点击，这样可以看到更多的相关文章。
2. 提高文章质量是重中之重，浏览者来看了，但只有文章质量提升上去了，浏览者才会留下来，之后继续观看。
3. 在文章中增加相关性较强的文章链接，当浏览者观看文章的时候，可以继续看自己感兴趣的文章。

通过搜索引擎进入

浏览者的想法分析

这种方法得到的浏览者质量最好，但是要求博客文章的质量也要好。这一点比较适用于技术类博客，大家在搜索某个函数或者某个插件的时候，前面几个往往是独立博客，针对这个插件的介绍和使用方法等。一般不会有人去搜索某某心情，然后看到你博客上面，写你最近的心情如何。但是，浏览者往往看完文章，学到知识就走人了，而不会去看其他文章。

解决方法：

1. 在文章的底部等，添加相关文章显示，浏览者可能会发现有很多他喜欢的文章，而继续看下去或者收藏一下。
2. 提高文章质量，让浏览者明白，你的博客是一个质量非常高的博客，在你博客里，可以学到很多有用的知识。

从外链进入

浏览者的想法分析

这种外链进入，并非是上面说的第一条，这里的外链，主要是指在其他地方发表文章留下的版权链接、他人转载文章留下的原文链接、他人在文章中引用文章留下的链接等。这中方式进入的和第二条，通过搜索引擎进入的有异曲同工之妙。浏览者往往是为了好奇或者是扩充知识等，来到你的文章，但是一旦看完，就觉得没有什么必要继续看下去。

解决方法：

1. 同第二条的解决方法。

实际应用

理论永远只是理论，能实践的理论才是好理论。现在就说一下本人的实际应用方案。

1. 首先要提高整体的博客文章质量和素质，文章要是给别人看的，如果写的没有质量和水平，谁去看。
2. 由于那次robots文件事件，导致百度收录全清，结果完全没有搜索引擎的流量。加强一了下SEO，现在百度每天一收。
3. 在之前的文章中，仍然有很多精品文章，但由于百度收录没有，如果想要别人看到，则要在新写的文章中，不时地提一下之前写的文章，给出一个连接，让浏览者可以点击查看之前的精品文章。
4. 为了增加对以前文章的收录，潜行者m还整理了一下以前的精品文章，加上原文链接，将其转载到其他博客或者网站上，这样，百度可以收录较早的文章，而其他博客平台或者网站上的用户，也可以看到之前的精品文章。
   计划就是这些，希望本文能给你一些启示和帮助。

首先请允许潜行者 m 介绍一下自创的名词“工具边栏”。现在大家在浏览网站的时候，经常会发现一些浮动的条状栏，通常具有向上向下的功能，当你点击一下，就可以方便的回到顶部或者前往底部。其实打造这样一个工具边栏，并不是很难，使用 jquery 很容易就可以做出来。下面，你跟随我的步骤，一步一步的做一下，就可以做出来了，然后你可以根据这个代码，进行一些修改，自定义一些东西。

废话不多说，先说一下我做的这个工具边栏。这个工具边栏是符合我自己做的模板“Q21”，Q21 模板的特点是黑白对比，所以这个工具边栏要突出黑白变化。经过构思之后，我决定这个边栏的样式是这样的：

当鼠标移动到“分享”按钮上之后，会自动滑出一个黑条，然后黑条上是各个分享按钮。具体的演示效果，你可以下载最后代码包查看。下面我们来开始动手一步一步的制作。

建立 html 结构

用 span 标签也行，不过我还是喜欢用 div，所以就用 div 来建立 html 结构。结构很明确了吧，一个大 div 包含三个小 div，分别是上中下三个按钮，其中分享按钮中，还需要再包含一个 div，用来滑出分享按钮。好了，结构就建好了。

<div id="tooltip" >
    <div id="toolt">▲</div>
    <div id="toolc" >
        <div id="sharetxt">分享</div>
        <div id="shareit" class="none">这里是分享代码</div>
    </div>
    <div id="toolb">▼</div>
</div>

注意，向上向下按钮，我使用的是字符，而不是图片。如果是图片的话，需要加载，而且动态变化，需要替换图片更加的不方便。至于如何打出这个上下两个三角号，就靠你的搜狗输入法了，如下图：

好了，有了 html 结构，我们再来定义一些 css。

CSS 代码

首先定义全局的字体

:root{font-family:"5FAE8F6F96C59ED1",helvetica,Arial;}

经测试，这个边栏，在微软雅黑的字体下效果最好，所以要规定网页使用微软雅黑。上面这句代码，：root 表示选择 html 根，对所有文档中的元素生效，其中 5FAE8F6F96C59ED1 表示的就是微软雅黑，至于为什么这样写而不写成“微软雅黑”，如果用户电脑是英文的，那肯定找不到微软雅黑这个字体，这样写法，只要有微软雅黑字体，就可以使用。

定位工具条位置

div[id="tooltip"]{
    width:40px;
    height:120px;
    position:fixed;
    bottom:50%;
    right:20px;
    }

这几句 css 定义了工具边栏的高度和宽度，同时 position：fixed 表示让它固定在页面中，不会根据滚动条的滚动而移动。bottom：50%，让它保持在页面中部位置，right：20px 表示让它距离右边 20 个像素。

响应操作

div[id^="tool"]{
    font-size:38px;
    cursor:pointer;
    color:#000000;
    }
div[id^="tool"]:hover{
    color:#999999;
    }

响应操作可以让工具更加人性化，例如上图效果，当我们把鼠标移动到箭头的时候，它会变成灰色，表示你已经把箭头移动到上面了。在这里，我使用了新型的选择器 div[id^=”tool”]它的意思是，选取所有以 tool 开头的 div 标签。定义字体大小为 38px，调整三角形成为合适大小。设定 cursor：pointer 属性，当你鼠标移动到上面的时候，会显示成手指形状，让你误以为是一个可以点击的链接。下面的语句，当你鼠标移动到上面的时候，颜色变成#999999。这是响应操作，提高用户体验。

中部 CSS 代码

div[id="toolc"]{
    font-size:22px;
    float:right;
    width:40px;
    height:70px;
    overflow:hidden;
     }

div[id="sharetxt"]{
    width:26px;
    margin-right:8px;
     float:right;
     height:70px;
     display:inline;
    margin-top:4px;
    }
div[id="shareit"]{
    width:304px;
    height:62px;
    float:right;
    height:30px;
    margin:15px 0px;
    }
.none{
    display:none;
    }
.inline{
    display:inline;
    }

比较简单，没有什么亮点，自己看看就行了。重点在于如何实现滑动出现分享按钮。我采用的方法是，定义两个 div，浮动放置，其中分享按钮那个 div 默认是隐藏的，只有鼠标移动上去触发之后，它才会显示出来。

Jquery 代码

在添加 jquery 代码之前，我们需要彻底理清滑出分享按钮的实现方式。jquery 并没有提供横向滑动出现的方法，那要怎么实现呢？可以这样实现，先把底色变成黑色，让装载分享按钮的 div 框出现，但是这时候由于宽度不够显示分享按钮 div，所以你暂时看不到。使用 jquery 的 animate 方法，让宽度逐渐变宽，直到完全显示分享按钮 div。这样就会造成一个假象，黑色滑出，然后出现分享按钮。

具体的实现代码如下

$(function(){
    $("#toolc").mouseenter(function(){  //这里使用mouseenter方法来触发,当鼠标移动上去之后,触发这个方法
        $("#toolc").css({"color":"#ffffff","backgroundColor":"#000000"}); //先对中部添加背景,并且把文字变成白色
        $("#shareit").removeClass("none").addClass("inline"); //去掉shareit的none,让它显示出来,但由于宽度不够,无法显示
        $("#toolc").animate({width:"350px"},200); //使用animate方法,动态的改变宽度,直到显示出来分享按钮
    }).mouseleave(function(){ //当鼠标从目标区域中移走,就触发下面这个事件
        $("#toolc").css({"color":"#000000","backgroundColor":"#ffffff"}); //同反
        $("#shareit").removeClass("inline").addClass("none"); //同反
        $("#toolc").animate({width:"40px"},200); //同反,你懂的
    });
    $("#toolt").click(function(){
        $("html,body").animate({scrollTop:"-=900px"},200); //每点击一下,就向上滑动900px
    });
    $("#toolb").click(function(){
        $("html,body").animate({scrollTop:"+=900px"},200); //每点击一下,就向下滑动900px
    });
});

注释我已经写在上面代码中了，仔细耐心看一下。这里,我想说的是向上向下滑动 900px。我并没有让它点击直接到顶部或者底部。因为我觉得，如果文章比较长，浏览者并不一定想直接滑动到底部，而是想看看下面的内容。如果他真想滑动到底部，也只需要点两次或者三次按钮即可。这也是一个用户体验的细节。

当然，你还需要申请分享代码

可以去 bshare jiathis 百度分享那里，申请一下代码，粘贴到 shareit div 中就可以了。怎么样，其实原理也非常简单，动一下脑子就可以了。

Jquery.lazyload.js 这个jquery插件，是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话，下载图片就需要很多时间。而这款插件，会检测你的滚动情况，只有你要看到那个图片的时候，它才会从后台请求下载图片，然后显示出来。使用这个插件，可以在需要显示图片的时候，才下载图片，所以可以减少服务器的压力，避免不必要的资源下载。一个简单的例子，如果一个人不看下面的图片，那加载下面的图片就是一种浪费。

但是现在，很多javascript大牛分析得出，这个插件其实并没有真正的缓加载效果。确实，官方也已经给出了说明和解决方法了。

插件原理：修改目标的src属性为orginal属性，从而中断图片的加载。检测滚动状态，然后把视野中的目标src属性还原，制造缓冲加载的效果。
原因：在新版的浏览器中，即使你删除了javascript控制的src属性，浏览器仍然会去加载这个图像。
解决方法：修改html的结构，在img标签中添加新的属性，把src属性的值指向占位图片，添加data-original属性，让其指向真正的图像地址。
例如：<img data-original=“img/example.jpg” src=“img/grey.gif”>

这样我们就需要判断一下，我们究竟还要不要使用这个插件。 ## 使用： 1. 必须按照这种结构才有实际作用，需要对输出进行定义。 2. 可以节约服务器资源，并且有较好的用户体验。 3. 如果图片很大，当用户滚动到目标位置，需要较长时间下载。 ## 不使用： 1. 增加服务器压力，浪费系统资源。 究竟使用不使用，还是要看你自己的实际需求。如果你图片比较少，就不必使用了，如果你图片比较多，可以考虑一下。但是，使用的话，你可能需要把每一个img标签上自己加上这个属性，会稍微麻烦一点。潜行者m博客上，就用了这个插件，不过没用使用官方说的那种结构，要的只是一个缓冲加载的效果。 ## 如何使用： 如何使用这个插件呢？ 第一步：加载相关文件。 很明显，你要加载jquery和这个插件。你可以使用以下代码，加载这几个文件：

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

第二步：定义图片结构。 按照官方的建议，定义你的img结构：

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">

第三步：触发这个插件，生效。 激活以下，你就可以在目标中使用了。

 $("img.lazy").lazyload();

高级使用方法：

更周全的做法

我们不得不思考这样一个问题。我们定义了这样一个结构，那么网页中，就不会加载源图像了。只有当javascript执行，才会显示这个源图像。如果用户的浏览器不支持或者用户关掉了支持javascript的选项，那么我们的这个图像就无法显示出来。也就是说，没有javascript的支持，我们的图像就无法显示出来。

应对这个问题，我们需要引入noscript标签。大体思路如下：用noscript包含真实的图像位置，当浏览器不支持javascript，直接显示图像。对现有图像，隐藏处理，使用show（）方法触发显示。这样，如果浏览器不支持javascript，我们自定义的img就不会出现，而显示noscript里面的图像。具体实现代码如下：

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
.lazy {
  display: none;
}
$("img.lazy").show().lazyload();

提前加载

默认的情况是，当你滚动到图片位置的时候，插件开始加载。这样，用户可能首先看到的是一个空白图像，然后再缓慢出现。如果你想在用户滚动之前，提前加载这个图像，你可以配置一下参数。

$("img.lazy").lazyload({ threshold : 200 });

threshold这个参数，就是用来提前加载的。上面这个语句的意思是，当距离图片还有200像素的时候，就开始加载图片。 ### 自定义触发事件 默认的触发事件，是滚动，当你滚动的时候，就会检查然后加载。你可以使用event属性，设置你自己的加载事件，之后你可以自定义触发这个事件的条件，然后去加载图像。

$("img.lazy").lazyload({ 
    event : "click"
});

自定义显示效果

默认的图片实现效果，就是没有效果，下载完成之后，直接显示出来。这样的用户体验并不好，你可以设置effect属性，来控制显示图片的效果。例如

$("img.lazy").lazyload({ 
    effect : "fadeIn"
});

fadeIn的效果就是，改变图片的透明度，渐现的方式出现。效果： [effect demo page](http://www.appelsiini.net/projects/lazyload/enabled_fadein.html) ### 把图像插入某个容器 大家如果使用智能手机的话，经常去应用网站下载应用，他们通常使用一个横着的容器，放一些手机截图。使用container属性，能很轻松在容器中实现缓冲加载。首先，我们需要用css定义这个容器，然后用这个插件进行加载。效果： [vertical](http://www.appelsiini.net/projects/lazyload/enabled_wide_container.html)

#container {
    height: 600px;
    overflow: scroll;
}

$("img.lazy").lazyload({         
     container: $("#container")
});

加载不可见图像

有部分图像是不可见的，我们对其加上类似display：none等属性的图像。默认的情况下，这个插件是不会加载隐藏的不可见图像。如果我们需要它加载不可见图像，我们需要使用skip_invisible属性，对其赋予false

$(“img.lazy”).lazyload({
    skip_invisible : false
});

官方说明：http://www.appelsiini.net/projects/lazyload

2012/12/10 日补充: 这种方法目前已经失效，由于腾讯采用了某些方法，导致 nid 的值是动态变换的，使用这种方法，无法正确的订阅你的频道。具体的解决方法，正在测试中，暂时不要使用下面这种方式。

首先先来了解一下 QQ 邮件列表是什么。

QQ**邮件列表是一项免费的群发邮件服务。通过它，您可以在网站上加入订阅入口，来获取您的订户用户订阅后，就能方便的给他们群发邮件了。如果你写博客，它能自动将最新的博客文章发给读者。如果你开网店，可以用它批量通知顾客店铺的最新优惠。 如果你正管理一个组织**，通过它，能快速向组织成员发布公告。使用 QQ 邮件列表，让您的邮件发得更多、更快、更准！
总之，这是一个让帅哥更帅，让美女更美，让垃圾邮件正常群发的腾讯唯一几个免费的服务。很多网站上，都有 QQ 列表，你可以输入邮箱来订阅网站内容，站长就可以发一些资讯到你的邮箱里。

我们知道，添加这个服务，就需要申请代码，然后把代码放到网站上。但是，它生成的外观样式，并不一定符合我们网站的风格样式，本文潜行者 m 就要跟大家一起分析一下他们的代码，然后进行自定义修改，来符合自己网站的风格。获取代码有两种形式，一种是图片的形式，另一种是一个文本输入框，直接填写上邮箱提交。下面潜行者 m 一一分析。

图片形式：

图片形式，他们允许定义一些简单的参数：

我们看一下生成的代码

<!--QQ邮件列表订阅嵌入代码--><a target="_blank" href="http://list.qq.com/cgi-bin/qf_invite?id=55c8d4cfd86c2322b0da011d72769e61e8a471a03fa52b74">
<img alt="填写您的邮件地址，订阅我们的精彩内容：" border="0" src="http://rescdn.list.qq.com/zh_CN/htmledition/images/qunfa/manage/picMode_light_l.png"/></a>

从代码中，就可以看出，很简单的两个标签。使用了一个 a 标签，包裹了一个 img。而这个 img 指向的图片地址就是http://rescdn.list.qq.com/zh_CN/htmledition/images/qunfa/manage/picMode_light_l.png。这样，我们修改这个图片地址成我们自己准备好的地址就可以了。同时我们还可以加上一些css代码等等。只需要a标签中的href属性为http://list.qq.com/cgi-bin/qf_invite?id=55c8d4cfd86c2322b0da011d72769e61e8a471a03fa52b74即可，因为这个地址是我们订阅的填写页面。

代码方式：

代码方式要稍微麻烦一点，但是省下很多功夫，因为用户不用再打开一个页面去填写邮箱了。

我们再来看看代码：

<!--QQ邮件列表订阅嵌入代码-->
<script >
var nId = "3105746ef562384a0ffbc67926fa2810b331ea5d6a5eb435",nWidth="auto",sColor="light",sText="填写您的邮件地址，订阅我们的精彩内容：" ;;
</script>
<script src="http://list.qq.com/zh_CN/htmledition/js/qf/page/qfcode.js" charset="gb18030"></script>

这段代码里，上面那一句是定义了几个参数，其中 nID 参数，是你这个订阅频道独有的，要传输到下面的 qfcode.js 使用。那这个 qfcode.js 文件的内容是什么呢？直接打开http://list.qq.com/zh_CN/htmledition/js/qf/page/qfcode.js这个文件看一下就知道了。由于代码比较多，我把关键代码提出来：

"<div class="rssbook ",sColor,
" " style="width:",nWidth," "><p class="info">",sText,"</p>",
"<div class="mailInput">",
"<form action="http://list.qq.com/cgi-bin/qf_compose_send" target='_blank' method='post'>",
"<input type="hidden" name="t" value="qf_booked_feedback">",
"<input type="hidden" name="id" value="",nId,"">",
"<input  id="to" name="to" type="text" class="rsstxt" value=""/>",
"<div class="rssbutton"><input type="submit" value="订阅"></div>",
"</form>",
"</div></div>"].join(""));

这些代码的意思，就是说，在页面中输出了一个表单（form），它提交的地址就是http://list.qq.com/cgi-bin/qf_compose_send，表单里面有三个input元素，其中两个是隐藏的，用来发送参数的，有一个是发送填写的邮箱的。这两个隐藏表单中发送的内容，就是你的nID等。

好，弄清楚了这个，我们就按照自己的风格，动手做一个表单，然后根据它的这个表单，填写上参数，进行提交就可以了。目前，从这个代码中，潜行者 m 提取出以下几个信息：nID 3105746ef562384a0ffbc67926fa2810b331ea5d6a5eb435 、 POST http://list.qq.com/cgi-bin/qf_compose_send。那现在我们自己写一个提交表单。

<form action="http://list.qq.com/cgi-bin/qf_compose_send" target="_blank" method="post">
<input type="hidden" name="t" value="qf_booked_feedback" />
<input type="hidden" name="id" value="3105746ef562384a0ffbc67926fa2810b331ea5d6a5eb435" />
<input type="text" id="to" name="to" value="" placeholder="输入你的邮箱" />
<input type="submit" value="订阅" /></form>

这样就可以了,我们只要填写上,点击订阅,就会订阅了。我们自己写出了这个表单，然后再对其应用 css 修改它的样式，来符合我们网站的风格，这样就大功告成了。

学校的枯燥生活,有点音乐会更美。

有了音乐，还需要有个好耳机才更完美。

这半年来，从刚开始40块的漫步者h180，我第一次感受到好耳机与普通耳机的区别。后来有买了一个声籁EM300，也是40块左右，但是便携式的耳机，比耳塞要大很多，低音也更好。但是一分钱一分货，它的音质在同等价位最好，但是线材太细，用了大约三个月，接口处的外皮已经磨烂了，里面的金属丝都露出来了，不过还能用，就是摘耳机的时候，会划一下脸。不过现在再用，右耳朵有点电磁声。

后来就开始认真的关注耳机，变成了一个耳机准发烧友。一直看着K420不错，因为不是太贵。那次，赚了人生中第一个300块钱，打算出手买一个，结果那天中国银行短信系统抽风，验证短信怎么也收不到。当然，幸亏那次抽风，否则现在我可能就没有K450了。

再后来几天，在京东上看到akg的k314p降价70，只卖130。看到之后，二话不说就买下了。其实我从来不知道这个耳机，但是看在降70只是130，又缺个耳机子，就买上了。后来又搜了一下，京东搞促销之前，果然都是提很多价格。不过这个价格也算是最低了，X猫上一般都140，还要邮费。

K314P有个致命伤，就是直接没有低音效果，耳塞嘛，毕竟不如耳机听起来效果好。又开始盼望着K420、K450。

之前K450是不敢想的，毕竟600多块钱，一个月的生活费。但是K420的话，已经有个K314p了，音质好一点的话，就有点重复了。然而，看评论K450音质比K420提升了很多，肯定，价格也贵了一倍。

迟迟不敢下手，打算等到个促销之类的。但是，这个价格不想联想产品那么水，几个月了都是固定在658不变。

后来在天猫买了台电脑，赶上活动，返了300块。这300可以随便花。再然后就是老一套，向老妈硬磨软泡，最终申请下来了400块钱梦想基金^_^。找了一家，VIP价格只有620还包邮，送礼包，果断入手。

然后两天就来了。初听，声音好浑浊啊，低音低的太吓人了。再听，已经好了很多了。还送了煲机碟，不过我没打算怎么煲，直接小音量听就行了。要是耳机非得煲鸡多少个小时才好，那么厂家早就把耳机先煲它个几百小时，再包装出来卖了。

这有几天了，音质也之间好多了，低音比较好，细节比较清晰，当然需要ape无损格式咯。我妈也要听，听了一会就不行了，说听得头晕。。

这个耳机子，可以坚持我用一年多了吧，下次再升级，就要靠自己赚的钱咯。

 

今天为了做一个模板，来收集幻灯片插件，最终确定了两款比较合适的。coin-slider和nivoslider，为此，研究了一下午，从各个方面来实验这两款插件，究竟哪款比较适合、比较好。

当然，聪明的你看题目就已经知道了。我必须要吐槽一下nivoslider这个jquery插件。这两款插件，在看官方的demo时，这个插件的效果要比coin-slider好一些。看了一下教程，可以自定义的参数较多，貌似功能要更强大一下。于是我就首先研究了一下这款插件的使用方法。由于网上教程比较少，大部分都是直接复制的官方教程，我就直接拿官方的demo代码来看了。这一看，直接晕死。加载了N个css文件，以及各种图片文件，当场晕死。demo里面的代码，也是很多很乱，不是怕多、乱的代码，就怕引用的各种文件各种效果的叠加，分析起来累死个人。

干脆自己按照步骤，自己写个小demo，看一下这款插件的易用性怎么样。按照官方的步骤，写好了图片链接，加载了需要的javascript文件等。打开一看，立刻没有了官方demo的美观和强大，上面的翻页等，都是需要css定义，这个暂时没有管理，所以难看就难看吧。图片切换也算正常，不正常的地方就是，在某个地方，出现了下一张图片的一大堆图片块。这种切换的原理很简单，生成很多div，每个div用css中的background-position属性，把整体的图片切成块，然后对每块进行透明度等的变化，显示的效果就是你看到的那种。但是现在，在旁边出现了一堆块都是乱的，直接无语。具体什么情况，我已经删了，也不截图了。估计是某块css没有定义好，当我打开官方demo的css时，又怵头了，这么多，这么乱的代码。功能的强大，必定面临使用的难度提升，估计这个是给专家级用户使用的，我等小白还是趁早溜走吧。研究了两三个小时，无疾而终。转身向coin-slider走去。

先在网上搜索一下相关资料，某前辈已经写出了一个教程，并且自己做了一个demo，下载下来看了下，效果挺好，代码挺少。同时也下载了官方的demo，打开官方demo，下面的说明，说的清清楚楚的。简而言之就是：加载必备组件=》你自己写图片链接=》执行那个操作。实事也是如此，可能我之前研究nivoslider，而coin-slider和它的原理和操作类似，所以我很快就上手并且做出了自己想要的效果。下面来依次讲解：

1，加载必备组件

这个coin-slider是jquery的一个插件，当然离不开jquery了。所以我们要加载三个项目：jquery、coin-slider和coin-slider-styles.css这三个。后面两个就是这个插件包，最后的那个css文件，是用来格式化幻灯片的相关样式。我估计nivoslider就是因为缺少了一个这个，所以才导致的乱，也有可能是我没有发现这个东西。代码如下：

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”coin-slider.min.js”></script>
<link rel=”stylesheet” href=”coin-slider-styles.css” type=”text/css” />

2，编写你的图片链接

我们首先需要指定一个带有id的div标签，这样在第三步执行的时候，插件才能找到我们想要播出的图片。它的图片的写法，也有几个特点，就是如果你想点击图片跳转到某链接，在外面加上a标签；在img标签后面，新建一个span标签，里面的内容，将会作为图片的说明文字出现。直接看代码：

<div id=”coin-slider”>
    <a href=”#” >
        <img src=”images/walle.jpg” >
        <span>
            Description for nem<br />oDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemo
        </span>
    </a>
    <a href=”#111”>
        <img src=’images/nemo.jpg’ > //加载的图片
        <span> //图片对应的说明
            Description for nemo
        </span>
    </a>
</div>

这个代码的大体框架,是我从官方的demo中提取出来的,这里我又要吐槽一下了,官方的demo文件,写的实在是太不规范了，html标签都用的是大写，而且从上面的img的src就可以看出来，他们竟然用了单引号！css文件里也是这样，患有代码强迫症的潜行者m，花了好几分钟，才把大部分代码变成小写，添加合适的换号，真无语。看了一下开发时间，2010年的作品，那时候xhtml应该普及了，为什么还用大写的写法，无语了。

3，执行操作

确保上面两个步骤完成之后，就需要触发它的方法，来实现幻灯片的功能了。方法当然是

    $(document).ready(function() {
        $(‘#coin-slider’).coinslider({ height:248 }); //使用各种参数配置来扩充他的功能
    });

当然，你也可以使用window.onload，那样可以确保幻灯片图片被完全下载下来之后，再出现幻灯片。

很显然，还可以配置很多参数，让幻灯片的功能更加强大。在上面的代码中，我添加了一个参数height：248，因为我的照片高度是248px。下面介绍一下其他参数，我在官方注释后面，小小的翻译了一下，不准确的话，还望见谅。

width: 565, // width of slider panel 幻灯片的宽度
height: 290, // height of slider panel 幻灯片的高度
spw: 7, // squares per width 幻灯片切出小方框的宽度
sph: 5, // squares per height 幻灯片切出小方框的高度
delay: 3000, // delay between images in ms 切换图片的时间，毫秒单位
sDelay: 30, // delay beetwen squares in ms 小方框变化的时间，毫秒单位（这两个尽量不要改，官方说改了容易出现过度问题）
opacity: 0.7, // opacity of title and navigation 图片下面的说明文字背景的透明度
titleSpeed: 500, // speed of title appereance in ms 标题消失的速度，毫秒单位
effect: ‘’, // random, swirl, rain, straight 变换样式，随机，漩涡，下雨，连续（自己试试就知道效果）
navigation: true, // prev next and buttons 是否显示前个、后个按钮
links : true, // show images as links  是否把图片当做一个链接
hoverPause: true // pause on hover 你把鼠标放上去的时候，图片是否继续变化

我们只需要像这样，填上自己定义的参数即可：

$(‘#coin-slider’).coinslider({ width: 900, navigation: false, delay: 5000 });

4，高级用法

在具体的使用过程中，它的默认样式，肯定不符合我的模板需求，所以我需要对它进行更加细致的修正。那就是通过css，官方的css文件里，你可以直接修改，你也可以新建css文件，对它进行定义。在火狐浏览器中，可以方便观看这个插件生成了些什么div标签，以及相应的id和class。既然你是高级用户，当然难不倒你，我只是在这里提一个思路，具体的就要靠你自己去修改了。

最后，打包一下本教程的资源，放上来。点击下载：coin-slider