一直认为在网页设计中,合理的使用颜色来给用户更好的阅读体验。
下面就是一张列表的颜色样式,在图中,总共使用了10种颜色,用以区分列表头,列表行,选中行,排序列。
其中排序列使用颜色达到一种 “蒙沙”效果,为了达到这种效果,要使得排序列的颜色比对应的记录行的颜色"深色“一点,我们知道,颜色值越大,颜色越”浅“,颜色值越小,颜色越”深“,最极端的例子就是黑色(#000000)和白色(#FFFFFF),因此排序列的颜色比没有排序的对应元素的三原色的值分别小16,例如 5、数据行1 的颜色为 #E5Eff8,其中红色为 E5,绿色为 EF,蓝色为 F8 ,对应的 10、排序列1 的颜色为 #D5DFE8,其中红色为D5,绿色为DF,蓝色为E8。
还有一点就是css样式的设置,为了使得 8、选中的排序列 的颜色出现如图的变化,在选中记录后,使用改变当前列表的class的属性的方式来改变背景色,因为排序列是记录行的子元素,因此要使用层叠样式来达到目的,增加类似的css样式
.选中行 .排序列
{
background-color:#CCCCCC!important;
}
在上面的css中,使用!important来告诉浏览器,当我是排序列的时候,使用这个背景色,而忽略其他的背景色
第一次研究颜色的变化,感觉很有意思,高手请绕道而行了。