layui 颜色设计感

最新推荐文章于 2023-07-12 19:00:24 发布
原创 最新推荐文章于 2023-07-12 19:00:24 发布 · 632 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#layui

layui 使用深沉的墨绿色为主色调，搭配浅黑色和蓝色，营造清新自然的风格。次要色调包括暖色和引人注目的颜色，适用于不同场景。layui 还提供七种背景色供元素使用，如徽章、分割线。设计注重简约，灰色系常用于背景和边框，降低视觉疲劳。
视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感，而 layui 提供的颜色，清新而不乏深沉，互相柔和，不过分刺激大脑皮层的神经反应，形成越久越耐看的微妙影像。合理搭配，可与各式各样的网站避免违和，从而使你的 Web 平台看上去更为融洽。

主色调

  • #009688

    主色调之一

  • #5FB878

    一般用于选中状态

  • #393D49

    通常用于导航

  • #1E9FFF

    经典蓝

layui 主要是以象征包容的墨绿作为主色调，由于它给人以深沉感，所以通常会以浅黑色的作为其陪衬，又会以蓝色这种比较鲜艳的色调来弥补它的色觉疲劳，整体让人清新自然，愈发耐看。【取色意义】：我们执着于务实，不盲目攀比，又始终不忘绽放活力。这正是 layui 所追求的价值。

次色调

  • #FFB800

    暖色系

  • #FF5722

    比较引人注意的颜色

  • #01AAED

    文本链接着色

  • #2F4056

    侧边色

事实上，layui 并非不敢去尝试一些亮丽的颜色，但许多情况下一个它可能并不是那么合适，所以我们把这些颜色归为“场景色”，即按照实际场景来呈现对应的颜色，比如你想给人以警觉感，可以尝试用上面的红色。他们一般会出现在 layui 的按钮、提示和修饰性元素，以及一些侧边元素上。

中性色

他们一

