/ CSS

7个提高用户体验的CSS技巧

CSS之美在于能通过少量的声明并可使网页变得很与众不同。下面是7个CSS小技巧,可以让你的网页更加时尚,让用户获得更佳的用户体验和浏览愉悦感。

改变选中文字的默认颜色

[css] selection { background:#c3effd; color:#000; /* Safari and Opera */ } -moz-selection { background:#c3effd; color:#000; /* Firefox */ } [/css]

选中文字的颜色一般默认是海军蓝(至少Windows是这样的),Firefox、Opera、Safari(Webkit)允许用户定义选中文字的颜色。

禁止浏览器Firefox、Webkit、Opera滚动条自动隐藏

[css] html { overflow-y:scroll; } [/css]

Firefox、Webkit、Opera等浏览器在网页内容不超过一屏时,会自动隐藏滚动条,这也算合情合理,但在网页间切换时会有跳跃感,如果你不喜欢,就用让滚动条一直显示吧。

圆角(参见CSS3相关文章

[css] input{ -moz-border-radius:10px; -webkit-border-radius:10px; } [/css]

分页打印(演示

[css] .page-break{ page-break-before:always; } [/css]

如果内容过长,则可以使用此属性帮用户分好页,避免浏览器自动分页过于混乱。(译者注:此功能在Tab标签中应该很有用。)

为不同类型的链接添加不同的图标(参见CSS3选择符

[css] a[href$='.pdf'] { padding:0 20px 0 0; background:transparent url(/graphics/icons/pdf.gif) no-repeat center right; } [/css]

如果是一个pdf文件则添加一个pdf的小图标,以此类推。

CSS鼠标指针(CSS3选择符

[css] input[type=submit],label,select,.pointer{ cursor:pointer; } [/css]

当鼠标移动到可点击的非锚点元素上时鼠标指针变为手形。

块状显示连接

[css] navigation li a{ display:block; } [/css]