CSS控制界面风格及深浅色模式的一些思路

    我们设定一个设置功能,这套功能是本人研究开发学习使用,请大家多提意见、建议,登录后如下图:

       如图的左上开始菜单按钮、中部的导航快捷链接和右下方的快捷设置图标,三个入口均可以访问设置功能,以右下方最为直接进行调用。调用后如下图:

CSS控制界面风格及深浅色模式的一些思路_第1张图片

      点击设置继续层级菜单,操作方式类似手机界面:

CSS控制界面风格及深浅色模式的一些思路_第2张图片

       如图我们在样式外观选项里提供了“简约动感” 和 “经典” 两选择,显示与亮度选项里有三个模式,即浅色模式、深色模式与智能模式(根据时间自动进行深浅切换的一种模式),以下是这几种方式的组合效果,大家可以参照一下:

(一)简约动感之浅色模式

简约动感的主要体现为文本框为下划线式,另外还有按钮元素的控制等。

(二) 简约动感之深色模式

(三)经典之浅色模式

(四)经典之深色模式

实现的思路大体是设计N套皮肤风格CSS,这是里假设为 JANE.CSS(简约)和 CLASSIC.CSS(经典),再配套对应 JANE_STD.CSS (浅色) JANE_DARK.CSS (深色) ,CLASSIC_STD.CSS (浅色) CLASSIC_DARK.CSS (深色) 来控制深浅色的切换,规则的定义有助于JS的控制和功能的区分、细节元素的处理。

后期我们可以根据需求添加更多的风格CSS并配套对应的深浅模式CSS,嵌入到系统中,实现灵活的设计,以上就是整体的设计思路,希望大家评论指教!

谢谢大家积极投票反馈!

你可能感兴趣的:(UI专栏,css,前端,html5,javascript,jquery)