设计中默认样式的强大威力

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

超链接的默认样式

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

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

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

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

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

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

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

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

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

按钮的默认样式

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

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

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

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

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

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

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

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

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

ThinkSAAS 常用数据表结构

本文仅列出开发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命令查看。

明天这个时候,我已经在学校了

正如标题中所写的,明天的12点,我就已经返校了。

这个假期50多天就这样过去了。

然后写这篇文章是想说一下,我要开学了,而开学这段时间,会有各种忙碌的事情。

再加上新生来了,还要去迎接新生。

估计得一个月才能彻底的稳定下来,也就是国庆的时候。

所以这段时间,可能无法静下来,静不下来,就无法写出有一定质量的好文章。

所以博客可能更新频率不快。

但是,我很快就会回来。

Style.css文件生成工具

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

工具地址: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文件里面,声明你的作品版权,这个工具就是为了帮助你省略这些工序。

赚钱赚疯了的QQ公司

这篇文章,纯属发泄,真的无语了。

一直在用qq国际版,里面有个广告,介绍了一个交友网站。注册之后,发现了好多老外,各国各地的老外。还特地写了一篇文章,来介绍一下:分享全世界各族人民交友的网站。但是当我真正的使用起来之后,发现根本不是那么回事。

当你浏览一个目标的时候,旁边会出现这些选项

但是你会发现,这里面只有一个按钮“send me a smile”才能使用,其他的按钮,当你点击之后,就会出现

意思就是必须付钱成为VIP,才能有哪些功能。而且,在填写个人资料的时候,不能出现任何可以联系到的个人信息。当我填写邮箱的时候,系统会过滤,并且提示“怎么会有人形容自己是【邮箱】呢:-D”。哇靠,填写其他的信息,都会通过人工审核。目前,我填写了如下信息:

意思很简单啊,就是我的ID是yujiangshui,我用google的服务,用它的mail,很容易就可以想到我的邮箱是yujiangshui@gmail.com。不过智商。。。我不停的继续发笑脸,“勾引”,结果还是没有给我发邮件的。难道是我语法有问题,他们看不懂?。。。。于是,这该死的系统,只能让我每天和她们来回的发笑脸 T T,万恶的QQ啊啊啊啊

 

 

全代码打造简洁美观回到顶部按钮

这次,潜行者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 &gt;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还整理了一下以前的精品文章,加上原文链接,将其转载到其他博客或者网站上,这样,百度可以收录较早的文章,而其他博客平台或者网站上的用户,也可以看到之前的精品文章。
    计划就是这些,希望本文能给你一些启示和帮助。

【每周一曲】Forever At Your Mercy - Ashram

写在前面,本人是个音乐发烧友,喜欢各种音乐艺术。音乐风格喜欢放眼全宇宙,不仅仅局限在国内的通俗流行乐。我更喜欢国外的,富有特色的音乐。偏向摇滚乐,最喜欢摇滚风格,已经轻音乐、重金属等。基本比较常见的音乐风格流派均有欣赏。每段时间都有不同的听歌重点。于是特写作这个系列,每周分享一首近期喜欢的音乐,并且挖掘同风格的其他优秀音乐,写写自己的感触。希望大家能认真的听一听,说不定你也喜欢这种音乐风格。

本周音乐:Forever At Your Mercy

作曲者:Ashram

歌词:

Your smile’s a butterfly
Your eyes a two flames fire
Your skirt around my nights like a summer moon
Lighting up my place but still not mine to hold

Here I am and here I‘ll stay
Here I am
Forever at your mercy

Your skin’s a forbidden dream
Your taste a cool grapevine
All you give is grace and beauty in trembling shades
Please just realize youve got me hypnotized

Here I am and here Ill stay
Here I am
Forever at your mercy

其实,相信当大家看到这首歌的标题的时候,就已经知道这首歌是什么风格了。忧郁,低沉风格。

ashram这个来自意大利的乐队,只有三个人,一个钢琴,一个小提琴,一个唱。以极简的曲风,和低沉婉转的嗓音占据人们的心。

这首歌,当我听到butterfly 这个词的时候,心就跟着嗓音震颤起来,立刻感受到了这首歌要表达的悲伤,忧郁之情。

不过我更喜欢的则是后半部分的,当旋律和歌声突起的时候,那种旋律是如此的振奋人心。交织变成如此美妙的旋律。

当然具体还要你去聆听去欣赏,一定要静下心来欣赏。

最近爱上了ashram的歌,除了这首,还有几首比较称赞:

Lady - 很奇怪的感情,很清澈的嗓音

 

Lullaby - 很释怀的感觉,特别是后来的舒畅的嗓音

 

Elizabeth - 经典轻音乐,说不定你以前听过

 

Il Mostro - 同上,很经典的轻音乐,感觉前奏的曲调和上面的相似

 

至于其他的歌,还望有兴趣的朋友,自行搜索一下。可以打开这里:http://www.xiami.com/artist/23516

 

 

这段时间的计划

列个大体的计划是非常有必要的。

今天以及8月26日了,计划在31日这天,就返校,开始自己的大二生活。

大一这一年,不是特别的充分了享受学习技术的乐趣。大二这一年,彻底决定辞掉班长职务,好好学习技术。

博客也进行了转型,专攻三个方面,发展方向不再混乱,感觉写作业非常带劲。

这一个暑假,依然天天宅在家里,上学弄电脑。养白了一些,也养胖了一些。

下个学期的计划如下:

1,返校后,先去迎接新生,寻找清纯小学妹,套近乎(邪恶了)

2,补习一下离散数学,准备补考,很丢人的说,挂了

3,晚上不吃饭了,晚自习后去跑步,一定要趁气候适合的时候,把假期吃的,全部剪掉。彻底变成矮穷帅(注意帅)

4,继续深入学习,彻底掌握html5 css3 php javascript那一套,做一些应用

5,再开几个计划中的网站

6,做几个作品,锻炼一下自己的水平,然后拿出去接点任务赚点钱。要学会独立,不能再依赖家里了,一定要努力赚钱

暂时就这些吧,其他的更具体的也没有了,执行力是关键。我现在不是太痴迷游戏了,执行力就有了深刻的保障。各个硬件设施都配备齐全,好带劲。

亲自打造属于自己网站风格的工具边栏

首先请允许潜行者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中就可以了。怎么样,其实原理也非常简单,动一下脑子就可以了。