推荐多款好看的报表表单配色方案

目前发现,大家大部分心思都是花在开发上面,对配色方面不会花太多时间精力,可能大家也不知道怎么调好看,所以一般就随意弄点颜色,让报表不至于简陋,甚至直接就不给配色了。没有做美工的报表一般不会让人厌恶,但总是差强人意,而好的配色总能让领导眼前一亮,让报表得到额外加分。

为了方便大家日后给报表做配色方案,这里我列举几个配色方案,方便大家日后的报表开发,让大家辛苦做出来的报表得到更高的分值。(配上各个报表配色方案的  十六进制颜色码  和  RGB颜色值  

方案1(科技感1):

页面背景:34405A(52,64,90)
字体样式:微软雅黑
标题背景:36507E(54,80,126)
标题字体:FFFFFF(255,255,255)
背景1:222C44(34,44,68)
字体1:FFFFFF(255,255,255)
背景2:222C44(34,44,68)
字体2:FFFFFF(255,255,255)
背景3:263856(245,245,245)
字体3:FFFFFF(255,255,255)
边框:无

方案2(科技感2):

页面背景:364662(54,70,98)
字体样式:微软雅黑
背景1:587AB3(88,122,179)
字体1:FFFFFF(255,255,255)
背景2:587AB3(88,122,179)
字体2:FFFFFF(255,255,255)
背景3:445E89(68,94,137)
字体3:9DB5DB(157,181,219)
背景4:3C5276(60,82,118)
字体4:9DB5DB(157,181,219)
边框:无

方案3(淡蓝+淡灰):
页面背景:F7FAFD(247,250,253)
字体样式:微软雅黑
标题背景:E2E9F5(226,233,245)
标题字体:459DBF(69,157,191)
背景2:F3F3F3(243,243,243)
字体2:656565(101,101,101)
背景3:FFFFFF(255,255,255)
字体3:656565(101,101,101)
边框:A7A7A7(167,167,167)

方案4(淡蓝):
页面背景:F7FAFD(247,250,253)
字体样式:微软雅黑
标题背景:无
标题字体:026392(2,99,146)
背景1:C6DAF2(198,218,242)
字体1:3E4A5B(62,74,91)
背景2:EAF6F6(234,246,246)
字体2:3E4A5B(62,74,91)
背景3:F5F8FD(245,248,253)
字体3:3E4A5B(62,74,91)
边框:FFFFFF(255,255,255)

方案5(淡蓝+淡紫):
页面背景:F7FAFD(247,250,253)
字体样式:微软雅黑
标题背景:无
标题字体:026392(2,99,146)
背景1:ABB4FF(171,180,255)
字体1:FFFFFF(255,255,255)
背景2:B7CEF9(183,206,249)
字体2:3E4A5B(62,74,91)
背景3:F5F5F5(245,245,245)
字体4:3E4A5B(62,74,91)
边框:FFFFFF(255,255,255)

方案6(紫色):
页面背景:F7FAFD(247,250,253)
字体样式:微软雅黑
标题背景:无
标题字体:026392(2,99,146)
背景1:636994(99,105,148)
字体1:FFFFFF(255,255,255)
背景2:ABB4FF(171,180,255)
字体2:3E4A5B(62,74,91)
背景3:D1DDF3(209,221,243)
字体4:3E4A5B(62,74,91)
边框:FFFFFF(255,255,255)

方案7(灰色):
页面背景:F7FAFD(247,250,253)
字体样式:微软雅黑
标题背景:无
标题字体:026392(2,99,146)
背景1:BCC7D4(188,199,212)
字体1:3E4A5B(62,74,91)
背景2:F0F0F0(240,240,240)
字体2:3E4A5B(62,74,91)
背景3:E6E6E6(230,230,230)
字体4:3E4A5B(62,74,91)
边框:FFFFFF(255,255,255)

方案8(亮蓝):
页面背景:无背景
字体样式:微软雅黑
标题背景:无
标题字体:0D6FCC(13,111,204)
背景1:339DDD(51,157,221)
字体1:FFFFFF(255,255,255)
背景2:C0EAF7(192,234,247)
字体2:000000(0,0,0)
背景3:FFFFFF(255,255,255)
字体4:000000(0,0,0)
边框:CCCCCC(204,204,204)(虚线)

方案9(蓝色):
页面背景:无背景
字体样式:微软雅黑
标题背景:无
标题字体:5393DA(83,147,218)
背景1:488DD9(72,141,217)
字体1:FFFFFF(255,255,255)
背景2:86BBE7(134,187,231)
字体2:000000(0,0,0)
背景3:E8F0F9 232,240,249)— FFFFFF(255,255,255)
字体4:000000(0,0,0)
边框:D0D0D0(208,208,208)

方案10(亮绿):
页面背景:无背景
字体样式:微软雅黑
标题背景:无
标题字体:18782B(24,120,43)
背景1:349C49(52,156,73)
字体1:FFFFFF(255,255,255)
背景2:F0F7F1(240,247,241)
字体2:000000(0,0,0)
背景3:FFFFFF(255,255,255)
字体4:000000(0,0,0)
边框:C2DFC2(194,223,194)

方案11(深蓝+淡灰):
页面背景:无背景
字体样式:微软雅黑
标题背景:52A8E6(82,168,230)→1A63AE(26,99,174)(渐变色)
标题字体:FFFFFF(255,255,255)
背景1:12529A(18,82,154)
字体1:FFFFFF(255,255,255)
背景2:F7F7F7(247,247,247)
字体2:7B7B7B(123,123,123)
背景3:EEEEEE(238,238,238)
字体4:7B7B7B(123,123,123)
边框:无边框

在日常的工作中,总有一些报表、图表的配色方案是值得我们参考的,但是因为没有颜色抓取工具导致大家没办法把配色给取下来。下面介绍一下大家平时可以怎么抓取颜色:
平时大家都会登录QQ或微信,可以利用截图功能,抓取颜色:
① 同时按住 Ctrl + Alt + A,进入截图;
按住 Ctrl 键,光标处会显示光标位置对应RGB的6位十六进制颜色码
松开 Ctrl 键,光标处会显示光标位置对应RGB的3串RGB颜色值
用好上面的取色技巧,可以大大加快项目组的开发速度和配色技能。

