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

编程语言 Mr.R 3年前 (2016-11-19) 2043次浏览 已收录 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学起来并非想想那么难。一点一点写,一点一点调试,实践出真理!

 


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

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

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

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