上位机开发笔记 » 搜索 » user:admin post:true

css扩展之表格(tables)的滚动条方式(scroll-manner)

<html> <head>   <style>        table     {       margin:*;       width:4*;       height:4*;       overflow:auto scroll-manner( page-animation:true, step-animation:true, step:auto, page:auto );       border:1px solid black;       background-colo
admin •  2017-11-13

css扩展之flow模板功能

<html> <head>   <style>        ul      {       border:1px solid black;       background:white;       padding:0;       margin:*;       width:4*;       height:4*;       overflow:auto scroll-manner( page-animation:true, step-animation:true, step:a
admin •  2017-11-13

css扩展之边缘发光效果(outline)

郑重警告!

访问者 , 你的 IP 和 网络MAC身份 地址已经被记录下来了,  请立即停止伤害行为, 否则

admin •  2017-11-13

css扩展之不透明度,渐变透明设置(opacity)

<html>   <head>     <style>     html { background: url(images/sand.gif) repeat; }     div { background-color:red; }     div.op25 { opacity :0.25; }     div.op50 { opacity :0.50; }     div.op75 { opacity :0.75; }     div.op100 { opacity:1.00; }
admin •  2017-11-13

css扩展之@常量的用法(有边框样式边框背景图示例)

<html> <head> <style> @import url( definitions.css ); @const MY_BORDER_COLOR      : #AF0000; @const MY_BORDER            : 3px solid #0000AF; @const MY_SPECIAL_BORDER    : 3px dashed @MY_BORDER_COLOR; @const MY_BORDER1,         MY_BORDER2    
admin •  2017-11-13

css扩展之color-transform

<html> <head> <title>CSS background/foreground images</title> <style type="text/css">  body {  font-family:Verdana; font-size:10pt;  width:100%%; height:100%%;   background-color: window; padding:10px; margin:0; } im
admin •  2017-11-13

css扩展之颜色伽马转换,增强对比和亮度

<html> <head> <title>CSS background/foreground images</title> <style type="text/css">  body {  font-family:Verdana; font-size:10pt;  width:100%%; height:100%%;   background-color: window; padding:10px; margin:0; } #c
admin •  2017-11-13

css扩展之voerflow滚动条样式

<html> <head> <title>Width 120% is cute</title> <style type="text/css">  body {  height:100%%; width:100%%;  font:10pt Verdana;   background-color: white peachpuff peachpuff papayawhip;  } /* style block defining vertica
admin •  2017-11-13

css扩展之aspect-ratio(纵横比)


以后界面基本框架不再每次提供,直接提供官方html和css实现代码,后面再做仔细研究

<html> <head>   <style>     ul.picture-list     {       flow:h-flow;       padding:0;       border-spacing:2px;     }     ul.picture-list > li      
admin •  2017-11-13

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

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

这个怎么实现呢?

导入layout的窗口行为库

import web.layout.behavior.windowCommand;//导入behavior:windowCommand;

2.css中指定触发窗口行为

htmlayout admin •  2017-11-12 • 最后回复来自 coolee
4

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

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

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

htmlayout admin •  2017-11-12 • 最后回复来自 coolee
4

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

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

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

如果改为:

htmlayout admin •  2017-11-12 • 最后回复来自 coolee
4

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

用aardio新建一个标准窗体设计器:

第一步引用layout库,同时定义layout容器

import web.layout; var wbLayout = web.layout(winform);

看上面的代码,用了要给wbLayout作为容器变量名, 我发现如果用其他名字,下面写代码的时候是不会有代码提示的....

下面写html代码,这句代码是自动提示然后生成的,我们可以直接利用它来造.

htmlayout admin •  2017-11-12 • 最后回复来自 coolee
4

不知道从哪开始写,就分析下aardio新建的htmlayout窗体示例代码吧

这里先了解下htmlayout的弹出菜单写法:

<!-- 标题栏弹出菜单,需要弹出节点的最好用div或button等元素,不要使用a,li等元素 --> <div .window-menu>u <menu .popup> <!-- .popup是内置的弹出菜单样式 -->      <li>在线帮助</li>       <li>子菜单        <menu >          &
htmlayout admin •  2017-11-11 • 最后回复来自 admin
5

不知道从哪开始写,就分析下aardio新建的htmlayout窗体示例代码吧

那么再次思考, 如果我们不注释掉最大化移除圆角属性,那么当我们最大化的时候调用移除属性,使窗口没有了圆角, 如果我们点击窗体的还原大小按钮, 还原回来的窗口有没有圆角呢?

经过测试, 圆角属性再次恢复.

这样我们无需多管这个怎么恢复的了..


htmlayout admin •  2017-11-11 • 最后回复来自 admin
5

不知道从哪开始写,就分析下aardio新建的htmlayout窗体示例代码吧

继续,看到了这句

/*最大化后body会自动添加maximize属性,如果是圆角界面可以在这里移除圆角*/ body[maximize]{  border-radius:0; } body[maximize] #header{ border-radius:0; }

如果是圆角则在这可以移除圆角???

那么这个只是针对htmlayout的css样式吗? 还是说针对mianform窗体圆角样式也可以呢?

于是, 代码里添加一个圆角样式,试试

htmlayout admin •  2017-11-11 • 最后回复来自 admin
5

不知道从哪开始写,就分析下aardio新建的htmlayout窗体示例代码吧

随便在哪个页面调用浏览器的调试助手,看看盒子模型

这个是body的模型,把css里面margin改成50后

我记得应该是上右下左,下

htmlayout admin •  2017-11-09 • 最后回复来自 admin
5

不知道从哪开始写,就分析下aardio新建的htmlayout窗体示例代码吧

对于上面的html代码,要知道

<!doctype html>

这个可以删掉,这里我们做的是桌面,不是网页,于是可以知道

一个界面就是从

<html>...</html>

这里面每一对<>...</>之间就是一对节点.

因此可以知道,body , menu ,div 都是节点.

htmlayout admin •  2017-11-09 • 最后回复来自 admin
5

不知道从哪开始写,就分析下aardio新建的htmlayout窗体示例代码吧

对于上面的html代码,要知道

<!doctype html>

这个可以删掉,这里我们做的是桌面,不是网页,于是可以知道

一个界面就是从

<html>...</html>

这里面每一对<>...</>之间就是一对节点.

因此可以知道,body , menu ,div 都是节点.

htmlayout admin •  2017-11-09 • 最后回复来自 admin
5
登 录
信息栏
 私人小站

本站域名

ChengXu.XYZ

投诉联系:  popdes@126.com



快速上位机开发学习,本站主要记录了学习过程中遇到的问题和解决办法及上位机代码分享

这里主要专注于学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.
如果侵权,联系 Popdes@126.com

友情链接
Aardio官方
Aardio资源网


才仁机械


网站地图SiteMap