引用其他博主的部分总结:
① 标题部分的颜色要比次标题和数据部分颜色显眼,可以引用渐变色;
② 标题用微软雅黑和黑体字体时候,效果会更好,也可以加粗;
③ 表格的数据要对齐,单元格间距适中。对齐的时候,如果有金额数字的对比,最好用右对齐,一般居中对齐多一些;
④ 灵活用表格的边框,可以得到更好的一些效果,配合突出立体感(立体感的图表一般用灰色、浅灰、银色);
⑤ 标题的位置要注意,居中、居左或居右都会有不同的效果;
⑥ 欧美风格的报表,一般是灰色、蓝色、深红色搭配,行与行间多以同色调的深浅区分,一般没有框线;
⑦ 可以在表头添加一些小图标,效果也不错的。
 

  • 19
    点赞
  • 108
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: HTML优雅好看表单弹窗是指在网页中使用HTML代码设计的一种美观且具有良好用户体验的弹出式表单窗口。 要实现一个优雅好看表单弹窗,可以考虑以下几点: 1. 外观设计:选用合适的颜色和字体,确保与网页整体风格相协调。可以使用CSS样式对弹窗进行美化,如圆角边框、渐变背景等。 2. 布局:合理安排表单元素的位置和大小,使其排列整齐。可以使用CSS的弹性盒子布局或网格布局,以适应不同屏幕尺寸的设备。 3. 响应式设计:确保表单弹窗在不同尺寸的设备上都能正常显示和操作。可以通过使用媒体查询和响应式单位来实现自适应布局。同时,还可以使用@media规则定制不同屏幕尺寸下的样式。 4. 静态与动态效果:可以添加适当的过渡效果或动画效果,增加用户对表单弹窗的体验。例如,可以使用CSS3实现淡入淡出效果或滑动效果,或者使用JavaScript库如jQuery UI来实现更多复杂的动画效果。 5. 表单验证与反馈:对表单输入进行验证,确保用户输入的数据符合要求。可以使用HTML5表单验证属性和JavaScript进行验证,并在出现错误时提供明确的错误提示。 总之,一个优雅好看表单弹窗需要综合考虑外观设计、布局、响应式设计、静态与动态效果以及表单验证与反馈等方面,以提供用户友好的交互体验。通过合理运用HTML、CSS和JavaScript等技术,我们可以设计出吸引人、美观实用的表单弹窗。 ### 回答2: 要创建一个优雅好看表单弹窗,可以遵循以下几个步骤: 1. 使用HTML来构建表单弹窗的基本结构。可以使用div元素作为弹窗的容器,并设置样式来控制其位置、大小和颜色等。在弹窗内部,可以使用form元素来放置表单的各个组件。 2. 使用CSS来美化表单弹窗。可以自定义弹窗的样式,如背景颜色、边框、圆角等。还可以设置表单组件的样式,如输入框的边框、背景色、字体等。可以使用CSS动画效果来增加弹窗的过渡效果,如淡入淡出、滑动等。 3. 使用JavaScript来实现表单弹窗的交互。可以为弹窗添加打开和关闭的功能,比如点击按钮或链接时弹出表单,点击关闭按钮或背景遮罩时关闭表单。可以使用JavaScript获取表单数据,并进行验证和处理。可以通过事件监听来实现弹窗的响应,如点击弹窗外部区域关闭弹窗的功能。 4. 添加一些额外的功能,使表单弹窗更加用户友好。例如,可以为输入框添加占位符、格式化提示信息,并在表单提交时给出反馈提示。还可以添加错误提示,帮助用户更准确地填写表单内容。可以为弹窗添加拖动功能,使用户能够自由移动弹窗的位置。 总之,要创建一个优雅好看表单弹窗,需要在HTML、CSS和JavaScript的基础上进行设计和开发,注意样式的统一性和一致性,同时提供良好的用户交互体验和反馈。 ### 回答3: HTML优雅好看表单弹窗可以通过以下方式实现: 首先,在HTML中创建一个按钮或者其他触发弹窗事件的元素,例如一个提交按钮或者一个图片。然后,在CSS文件中设置该元素的样式,使其看起来漂亮和吸引人。可以使用自定义的背景颜色、边框样式和按钮样式等,以及过渡效果和动画效果,使其更加优雅。 接下来,在JavaScript文件中编写代码,实现点击触发的行为。可以使用事件监听器,在点击按钮或图片时,显示弹窗。可以使用DOM操作,创建一个新的元素作为弹窗容器,并设置其样式和位置。可以根据需要调整弹窗大小、位置和样式,使其适应不同设备和屏幕尺寸。 然后,在弹窗容器中创建表单元素,可以使用HTML的表单标签,如<input>、<label>、<textarea>等,来创建各种表单元素。可以使用CSS样式美化表单元素,例如调整字体样式、添加边框样式和背景颜色等,使其更加美观。 最后,在JavaScript中编写代码,处理表单的提交和关闭行为。可以使用事件监听器,监听提交按钮的点击事件,并在表单提交时执行相关的操作,如验证表单数据、发送表单数据到服务器等。可以使用按钮或者其他元素,触发关闭弹窗的行为,例如点击弹窗外部区域或者点击关闭按钮。可以通过DOM操作,从文档中移除弹窗元素,或者通过改变样式隐藏弹窗。 通过上述步骤,我们可以实现一个优雅好看的HTML表单弹窗,同时满足美观和实用的要求。当用户点击按钮或者其他触发弹窗事件的元素时,弹窗会以漂亮的方式显示,包含表单元素,用户可以输入和提交数据。而且我们可以通过JavaScript代码,对表单进行验证和处理,实现更多的功能和交互效果。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值