htmlayout学习一:了解html所谓的网页背景和背景属性

By admin at 2017-11-12 • 0人收藏 • 789人看过

用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>

运行

blob.png

拖动边框发现颜色自动填满整个窗口.

那么再给它增加一个高度

body{
    		background:#ff0;
    		height:400px;
    	}

blob.png

出现了滚动条,下拉发现颜色到一定位置就没了.

如果不想有滚动条出现,就需要进制掉,以上我们定义了body是400px,而这个滚动条是整个窗体的滚动条,那么我们需要设置整个窗体的html不能有滚动条,于是

html,body{ height:100%;
    			margin:0;
    			overflow:hidden;	
    		 }

我们定义html超出不显示滚动条.当然,我们也可以新增的形式来专门指定html不能有

 html,body{ height:100%;
    			margin:0;
    			//overflow:hidden;	
    		 }
 html{ overflow:hidden; }

这时候我们怎么拖动调整窗口都不会有滚动条出现了.

3 个回复 | 最后更新于 2017-11-12
2017-11-12   #1

试着给body添加一个圆角属性.

body{
    		background:#000;
    		height:400px;
    		border-radius:10%;
    	}

blob.png

如果改为:

border-radius:5% 20% 10% 15%;//左上,右上,右下,左下

blob.png

2017-11-12   #2

给body加入边框,为了看的醒目,我注释掉了背景色

body{
    		//background:#000;
    		height:400px;
    		border-radius:5% 20% 10% 15%;//左上,右上,右下,左下
    		border:solid;//实线
    		border-color:#F00;//红色
    		border-width:1px;//宽1px
    	}

blob.png

2017-11-12   #3

给body节点增加一个拖动窗体的交互功能吧.

这个怎么实现呢?

  1. 导入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节点内任意地方长按鼠标左键就可以拖动窗体了.

登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前正在学aardio+halcon机器视觉.
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
aardio在线手册Aardio在线手册
Htmlayout皮肤Htmlayout皮肤引擎介绍
黑猫Aar教程网:简码编程
C大Aardio论坛:Aar爱好者论坛
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站
Loading...