龙空技术网

Python自学之Pywebio(二)编写系统框架

逆流之瞳 345

前言:

如今各位老铁们对“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框架搭建