分享ai写webui教程

52675969

一直想写webui但是看了html代码有点头大，最近ai不是很火的，就测试一下，
首先是在火山上画好组件，然后复制代码，加上指令，火山复制后可以看到组件信息，易的我找不到就用的火山的，随机画的组件测试的
要有感兴趣的，完善完善指令希望也能分享一下

[HTML] 纯文本查看 复制代码

<火山程序 类型 = "通常" 版本 = 1 />

类 我的主窗口 <基础类 = 窗口 注释 = "样例主窗口" @视窗.布局 = "client_size = \"798, 643\"" 标题 = "我的主窗口">
{
    变量 标签1 <类型 = 标签 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 101\r\npos = \"293, 94, 80, 24\"" 标题 = "标签1">
    变量 横向滚动条1 <类型 = 横向滚动条 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 102\r\npos = \"637, 566, 120, 24\"" 标题 = "横向滚动条1">
    变量 列表框1 <类型 = 列表框 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 103\r\npos = \"493, 518, 100, 120\"" 标题 = "列表框1">
    变量 选择列表框1 <类型 = 选择列表框 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 104\r\npos = \"277, 518, 128, 120\"" 标题 = "选择列表框1">
    变量 状态条1 <类型 = 状态条 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 105\r\npos = \"21, 582, 120, 30\"" 标题 = "状态条1">
    变量 纵向滚动条1 <类型 = 纵向滚动条 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 106\r\npos = \"685, 374, 24, 120\"" 标题 = "纵向滚动条1">
    变量 组合框1 <类型 = 组合框 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 107\r\npos = \"629, 30, 100, 24\"" 标题 = "组合框1">
    变量 日期框1 <类型 = 日期框 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 108\r\npos = \"653, 198, 120, 24\"" 标题 = "日期框1">
    变量 进度条1 <类型 = 进度条 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 109\r\npos = \"517, 270, 120, 24\"" 标题 = "进度条1">
    变量 hk条1 <类型 = hk条 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 110\r\npos = \"477, 102, 120, 40\"" 标题 = "hk条1">
    变量 选择夹2 <类型 = 选择夹 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 111\r\npos = \"389, 302, 240, 200\"" 标题 = "选择夹2"
            子夹项目 = "组件1\n0\n搜索2\n0">
    变量 单选框1 <类型 = 单选框 折叠2 隐藏值属性 = "0"
            @视窗.布局 = "group = 1\r\nid = 112\r\nparent_id = 111\r\npos = \"152, 112, 80, 24\"" 标题 = "单选框1">
    变量 按钮2 <类型 = 按钮 折叠2 隐藏值属性 = "0"
            @视窗.布局 = "group = 0\r\nid = 113\r\nparent_id = 111\r\npos = \"48, 112, 80, 32\"" 标题 = "按钮2">
    变量 IP编辑框1 <类型 = IP编辑框 折叠2 隐藏值属性 = "0"
            @视窗.布局 = "group = 0\r\nid = 114\r\nparent_id = 111\r\npos = \"40, 48, 100, 24\"" 标题 = "IP编辑框1">
    变量 选择夹1 <类型 = 选择夹 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 115\r\npos = \"29, 326, 240, 200\"" 标题 = "选择夹1"
            子夹项目 = "teb1\n0\nteb2\n0">
    变量 外形框1 <类型 = 外形框 折叠2 隐藏值属性 = "0"
            @视窗.布局 = "group = 1\r\nid = 116\r\nparent_id = 115\r\npos = \"104, 48, 120, 100\"" 标题 = "外形框1">
    变量 图片框1 <类型 = 图片框 折叠2 隐藏值属性 = "0"
            @视窗.布局 = "group = 0\r\nid = 117\r\nparent_id = 115\r\npos = \"24, 72, 120, 100\"" 标题 = "图片框1">
    变量 表格1 <类型 = 表格 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 118\r\npos = \"285, 158, 192, 128\"" 标题 = "表格1">
    变量 超级列表框1 <类型 = 超级列表框 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 119\r\npos = \"29, 182, 240, 104\"" 标题 = "超级列表框1"
            报表列 = "0\n-1\n0\n50\n序\n0\n-1\n0\n50\n账号\n0\n-1\n0\n50\n密码" 是否有检查框 = 真 显示表格线 = 真 无表头 = 假 "类型" = 报表列表框>
    变量 图形按钮1 <类型 = 图形按钮 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 120\r\npos = \"373, 30, 80, 32\"" 标题 = "图形按钮1">
    变量 选择框1 <类型 = 选择框 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 121\r\npos = \"261, 38, 80, 24\"" 标题 = "选择框1">
    变量 分组框1 <类型 = 分组框 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 122\r\npos = \"21, 14, 192, 152\"" 标题 = "分组框1">
    变量 编辑框1 <类型 = 编辑框 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 123\r\nparent_id = 122\r\npos = \"40, 96, 80, 24\""
            标题 = "编辑框1">
    变量 按钮1 <类型 = 按钮 折叠2 隐藏值属性 = "0" @视窗.布局 = "id = 124\r\nparent_id = 122\r\npos = \"32, 32, 80, 32\""
            标题 = "按钮1">
}


例如：npos = \"253, 150, 80, 32 为坐标x=253,y=150, 宽=80，高=32 ，生成的举例为窗口组件，选择夹1为ul 组件，子夹项目 = "teb1\n0\nteb2\n0">为两个项，ul 项1标题为teb1，ul 项2标题为teb2， @视窗.布局 = "group = 0\ 意思是此组件属于teb项1上的组件,@视窗.布局 = "group = 1\ 意思是此组件属于teb项2上的组件,以此类推，ul项选中才显示，
帮我按以上代码，重新绘制成html代码，不使用框架，坐标大小比例要与上方一致完全一致，不使用弹性布局，可以在适当的地方加div确保位置坐标一致，保证组件里的标题字体大小要能一行显示，如果上方代码宽度满足不了标题一行显示，可以适当增加宽度，按钮标题上下左右居中显示， 编辑框不加内边距，美化显示，代码加注释，按钮加单机事件提示框显示来源

不离01

感谢分享！感谢分享！感谢分享！

daowuya

有点意思

zzh233

易语言界面直接生成同样的html这个易语言官方论坛还有精易论坛是有源码的

憨憨问号

有点意思