最低0.47元/天 解锁文章
【layui】主页优化：tab选中背景色&默认主页且不允许关闭
德仔
06-13 3650
1.1 现在tab选中字体和背景色都没有明显变化，对用户不太友好！ 1.2 期望效果 1.3 添加CSS控制： 1.4 预览效果 同上2.1 查看代码： 2.2 修改代码： 2.3 预览效果 2.4 同样添加css控制 2.5 预览效果
layui 颜色选择器（colorpicker）的简单使用
向宇
09-03 1884
官方文档：https://www.layui.com/doc/modules/colorpicker.html 废话不多说，直接上代码 html代码 <div class="layui-form-item"> <label class="layui-form-label label-required">主题颜色</label> <div class="layui-input-block"> <div class="layu.
【Layui】选项卡Tab：完美实现网页内容分类与导航
无法自律的人的博客
07-12 6895
Layui选项卡是一种基于Layui框架的前端组件，用于创建多个选项卡并在其之间进行切换。Layui是一个轻量级、易用、灵活的前端UI框架，旨在简化前端开发过程。使用Layui选项卡，你可以在页面中创建多个选项卡标签，每个标签对应一个内容区域。用户可以点击选项卡标签来切换显示相应的内容区域。这种方式常用于页面的分组显示或切换不同的功能模块。Layui选项卡提供了丰富的配置选项，包括标签样式、选项卡切换的触发事件、内容区域的布局方式等。它还支持动态添加和删除选项卡，以及自定义选项卡的样式和功能。
layuimini 图标颜色便捷指定
张尽欢
08-10 1293
layuimini 后台图片默认都是没有颜色。为了美观做了修改，可以在菜单初始化的时候就渲染好图标的颜色 第一步 修改miniMenu.js文件 一： renderLeftMenu :function(leftMenus,options){ options = options || {}; var me = this ; var leftMenusHtml = me.each(leftMenus || [],function.
002-layui颜色
aihiao的专栏
01-22 1286
1. 常用主色 1.1. layui主要是以象征包容的墨绿作为主色调, 由于它给人以深沉感, 所以通常会以浅黑色的作为其陪衬, 又会以蓝色这种比较鲜艳的色调来弥补它的色觉疲劳, 整体让人清新自然, 愈发耐看。 2. 场景色 2.1. 事实上, layui并非不敢去尝试一些亮丽的颜色, 但许多情况下一个它可能并不是那么合适, 所以我们把这些颜色归为"场景色", 即按照实际场景来呈现对应的颜色, 比如你想给人以警觉感, 可以尝试用上面的红色。他们一般会出现在layui的按钮、提示和修饰性元素, 以及一
layui table设置某一行的字体颜色方法
10-16
在Layui table中，如果想要设置某一行的字体颜色，可以通过JavaScript来实现。接下来，我们将详细介绍如何在Layui table中设置某一行的字体颜色。 首先，我们需要了解Layui table的基本结构。Layui table通常由几个...
layui颜色选择器 拾色器结合表单记录
渡目成书
07-14 841
有时候需要提交颜色进行处理，需要拾色器供用户筛选颜色 <div class="layui-col-md8"> <input class="layui-input layui-input-inline" type="text" value="" id="color"> </div> <div id="test" class="layui-col-md4"></div&gt.
精选资源
layui 富文本 layedit.js 字体大小 字体颜色背景颜色
01-20
Layui 是一套前端 UI 框架，它以轻量级和易用性著称，非常适合快速开发模块化的 Web 应用。其富文本编辑器组件 layedit.js 是基于该框架开发的一款支持丰富编辑功能的插件，广泛应用于网页内容编辑场景。 在 ...
layui常用颜色及图标汇总
热门推荐
taiyangwojiu的博客
12-12 1万+
layui常用颜色及图标汇总 常用颜色 图标 CSS3动画类 按钮 一、颜色 layui提供了7中内置颜色 如下： 赤色：class="layui-bg-red" 橙色：class="layui-bg-orange" 墨绿：class="layui-bg-green" 藏青：class="layui-bg-cyan" 蓝色：class="layui-bg-blue" 雅黑：class="lay...
layui的表格table选中数据后更改本行的颜色
10-17
在layui的表格table中，选中某行数据之后更改本行颜色，取消选中后恢复原样式。在layui的表格table中，选中某行数据之后更改本行颜色，取消选中后恢复原样式。
layer ui插件显示tips时,修改字体颜色的实现方法
10-16
今天小编就为大家分享一篇layer ui插件显示tips时,修改字体颜色的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui框架学习（22：颜色选择器模块）
gc_2299的博客
03-31 1329
学习并记录layui框架中内置模块的颜色选择器模块的函数、参数设置方式。
Layui 颜色
z60015260的博客
06-13 2039
1.主色调2.次色调3.中性色 4.背景颜色
layui主题颜色
weixin_45817985的博客
08-07 6983
layui主题颜色
layer ui插件显示tips时，修改字体颜色
weixin_43887789的博客
04-16 1178
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <script type="text/javascript" src="&l...
layui按钮颜色
googlehemingzhe的博客
09-05 3030
赤色：class="layui-bg-red" 橙色：class="layui-bg-orange" 墨绿：class="layui-bg-green" 藏青：class="layui-bg-cyan" 蓝色：class="layui-bg-blue" 雅黑：class="layui-bg-black" 银灰：class="layui-bg-gray"
Layui
小yu别错过的博客
10-25 4595
在官网首页，可以很方便的下载LayUILayUI 是一款经典模块化前端 UI 框架，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。使得前端页面的制作变得更加简单。
Layui框架实战基础(增删改查)表格表单(一) 根据后台返回颜色字段修改表格背景颜色
m0_65607651的博客
06-25 2418
Layui框架实战基础(增删改查)表格表单(一) 根据后台返回颜色字段修改表格背景颜色
layui 颜色 浅色
最新发布
06-18
### 如何在 Layui 框架中使用浅色系主题 Layui 是一个经典的前端框架，提供了丰富的组件和灵活的配置选项。对于主题颜色的设置，默认情况下 Layui 使用浅色系主题。如果需要明确配置浅色系主题，可以通过以下方式实现[^1]。 ```javascript layui.use('code', function() { layui.code({ title: 'Layui 浅色主题示例', ln: false, skin: 'default' // 默认为浅色主题 }); }); ``` 上述代码展示了如何通过 `skin` 参数设置显示风格。默认值为 `default`，表示浅色主题。如果需要切换到深色主题，则可以将 `skin` 的值设置为 `dark`。 此外，在 Layui 的文档中提到，框架内置了一些基础类用于布局和容器的样式定义[^2]。这些类可以直接应用于 HTML 元素以快速构建页面结构。例如： ```html <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md6">左侧内容</div> <div class="layui-col-md6">右侧内容</div> </div> </div> ``` 此示例展示了如何利用 Layui 的栅格系统进行页面布局。结合浅色主题，用户可以确保页面整体风格保持一致且美观[^2]。 在实际项目中，如果需要进一步自定义主题颜色，可以通过修改 CSS 文件实现。通常，Layui 的主题文件位于项目的静态资源目录下（如 `resources/static/layui/css/layui.css`）。如果项目使用了 Spring Boot 框架，并且配置了静态资源路径，可以通过以下方式指定访问路径[^3]： ```yaml spring: mvc: view: prefix: /templates/ suffix: .html web: resources: static-locations: classpath:/templates/,classpath:/static/ ``` 完成上述配置后，开发者可以编辑 `layui.css` 文件中的颜色变量，或者添加自定义的 CSS 样式以覆盖默认的浅色主题[^3]。 ### 注意事项 - 如果未显式设置 `skin` 参数，Layui 默认会使用浅色主题。 - 自定义主题时，建议备份原始 CSS 文件，以便在需要时恢复默认样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值