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

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

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

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

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

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

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

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

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

(三)经典之浅色模式

(四)经典之深色模式

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

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

相关文章
|
7月前
|
前端开发 安全
CSS的元素显示模式
CSS的元素显示模式
|
5月前
HTML+CSS+JS实现十款好看的登录注册界面模板,赶紧收藏起来吧!(一)
HTML+CSS+JS实现十款好看的登录注册界面模板,赶紧收藏起来吧!
|
2月前
|
前端开发
当当网新用户注册界面——CSS代码
当当网新用户注册界面——CSS代码
9 0
|
3月前
|
Web App开发 存储 前端开发
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
|
4月前
|
前端开发 开发者 UED
掌握CSS:构建现代Web界面的关键
掌握CSS:构建现代Web界面的关键
37 0
|
4月前
|
前端开发 容器
CSS布局模式之Flex布局&Grid布局(三)
CSS布局模式之Flex布局&Grid布局
|
4月前
|
前端开发 开发者 容器
CSS布局模式之Flex布局&Grid布局(二)
CSS布局模式之Flex布局&Grid布局
|
4月前
|
前端开发 开发者 UED
CSS布局模式之Flex布局&Grid布局(一)
CSS布局模式之Flex布局&Grid布局
|
4月前
|
前端开发 容器
CSS:元素显示模式与背景
CSS:元素显示模式与背景
29 0
|
4月前
|
前端开发
前端必看的8个HTML+CSS技巧 (七)混合模式(Blend)
前端必看的8个HTML+CSS技巧 (七)混合模式(Blend)