html自动生成后台,基于纯HTML+CSS代码创建网页后台自适应布局方法与流程

dc24287bf1e0f537595e6188e53445c0.gif

本发明涉及网页开发技术领域,具体涉及一种基于纯HTML+CSS代码创建网页后台自适应布局的方法。

背景技术:

在后台网页开发的过程中,经常会用到“导航栏加内容栏”的双栏布局方式,而传统的float浮动布局模式并不能满足后台网页的宽度自适应需求;另外传统的双栏布局方式一般都是基于iframe框架来实现的。但是基于iframe框架有一些弊端,比如iframe框架会阻塞页面加载,使得网页变慢;iframe没有独立的连接池;创建iframe耗费的性能比其他DOM元素(包括style或script)多10-100倍。

技术实现要素:

本发明解决的技术问题在于提供一种基于纯HTML+CSS代码创建网页后台自适应布局的方法,替代了在后台项目中使用float浮动布局固定宽度,以及使用iframe框架布局,使得网页变慢,资源耗费过大的问题。

本发明解决上述技术问题的技术方案是:

包括如下步骤:

创建HTML元素界面布局文件和CSS样式文件;

创建网页主体部分,并且设置宽度、高度、绝对定位属性;

在主体下创建网页侧边导航栏,并且设置宽度、高度、绝对定位属性;

在主体下创建网页侧边内容栏,并且设置高度、外边距、绝对定位等属性;

在界面布局文件中引入CSS文件。

本发明的有益效果是:避免使用float浮动布局,使得网页可以进行自适应显示屏宽度;避免使用iframe框架,避免网页变慢,资源耗费过大的问题。

附图说明

下面结合附图对本发明进一步说明:

图1为本发明布局图;

图2为本发明操作流程图。

具体实施方式

见附图1、2所示,本发明具体包括如下步骤:

第1步、创建HTML元素界面布局文件;

第2步、创建CSS样式文件;

第3步、创建网页主体main部分,并且设置宽度、高度、绝对定位等属性;

HTML部分:

CSS部分:#main{width:100%;height:900px;position:relative;)

第4步、在main主体下创建网页侧栏side部分,并且设置宽度、高度、绝对定位等属性;

HTML部分:

CSS部分:#side{position:absolute;left:0;top:0;width:300px;height:100%;}

第5步、在main主体下创建网页内容栏content部分,并且设置高度、外边距、绝对定位等属性;

HTML部分:

CSS部分:#content{position:relative;margin-left:300px;top:0;height:100%;}

第6步、在界面布局文件中引入CSS文件。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值