15.htmlayout 实现skin换肤功能!

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

在 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?

 

 

 

 

 


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

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

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

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