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

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

一直想找个做桌面前端 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 学起来并非想想那么难。一点一点写,一点一点调试,实践出真理!

 


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

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

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址