一、界面篇
学习界面需要有一定的HTML、CSS认知，如果你问为什么，那就当我白说。
由于界面库官方没有给一个完善的User guide，所有的学习都靠自己，而唯一的标准教程就是SDK中给的例程，所以为了完善地学习此库，以SDK中的例程一个个解析学习。
此篇主要来解析html_samples下的界面编写，我想这是大家都非常关心的话题，所以放在第一位。（PS：由于界面编写需要很多 HTML+CSS 知识，我也是新手，没有多少这方面的学习，所以如有错误纯属正常，望谅解。）
参考文档：http://www.51rxyy.com/
1、@font-face
此例程主要讲解字体（自定义字体）在界面中的使用。（以后若无特殊情况，都会按照以下形式【文件结构+代码+解析】组织文章）
文件结构：
NinjaLine.ttf
test.htm
代码：在Style中，插入
@font-face
{ font-family: NinjaLine; src: url(NinjaLine.ttf); }p
{ font: 18pt NinjaLine; }解析：其中font:18pt NinjaLine; 是设置段落
之内的文字以NinjaLine字体显示。而由于这种字体没有在系统里注册，所以不能直接调用，需要按照@font-face{…}的形式给予声明（和C/C++的函数声明的感觉差不多），如果是系统里已经有的字体，如“宋体”、“楷体”等就可以不声明，直接使用。2、@image-map
这部分讲的是@image-map的用法。
文件结构：
cmd.bat
dpi-aware.htm
rttb.png
star-1x.png
star-2x.png
test.htm
toolbar-icons.htm
第一个文件：dpi-aware.htm,讲的是关于自适应DPI的问题。
代码：
@image-map dpi-aware { src: url(star-1x.png) 100dpi, url(star-2x.png) ; } #star { size:180dip; background: no-repeat 50% 50%; background-image: image-map(dpi-aware); border:1px solid; } #star-no { size:180dip; background: no-repeat 50% 50%; background-image: url(star-1x.png); border:1px solid; }//HTML代码省略
解析：
代码中比较值得注意的就是声明了一个@image-map dpi-aware {}(不专业，但是方便理解就这么说了)，然后再#star这一块调用image-map(dpi-aware)，将它设置为背景图片。在我的电脑上运行的效果是#star和#star-no显示的是同一张图片（大家的效果都应该差不多），但是将声明的部分改为：
@image-map dpi-aware {
src: url(star-1x.png) 90dpi, url(star-2x.png) ; }之后，显示的是声明的第二张图片。为什么呢？
官方给出的说明其实已经解释了这个问题，@image-map dpi-aware 声明，当被调用时，会根据电脑屏幕的DPI（每英寸点数，win7可以通过注册表 HKEY_CURRENT_USER\Control Panel\Desktop\WindowMetric\AppliedDPI查看），当电脑DPI小于设定的100dpi时，就会调用第一张图片，否则就是第二张了。总的来说，就是根据屏幕DPI自适应显示相应的图片。
第二个文件：test.htm 是关于设置样式的问题，官方没给任何解释，但是根据第三个文件内容，可以很明显地看出来，它啥也不是，就是个Test,Pass掉。
第三个文件：toolbar-icons.htm 这个文件很重要，他给我们提供了一种很方便地加载类似MFC中工具条界面的方法。
代码：
Style部分样式代码：
@image-map tb-icon { src:url(rttb.png); cells:15 2; items: ulist, olist, unindent, indent, picture, table, link, align-left, align-center, align-right, align-justify, align, fullscreen, unfullscreen, props, bold, italic, underline, strikethrough, font-family, font-size, text-color, text-back-color, source; } toolbar { display:block; display-model:block-inside; flow:horizontal; border-spacing:2px; padding:0; border-left: 1px solid #F4F4F4; border-bottom: 1px solid #BBB; background-color: #F1F1F1 #F1F1F1 #DADADA #DADADA; } toolbar > widget.button { behavior:clickable; size:21px; padding:0; foreground:no-repeat 50% 50%; padding:3px; foreground-repeat:no-repeat; background-image:none; background-repeat:stretch; hit-margin: 2px; margin: 2px; transition:none; } toolbar > widget.button.bold { foreground-image:image-map(tb-icon,bold); } toolbar > widget.button.italic { foreground-image:image-map(tb-icon,italic); } ....(类似的省略)Body部分Htm代码：
<toolbar> <widget .button .bold /> <widget .button .italic /> ....其他的省略解析：
Style部分的第一个声明@image-map和字体声明类似，声明了一个ToolBar的结构，其中，src:url(xx.png);表明Toolbar所使用的图片，一般为了美观，png要做成透明背景的。cells:15 2;表明整个Toolbar的大小为多少行多少列。items:xx1,xx2,…;表明Toolbar中有哪些项，都以名称表示，每个名称都和图片中的图标相对应。一般cells中形成的表格数一定要大于items的项目数。
toolbar{ … }和toolbar > widget.button{…}和其类似样式的就是CSS样式了，虽然并不和平常使用的CSS完全相同，但是除了添加的一些专门适用于程序的样式之外，其他的都差不多，我只捡一些比较重要和特殊的加以说明，一般性描述的不做介绍，有问题的可以去W3CSchool和HTMLayout官网查询。
toolbar{} //设置之间的内容的样式，这种使用方法以后会很常见
display:block; //显示当前块，一般不需要设置，默认的就是这个
flow:horizontal; //水平放置其内部块，这个很重要，是HTMLayout专用的
toolbar > widget.button{} //设置内部或者有<widget .button>声明的块的样式，这种用法很常见,你可以根据各块的关系随意组合下去。
toolbar > widget.button：hover{} //上一个用法的扩展，表明是在上一个样式的前提下，当鼠标移到上面时，所表现的的样式，类似的还有 :active、:disable等。
behavior:clickable;//设置它对应控件的动作为可以被点击。behavior有很多动作，每一个动作的具体含义需要查阅官方的文档。
background-image:url(theme:toolbar-button-hover); //设置背景图片，重点是后面的theme主题设置，目前未找到全的列举说明，暂时明白什么意思就行了，当然也可以自己设置对应的图片。
foreground-image-transformation: colorize(#70F); //设置当每一项被至于焦点时，图片的前景颜色，通过colorize(xx)可以改变图片的显示颜色（透明的前景色）。
toolbar > widget.button.bold { foreground-image:image-map(tb-icon,bold); } //这里才是重点的重点，它将HTML中的name=“bold”（.bold）对应的widget和@image-map中的图片对应起来，{}中的bold就是在声明时指定的名称。
最后是HTML部分，重点是<widget .button .bold /> 这表明widget控件的类型(style)为button,其名称为bold（bold这里只是表示一个名称，不是粗体的标志）,个人猜测完全可以写为这种比较正规的写法，只是样式需要做很多调整，没有官方的方法省事。值得注意的是，CSS中的名称一定要和这里的style和class对应，原因我也不用多说了。
3、abs
文档结构：
│ abs.htm
│ abspos.htm
│ abs_fix.htm
│ fix_center.htm
│ menus.htm
│ rel_abs.htm
└─images
back.png menu-back.png第一个文件：abs.htm 演示的是绝对位置的不同效果。
代码：
Style部分：
#abs1 {
position:relative;
overflow:auto;
height:50%;
...}
#abs2 {
position:absolute; width:150px;…
}#abs3 {
position:absolute; width:150px;…
}HTML部分(只写框架)：
<div id="abs1"> <p>很多的p段落</p> .... <p id="abs2"></p> </div> <div id="abs3"> xxxxxxxx </div>解析：
Style部分值得注意的就是position属性的设置，其中absolute指绝对的，relative相对的。这里的绝对是相对于当前所在的大块（母块）来说的，由于abs1的height:50%，配合overflow:auto,每次只显示一半的区块，所以拉动滑动条时它的左上角坐标是变化的，而abs2相对于他的左上角的绝对位置不变，所以abs2区块也会跟随着abs1移动。而abs3由于直接位于body之内，他的位置相对于body的左上角来绝对确定，body不变，他的位置就不会变。
