CSS, 用户体验

通过不同的CSS设计字体大小来提高用户体验

css-User-Experience

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

(更多…)

CSS, 用户体验

通过字体大小的设计来提高用户体验

css-用户体验

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

(更多…)

CSS, 网站可用性

可用性研究:为文字链接扩大可点击区域

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

(更多…)

CSS, JavaScript

300+Jquery, CSS, MooTools 和 JS的导航菜单资源

300+Jquery, CSS, MooTools 和 JS的导航菜单资源

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

(更多…)

CSS

关于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;


CSS

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选择器的支持情况,并与其它浏览器进行了对比:

(更多…)

CSS

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

DIV+CSS网页布局常用的一些基础知识整理

CSS命名规范

一.文件命名规范

全局样式:global.css;
框架布局:layout.css;
字体样式:font.css;
链接样式:link.css;
打印样式:print.css;

二.常用类/ID命名规范

页 眉:header
内 容:content
容 器:container
页 脚:footer
版 权:copyright 
导 航:menu
主导航:mainMenu
子导航:subMenu
标 志:logo
标 语:banner
标 题:title
侧边栏:sidebar
图 标:Icon
注 释:note
搜 索:search
按 钮:btn
登 录:login
链 接:link
信息框:manage
……

(更多…)

CSS

利用CSS Friendly Control Adapters将ASP.NET控件转为符合WEB标准标签控件

  利用 CSS Friendly Control Adapters 将 ASP.NET 控件转为符合WEB标准的、有语意的HTML页面 CSS 样式表控制。

  例如,Menu、TreeView等控件均将输出< table>标签,而基于Web标准中的“有语意的”这一条,显然应该选择<ul>标签。
  而使用CSS Friendly Control Adapters 会将其转为使用嵌套的<ul>标签渲染,这被称为纯CSS menu(http://www.meyerweb.com/eric/css/edge/menus/demo.html).
  而对于以前不支持CSS的旧式浏览器,可以通过在配置文件中设定不同版本的浏览器使用不同的 Control Adapters来解决!这样对于PocketPC也能通过提供不同的Control Adapters来获得支持!

(更多…)