zoukankan      html  css  js  c++  java
  • 列表颜色的设置,带给用户更好的阅读体验

    一直认为在网页设计中,合理的使用颜色来给用户更好的阅读体验。

    下面就是一张列表的颜色样式,在图中,总共使用了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来告诉浏览器,当我是排序列的时候,使用这个背景色,而忽略其他的背景色

    第一次研究颜色的变化,感觉很有意思,高手请绕道而行了。

    ========================================================

    比sharepoint更强大的表单功能,图形化的流程设计,与asp.net完美结合,支持vs.net编程扩展

    ========================================================

  • 相关阅读:
    菜根谭#69
    菜根谭#68
    菜根谭#67
    菜根谭#66
    菜根谭#65
    菜根谭#64
    菜根谭#63
    更新centos本地仓库(换源)
    docker初探
    centos python版本升级到3.x
  • 原文地址:https://www.cnblogs.com/chegan/p/1272946.html
Copyright © 2011-2022 走看看