网站分页导航样式改良计划

所谓网站分页导航,就是如图所示的这种了:

分页导航样式

分页导航样式

这张图片截取自我收集的一个分页导航制作网页。网站分页导航的作用,就是在单网页内容较多,需要分页显示的时候,提供给用户进行前后翻页,以便于浏览更多内容。

在设计分页导航的时候,可参考这些要点:

1,要有便捷的上一页下一页链接。

用户在翻了几页后,一般都不清楚自己到底在哪一页了,此时通过上下页翻页,比用眼睛寻找页码判断页面然后翻页要方便的多。

2,最好有页码

便于随意跳转。如果页码太多,最好有直接跳到最后页和最前页的链接。

3,宽度不能限制死了。

比如说你的页码背景图只适合1-9页这种分页,那建议你不要用这个背景图了,万一有第10页或更多页呢。

所以说,写分页CSS的时候,就不要用width:了,还是用padding吧,容错力更强。

分页导航的样式设计的“潜规则”:

1,当前页码与非当前页码要有明显区分。不然用户真的会找不到自己在哪里。

一般非当前页码是A标签,因为他们是可点击跳转的;而当前页码就不用跳转了,可用span代替,并设置突出的不一样的css样式。

2,明确表示出可点击区

在可点击的页码上,设置背景色或者border,以标明可点击区,这对用户来说很不错。

3,视觉区与可点击区要吻合

网站分页导航样式

网站分页导航样式

例如有分页导航样式如上图。html代码怎么写呢?有的人直接一串A标签搞定,有的人习惯用一串包裹A标签的li来实现。怎样都行,但后者要注意“视觉区与可点击区”的吻合问题。

拿上图来说,视觉区,即每个红色的小方块,就应该是可点击区。如果你用一个li标签来包裹A标签,那要注意把padding什么的加在A标签上而不是li上。如果你加在了li上,那就会出现这种情况:用户以为红色块就是可以点击的,实际上却不是,因为红色的是li,真正的链接是那小小的数字A标签,他必须要把鼠标精确的移动到数字上面,才能点击链接。

这数字有几像素宽呢?恐怕很难点吧

网站分页导航的其他一些注意事项

1,宽一点点吧

现在上网用户近视的很多,12像素的字体很多人都会嫌小了。所以,分页按钮你也不要弄成12像素了,起码“可点击区”设置宽一点点吧

2,是否真的需要分页导航

有的网页实际上内容并不多,仅仅出于增加广告展示量的目的就加入分页,不厚道呀

3,多看案例

个人觉得淘宝啊QQ啊网易啊什么的美工还是做的很好的,我们可以到处看看,“采众家之所长”,及时学习新技术。

翻页页码CSS

 

 

发表评论

电子邮件地址不会被公开。