前言:
如今各位老铁们对“html框架搭建”大致比较着重,咱们都想要分析一些“html框架搭建”的相关资讯。那么小编同时在网上网罗了一些对于“html框架搭建””的相关知识,希望朋友们能喜欢,小伙伴们一起来学习一下吧!Python自学之Pywebio(一),搭建web版人员管理系统
系统框架详见上面的文章。本文主要是学习如何搭建系统框架。
首先我们需要先做整个系统布局,主要使用put_row、put_column两个函数,若是需要使用网格布局,可以使用put_grid。
put_row(content=[], size=None, scope=None, position=- 1)
行布局,增加一行。
参数说明
content (list) – 子元素列表, 行中间可以使用 None , None 表示空白行间距,默认10pxsize (str) –用于指示子元素的宽度, 宽度值可用格式:像素值: 例如: 100px,百分比: 表示占可用宽度的百分比. 例如: 33.33%,fr 关键字: 表示比例关系, 2fr 表示的宽度为 1fr 的两倍,auto 关键字: 表示由浏览器自己决定长度,minmax(min, max) : 产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。 例如: minmax(100px, 1fr) 表示长度不小于100px,不大于1frscope, position (int) – 与 put_text 函数的同名参数含义一致
样例:
put_row([put_code('A'), None, put_code('B')], size='40% 10px 60%')
pywebio.output.put_column(content=[], size=None, scope=None, position=- 1)
列布局,增加一列。
参数说明如put_row,此处不做赘述。
put_column([put_code('A'), None, put_code('B')], size='40% 10px 60%')
按照之前设计的框架,代码编写如下:
from pywebio.output import *put_row([put_code('logo')])put_row([ put_column([put_code('menu')]),None, put_column([ put_row([put_code('button')]),None, put_row([put_code('data')]),None, put_row([put_code('page')]) ])])
右键运行后,页面如下:
与我们设计的框架基本一致。
下面我们需要针对框架进行高度、宽度的设计,使用size参数。增加“size = '15% 1% 84%'”。
from pywebio.output import *put_row([put_code('logo')])put_row([ put_column([put_code('menu')]),None, put_column([ put_row([put_code('button')]),None, put_row([put_code('data')]),None, put_row([put_code('page')]) ])],size = '15% 1% 84%')
结果见下图:
后续我们实际开展编程时,不会预留这么多空白,我们需要删除None,通过增加样式style来区分各模块间的边界,增加“style('width:850px;height:100px;border:1px solid green ;text-align:left;background-color:yellow;')”,这个是CSS样式,分别设置了宽度、高度,边框、文字居中,背景颜色等。
from pywebio.output import *put_row([put_text('logo')]).style('border:1px solid green ;text-align:left;background-color:yellow;')put_row([ put_column([put_code('menu')]),None, put_column([ put_row([put_code('button')]),None, put_row([put_code('data')]),None, put_row([put_code('page')]) ])],size = '15% 1% 84%')
效果如下:
大家后面可以尝试一下,把文本的数字颜色和字体大小修改一下。
遇到的问题:页面整体框架的页面无法设置超过850px,以及整体页面的居中设置。看到文章的各位大料,若有了解,还望不吝赐教。
标签: #html框架搭建