15.htmlayout 实现skin换肤功能!

编程语言 Mr.R 3年前 (2016-12-13) 1757次浏览 已收录 13个评论 扫描二维码

在htmlayout的css中支持自定义CSS常量,这给我们做界面设计带来了更多可能。

了解过less的童鞋,应该对CSS常量定义非常熟悉。

需求分析:更换皮肤一般是需要改变界面的颜色、图片、样式,

而在htmlayout中绝大部分内容都可以使用css来控制,非常酷!

 

 

步骤:

首先我们来建立一个 red.css,用来存储红色皮肤需要的样式:

@const BGROUND: RED;   //定义背景色

@const   BORDER1, BORDER2 : 5px solid #FF0000;  //定义两个边框色

@const MY_HATCH_BACKGROUND  : repeat url(sb-scroll-base.png);  //定义滚动条图片

@const WIDTH_EXPR: calc( 50% + 40px);  //定义宽度数值

@const INITIAL_TEXT: “RED SKIN”;       //定义文本内容

 

同样的方法在定义blue.css 用来存储蓝色皮肤需要的样式:

@const BGROUND: BLUE;   //定义背景色

@const   BORDER1, BORDER2 : 5px solid #FFFF00;  //定义两个边框色

@const MY_HATCH_BACKGROUND  : repeat url(sb-scroll-base2.png);  //定义滚动条图片

@const WIDTH_EXPR: calc( 50% + 40px);  //定义宽度数值

@const INITIAL_TEXT: “BLUE SKIN”;       //定义文本内容

 

 

然后在建立个master.css 用来存储真个界面框架的样式:

这里存放一些不需要改动的样式,同时引用常量值来加载skin样式。

 

body{background:@BGROUND;}

div{border:@BORDER1;}

…..

 

 

最后通过HTML来引入master.css和默认皮肤样式red.css

 




R大软件管理器




......


 

 

辣么OK,现在我们只需要将red.css替换成blue.css 就可以实现换肤的要求了!

 

实现代码:

注意:本段内容须成功“回复本文”后“刷新本页”方可查看!

是不是很so easy?

 

 

 

 

 


QQ㊀群: 240424174;QQ㊁群: 749250816;QQ㊂群: 542382043;
㊄群: 860166303;⑥群: 738134262
常见问题:1、文件解压请使用Winrar5.5版本以上解压;
2、视频播放有声音无画面,请了解下PotPlayer播放器;
R大技术站 , 版权所有,如未注明 , 均为原创,如需转载请注明来源!
喜欢 (0)
[itdiy@qq.com]
分享 (0)
发表我的评论
取消评论

表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(13)个小伙伴在吐槽
  1. 1
    22019-01-01 06:17 回复 Windows 10 | Chrome 71.0.3578.98
  2. 好好学习天天向上
    lokiey2018-06-17 16:16 回复 Windows 7 | Chrome 51.0.2704.63
  3. 好好学习天天向上
    xtxd2018-05-12 21:03 回复 Windows 10 | Chrome 57.0.2987.98
  4. 一般人我不告诉他这个好地方
    netkkk2018-04-15 21:48 回复 Windows 7 | Chrome 53.0.2785.104
  5. 谢谢分享
    nioliii2018-03-09 19:58 回复 Windows 10 | 搜狗浏览器 2.X
  6. 谢谢分享
    mqx2017-12-03 18:09 回复 Windows 10 | Chrome 62.0.3202.62
  7. :mrgreen:
    12017-11-07 14:22 回复 Windows 10 | Chrome 59.0.3071.30
  8. 看看
    lioncn2017-10-01 21:58 回复 Windows 10 | Chrome 61.0.3163.100
  9. 很酷,谢谢分享
    Vivian2017-07-24 13:48 回复 Windows 10 | Chrome 50.0.2661.102
  10. 这个很实用
    天机玄狐2017-06-20 21:02 回复 Windows 10 | Chrome 51.0.2704.63
  11. 看看
    yy2016-12-16 19:09 回复 Windows 7 | Chrome 49.0.2623.75
  12. 顶R大……。
    netfox2016-12-13 17:45 回复 Windows 7 | Chrome 47.0.2526.108
  13. good
    good2016-12-13 16:25 回复 Windows 7 | Chrome 49.0.2623.75