【Mr.R出品】零基础学aarido编程：04 HTMLayout – 精仿网易云音乐UI 制作心得

一直想找个做桌面前端 UI 的东西，都没有找到一个简单易用的，偶然发现了 HTMLayout，非常叼！

本人学习 HTMLayout 也不过 10 天时间，从着手开发“精仿网易云音乐 UI”也不过一个礼拜时间，

可想而知 HTMLayout 有多么的简单易用！当然本作品也只是初学作品，希望给大家带来参考！

以下是本人一些浅显的学习心得，高手掠过：

HTMLayout 是以 HTML \  CSS  \  CSSS！ behavior 为基础的界面发开库，

#HTML

HTML 非常基础的东西，就不用多说了，

其中# 等于 id，class 等于.

也就是<div #btn ></div>  等价于 <div id = "btn" ></div>

也就是<div .btn ></div> 等价于<div class = "btn" ></div>

TIPS：需要注意的是以 # .的写法种存在大写字母，HTMLayout 会自动转换为小写字母。

#CSS

也是比较基本的了，哥其实也不精通，还有比较遗憾的是 HTMLayout 只支持部分 CSS3 特效，

至于特效，个人认为简单易用的 UI 比华丽的界面来的好些，反正也不用浪费时间去整特效。

对于界面的排版和一些特效 CSS 发挥了很大的作用，还是要多多练习。

在 HTMLayout 中 CSS 其中比较重要的概念：

定位：position 通过定位，我们很容易将整个界面划分成各个区域；

边框：然后通过 border、margin、padding 来调整元素的细节位置；

布局：flow  流式布局：f-flow、h-flow

HTMLayout 也提供了一些 CSS 扩展，比如 outline 外发光、 foreground 前景色（图片）、transition 动画等；

TIPS：其中 HTMLayout 会将所有<img>当做 foreground-image 来处理，

所以可以用 foreground-image 来修改 img 的特性。

用%% 可以自适应高度、宽度。

#CSSS！

注意这不是 CSS 特效，而是与界面的简单交互，还是直接举栗说明吧：

input 输入框：

css：input{assigned!: self:focus = true  ; active-on!: self:value ="";}

html：<input type = "text" value="请输入文字" />

语句：assigned!: self:focus = true

注释：assigned!:初始事件，self 自己也就是 input 本身，focus = true 得到焦点，

也就是当这个 input 输入框一显示出来，就会自动获得焦点。

语句：active-on!: self:value =""

注释：当鼠标点击则清空这个文本框里面内容（""为空字符串）。

自动设置（调整）元素的 height 高度：

语句：size-changed!: $1(#pop_msg)::height = $1p(body).box-border-height() - 108;

注释：size-changed!: 当窗口大小发生改变

$1(#pop_msg)选取#pop_msg 节点 $是选取操作符，

:: 元素样式的属性

$1p(body).box-border-height()获取父节点 BODY 的高度，也就是整个界面的高度

- 108 减去 108 个 px。

整段代码理解也很简单了，当窗口大小发生改变时，#pop_msg 的高度为 body 高度减去 108px；

CSSS！扩展方便我们避免重复性劳动，作为界面操作非常给力。

知识点：

!: 事件，非必须（click！ 、 active-on!:等）

$ 元素选择符号，self 则代表自身元素  强大所在  PS：元素选择在逻辑部分也会经常用到。

带 1 的$1\$1p 返回的是第一个找到的标签，而$\$p 则返回所有名称相同的标签。

.  \ : \ :: 分别可以获取元素的状态（seleced、current）、事件（checked、hover）、属性值（with、broder）

CSSS! 语句使用逗号","作为语句结束符.
CSSS! 中的字符串只能双引号标识, 不能使用单引号("string").
CSSS! 中使用关键字 self 表示当前对象.

behavior 事件

这个就更叼了，用于界面与逻辑程序的交互。

用好 behavior 基本上就能理解 HTMLayout 的真正奥义。

怎么感觉和 QT 的信号槽有点类似。

总结：

本篇主要介绍界面部分，“精仿网易云音乐 UI“ 绝大多数功能都是通过 Html 、css 、csss！完成的，

很多童鞋一开始，可能会像我初学的时候一样有点乱，建议大家学习路径按照上面介绍顺序，

html -> css -> csss! -> behavior ，至于（csss! -> behavior）可以参考 JS。

在开发这个 UI 的时候，本身打算学一点记一点，没想到一股脑就整出了半成品界面，

所以 HTMLayout 学起来并非想想那么难。一点一点写，一点一点调试，实践出真理！