APPcan前端开发的好处就是在于可拖拽，不用编写很多代码的；但是呢？怎么拖拽出想要的效果呢？
工具/原料
1
appcan软件
2
电脑
新建页面
熟悉界面的框架
1
组件是不需要介绍的，只要认识字稍微懂点html的都知道是干什么用处的一下是框架，就是面板
2
必须是第一个添加的 第一个，就是页面，是最基础的
3
头部 第二个（标题）
4
第三个（顶部导航栏）
5
尾部（可是是导航也可以是版本信息等）
6
中间部分
拖拽框架组件的顺序
1
一般情况下，顺序如下只需要点一下第一个图形page就可以了，在布局树里面如果如下图所示，就表示添加成功了！！！1、页面page
2
1、选一个头部打开布局树，点击第一个Page，表示在这个基础上添加东西，page是最基础的，所以的东西都在在这里里面添加可以从布局树里面看的出来头部是在页面的基础上添加的
3
底部的宽和高都是可以调整的
4
3、中间头部和中间是并列的，都是在page里面
5
4、一个Box（一个区域，相当于div）box是在中间的基础上添加的box的添加一般是看不出来效果的怎么办呢？3.1、打开布局树3.2 选择box，然后右侧出现下图所示设置位置为0 86，就可以box了3.3、然后用鼠标拖动一下box框的大小位置3.4 要是还是看不见box 就先保存，然后刷新一下
6
5、在Box里面添加按钮其他组件打开布局树在box的基础上添加设置输入框和按钮的跨度为calc=(100% - 2em) 这个是最好看的尺寸记住100%与-之间有空格-与2em之间有空格 不然不生效
7
6、给输入框添加icon一定要选这样的输入框 如上步骤设置宽高等
8
选中一个带图标的文本框步骤和效果图如下