首页 > 软件开发 > HTML >

easyui-accordion 设置标题颜色

来源:互联网 2023-03-16 19:11:59 312

easyui是一个前端开发库,使用这个库,我们可以很方便的写出很多漂亮的控件,比如accordion控件,下面我们来看一下这个控件是怎么设置标题颜色的。IK0办公区 - 实用经验教程分享!

方法/步骤

  • 1

    accordion的创建很简单,我们在html里输入一个div就代表一个选项,title就是选项的标头。IK0办公区 - 实用经验教程分享!

    easyui-accordion 设置标题颜色IK0办公区 - 实用经验教程分享!

  • 2

    js里直接调用easyui的accordion方法就行了,可以不用任何的参数。IK0办公区 - 实用经验教程分享!

    easyui-accordion 设置标题颜色IK0办公区 - 实用经验教程分享!

  • 3

    运行页面,我们就可以得到一个漂亮的accordion控件的,这里控件默认的颜色。IK0办公区 - 实用经验教程分享!

    easyui-accordion 设置标题颜色IK0办公区 - 实用经验教程分享!

  • 4

    要更改控件的标题颜色,我们使用最简单的方法,样式覆盖就行了。IK0办公区 - 实用经验教程分享!

    accordion-header就是颜色标题的样式,我们输入自己喜欢的背景色就行了,相应的要调整标题的文字颜色,修改的是panel-title的样式。IK0办公区 - 实用经验教程分享!

    easyui-accordion 设置标题颜色IK0办公区 - 实用经验教程分享!

  • 5

    还需要修改accordion-header-selected的样式,这是当前选中的选项的标题。IK0办公区 - 实用经验教程分享!

    easyui-accordion 设置标题颜色IK0办公区 - 实用经验教程分享!

  • 6

    要覆盖原来的样式,我们需要在每一个样式名前添加一个.container,这样才能比原来的样式有更大的优先级。完整的样式如图。IK0办公区 - 实用经验教程分享!

    easyui-accordion 设置标题颜色IK0办公区 - 实用经验教程分享!

  • 7

    重新运行页面,就可以得到一个自己定义颜色的accordion了,更漂亮,美观的颜色大家可以自己调整颜色值。IK0办公区 - 实用经验教程分享!

    easyui-accordion 设置标题颜色IK0办公区 - 实用经验教程分享!

  • 7此文章未经授权抓取自百度经验
  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!IK0办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码