htmlayout学习一:了解html所谓的网页背景和背景属性
用aardio新建一个标准窗体设计器:
第一步引用layout库,同时定义layout容器
import web.layout; var wbLayout = web.layout(winform);
看上面的代码,用了要给wbLayout作为容器变量名, 我发现如果用其他名字,下面写代码的时候是不会有代码提示的....
下面写html代码,这句代码是自动提示然后生成的,我们可以直接利用它来造.
wbLayout.html = /** <!doctype html> <html> <head> <style type="text/css"> html,body{ height:100%; margin:0; } </style> </head> <body> </body> </html> **/
我们删除掉了其他暂时不研究的属性节点div,只剩下body
上面如果运行就会看到一个空白的窗体,里面啥都没有.
我想给窗体增加一个背景色,黄颜色吧.
在body属性下面新增一个专门针对body的属性表.
<style type="text/css"> html,body{ height:100%; margin:0; } body{ background:#ff0; } </style>
运行
拖动边框发现颜色自动填满整个窗口.
那么再给它增加一个高度
body{ background:#ff0; height:400px; }
出现了滚动条,下拉发现颜色到一定位置就没了.
如果不想有滚动条出现,就需要进制掉,以上我们定义了body是400px,而这个滚动条是整个窗体的滚动条,那么我们需要设置整个窗体的html不能有滚动条,于是
html,body{ height:100%; margin:0; overflow:hidden; }
我们定义html超出不显示滚动条.当然,我们也可以新增的形式来专门指定html不能有
html,body{ height:100%; margin:0; //overflow:hidden; } html{ overflow:hidden; }
这时候我们怎么拖动调整窗口都不会有滚动条出现了.
给body节点增加一个拖动窗体的交互功能吧.
这个怎么实现呢?
导入layout的窗口行为库
import web.layout.behavior.windowCommand;//导入behavior:windowCommand;
2.css中指定触发窗口行为
body{ //background:#000; height:400px; border-radius:5% 20% 10% 15%;//左上,右上,右下,左下 border:solid; border-color:#F00; border-width:1px; behavior:windowCommand;//触发行为 }
3.在html代码中指定body节点触发什么样的窗口行为
<body command="window-caption">
触发windows的caption行为, 这个是不是和aardio中的拖动窗体代码一样?!
所以说弄通了aardio标准控件之后,再来了解htmlayout也有方便的地方.
这样,去拖动body节点内任意地方长按鼠标左键就可以拖动窗体了.
登录后方可回帖
试着给body添加一个圆角属性.
如果改为: