彬Go

关注前端开发/网页设计/网站可用性/用户体验

技术’ 分类下的所有文章

使用基于CSS导航菜单的4个理由

CSS-导航菜单

  导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色、排版、形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素。

  虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的关键,但视觉效果也不能影响到网站可用性。最理想的设计是网站的导航既能比其他网站的导航外观更吸引人,又不会夺走网站内容的焦点。

本文未完,点这儿看完整内容 » »

网站可用性-自动选择输入框

  大多数网站都很注重自己网站的站内搜索这项服务,在网站首页放置搜索表单以提高网站可用性已经成为网站设计的重要环节。但令人惊讶的是一些网站未能实现在页面读取出来以后自动将光标放在搜索框内,这是的网站用户如果来到网站的第一个动作是搜索,他们需要用鼠标单击搜索框或按下tab键将光标移到搜索框,甚至有少数网站连表单的tab按键索引都没有设置。

本文未完,点这儿看完整内容 » »

Google Chrome CSS选择器速度测试比较

Google Chrome

  任何东西只要跟Google有关就总能给我们带来点儿惊喜,2008年9月2日发布的Google Chrome浏览器也不例外。Google Chrome在发布之初就以它的全新特色和完美的运行速度给大多数用户留下了很好的印象。虽然目前已经有很多关于Google Chrome运行速度的测试,比如暴风彬彬之前介绍过的《Google Chrome速度完胜Firefox、IE、Safari》,但现在暴风彬彬要介绍的是国外另一位牛人进行的更全面的CSS选择器速度测试和对比,他将时下流行的所有浏览器的都进行了相关测试,最终比较测试结果,下面就来看看测试结果吧:

本文未完,点这儿看完整内容 » »

  • 2 条评论了已经
  • 分类: CSS, Google
  • 浏览:1,203
  • css-User-Experience

      在设计网页时,没有比页面的外观更重要的了。所以,如果发现设计人员十分关注字体及字体大小,我并不感到惊奇。使用CSS来编辑字体有各种各样的方法,每位设计师都会有自己偏爱的设计习惯,但必须选择更能提高用户体验的方法。今天暴风彬彬将集中讨论字体大小的控制来体现更多的用户体验

    本文未完,点这儿看完整内容 » »

  • 7 条评论了已经
  • 分类: CSS, 用户体验
  • 浏览:4,017
  • 通过字体大小的设计来提高用户体验

    css-用户体验

      现在国内绝大多数的站点都用CSS把字体大小设定为12px,像素虽然也是相对尺寸单位,但只是相对于屏幕的分辨率 ,当屏幕的分辨率一定时,如果你 感到字太小,阅读有困难,在非标准浏览器中就无能为力了,从而降低了用户体验。所以说,如果把单位改成em,那么就可以用CTRL+鼠标滚动把字放大,或者用菜单上的查 看>文字大小来改变字的大小。

    本文未完,点这儿看完整内容 » »

  • 1 条评论了已经
  • 分类: CSS, 用户体验
  • 浏览:1,458
  •   今天暴风彬彬要讨论的网站可用性技巧,是让你的网站文字链接提高一定的可用性,而且实现起来非常简单,其实这也算是提高用户体验的方法。扩大可点击区域并不是要让你的文字链接占用其他可用资源或增加文字链接的数量。其实很多问题不用暴风彬彬说得很详细,因为现在很多网站(尤其国内)根本没有考虑到文字链接的可用性问题。下面就来看看如何通过设置块级元素(block)和填充(padding)来实现扩大文字链接可点击区域吧。

    本文未完,点这儿看完整内容 » »

  • 3 条评论了已经
  • 分类: CSS, 网站可用性
  • 浏览:1,344
  • 300+Jquery, CSS, MooTools 和 JS的导航菜单资源

      如果你是网站前端开发人员,那么对你来说,也许做一个漂亮导航菜单会很得心应手。但今天暴风彬彬要为大家总结各种导航菜单的资源,以便让大家的网站前端开发的工作更方便更快速,只要选择现成的例子就可以应用于自己的网站了。暴风彬彬收集的这些资源,从非常简单的HTML和CSS导航菜单,到非常复杂和高级的JQuery、JavaScript和MooTools技术,这都可以让你轻松实现褪色、滑动、拖动等效果。如果您觉得这些资源值得一用,那就快把本网页收藏以备日后查阅吧!

    本文未完,点这儿看完整内容 » »

  • 45 条评论了已经
  • 分类: Ajax, CSS, Javascript
  • 浏览:57,597
  • 关于Google Chrome的CSS Hack

    以下CSS Hack适用于Google Chrome及Safari3.1浏览器,经过下面的代码定义,只有Google Chrome及Safari3.1浏览器中的段落文字才会显示为红色,因为:

    1.网页仅仅有一个bady元素

    2.仅仅这两个浏览器支持伪类nth-of-type()

    3.body:nth-of-type(1) 将匹配唯一的那个body元素.

    body:nth-of-type(1) p {
            color: #333333;


    关于Chrome对CSS的支持情况,请看这里
  • 1 条评论了已经
  • 分类: CSS, Google
  • 浏览:2,402
  • Google Chrome:CSS支持最好的浏览器

      确切的讲它应该是最好的之一,因为还有一个浏览器也同样支持CSS选择器相当全面,那就是Apple的Safari3.1。虽然Google Chrome才发布三天,而且评价褒贬不一,但是他的技术、内核以及现在谈论的CSS支持确实是其他浏览器所无法比拟的,至少它的速度还没有多少人质疑过!

      Google Chrome使用的是safari正在使用的引擎AppleWebKit,版本是525.13,而Safari3.1使用的是最新的版本525.18,具体有什么差别我也不太清楚。至少它们都支持CSS3选择器。

      下面是 Engage 公司的前端开发工程师Estelle 测试整理的Google Chrome对CSS选择器的支持情况,并与其它浏览器进行了对比:

    本文未完,点这儿看完整内容 » »

  • 3 条评论了已经
  • 分类: CSS, Google
  • 浏览:2,252
  • CSS HACK:关于Firefox3有效应用

    FF3出来有一段时间了,本站对此版本的FF也发布了几篇相关文章。针对FF3的CSS HACK好不容易找到。
    MOZILLA 已经对FF所有 3.0一下版本实行了 更新3.0的推送。

    大部分都是3.0了,以前的HACK又失效了。

    下面的代码是最新的FF3的HACK。只有 FF3支持。呵呵


    #hack, x:-moz-any-link, x:default {
    /* Firefox 3 style here */
    }

    本文未完,点这儿看完整内容 » »

  • 木有评论,快来写吧!
  • 分类: CSS
  • 浏览:915