2. 如何用Javascript低代码进行HTML页面布局?

HTML的布局标签包括table,div等,例如要进行一个中心型的布局,即上下左右中的布局,可以采用这样的代码。

<html>
<head>
</head>
<body>
<table width="100%" height="100%">
<tr><td colspan="3" height="48"><div id="chofo_top"></div></td></tr>
<tr><td width="200"><div id="chofo_left"></div></td>
<td><div id="chofo_center" style="background:#f5f5f5;height:100%"></div></td>
<td width="1"><div id="chofo_right"></div></td></tr>
<tr><td colspan="3" height="48"><div id="chofo_bottom"></div></td></tr>
</table>
</body>
</html>

采用上面这段代码,做出来的布局效果是上下高为48,左面宽200,右侧为1,中间背景色为灰白色的布局。可以通过id设置个单元格的内容。
低代码下划线构件的层组件默认就是这个布局,代码如下:

<html>
<head>
<script src="http://www.chofo.com/demo/js/_.js"></script>
</head>
<body><script>
new _.();
</script></body>
</html>

如果要自定义高度,则需要采用二维码数组给层传递参数,代码如下:

<html>
<head>
<script src="http://www.chofo.com/demo/js/_.js"></script>
</head>
<body><script>
new _.([["chofo",{:48,:48,:200,:1,放缩:true}]]);
</script></body>
</html>

这段代码不仅仅可以设置上下左右的高度和宽度,当鼠标点击左侧和中间部分的渐变线的时候,还可以对左侧和中间部分进行放缩。
层组件

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值