测开之路九十六：css进阶之元素显示和可见性

元素显示效果:display 块级元素,会导致换行:p.div.h...内联元素,不会导致换行:span.strong... 修改属性让span标签换行让指定div不换行元素可见性:visibility 一:影藏内容和位置:display: none 二:正常显示:visibility: visible 三:影藏内容,不影藏位置:visibility: hidden css /* 元素显示 *//*让span标签换行*//*span{ display: block; }*/ /*让div不…

测开之路九十：css的引用方式

第一种:内联,直接在标签里面加style属性,优先级别最高,但是不利于维护第二种:页面嵌入,在head标签里面写一个style标签,以类选择器的形式写入,优先级别第二第三种:外联,样式表链接,单独写一个css文件,在html的head里面用link标签引用 css /* 定义body的背景色为紫色 */body{ background: blueviolet;} html <!DOCTYPE html><html lang="en"><head>…

测开之路九十五：css进阶之光标和溢出内容处理

光标样式:cursor 准备文字 css 溢出内容处理:overflow,默认溢出部分是显示先把内容放到盒子里面正常显示不显示溢出内容显示为滚动条自动处理 css /* 光标样式 */p{ /* 默认default */ cursor: default; /*!*pointer:小手.*!*/ /*cursor: pointer;*/ /*!*text.*!*/ /*cursor: text;*/ /*!*移动样式move*!*/ /*cursor: move;*/} /* 溢出内容…

测开之路九十四：css之盒子模型

盒子模型为了演示方便,把内容放到盒子里面引用css 演示内容外边距: 4个方向分开写简写为一条指令,顺序为上右下左简写为一条指令,第一个值为上下,第二个值为左右简写为一条指令,只有一个值时,即四个方向的距离都为此值内间距 4个方向分开写简写为一条指令,顺序为上右下左简写为一条指令,第一个值为上下,第二个值为左右简写为一条指令,只有一个值时,即四个方向的距离都为此值边框边框距离:border-width边框样式:border-style None则为无边框颜色:border…

测开之路九十二：css之背景色和背景

引用css 设置背景色: 背景图片整个页面的背景图片图片当局部背景图也可以简写 css /* css基本样式 */ /* 设置p标签的文字前景色.背景色 */p{ /*字体颜色为蓝色*/ color: blue; /*背景色为黑色*/ background-color: black;} /*把图片当整个页面的背景*/body{ /*图片的地址*/ background-image: url("../img/timg.jpg"); /*固定背景图,当文字过长拖动的时候,不跟随文字滚…

测开之路九十九：js函数、事件、window窗体对象

函数:function 函数名(参数列表) 事件单击:onclick()表单提交:onsubmit()鼠标经过:onmouseover()值改表时:onchange() window窗体对象转跳:window.location = url 警告框:alert() 确认框:confirm("messge"),返回true 和false 接收用户输入 prompt("请输入内容", "默认值") <!DOCTYPE html><h…

测开之路九十八：js变量和语句

这里为了方便调试,在jsbin网站上面编写js脚本:https://jsbin.com/?js,console 可以点击增加/减少对应展示分页,Console为控制台部分,Output为页面部分变量和运算 if语句 switch case while do while for循环 for in var a = 10;var b = 20.5;console.log(typeof a);console.log(a+b);console.log(a>b);console.log(a<b &…

测开之路十六：@classmethod与@staticmethod

@classmethod 类方法和属性一样,所有实例化的对象都共享类方法 @staticmethod 静态方法,可以理解为和类没有任何关系,只是放在了类里面参数可以任意定义,根据自己的定义传参,也可以定义不传参…

测开之路一百零三：jquery元素和标签的插入与删除

标签内插入标签外插入给标签加标签 !DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>元素和标签插入</title> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script><…

测开之路一百零二：jquery元素操作

jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值同一个标签下筛选明细最后一个元素第一个元素替换文本 html 获取html 替换html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>…

测开之路三十六：常用的css选择器

在static下新建一个css,并写入内容 /*标签选择器,label标签的颜色为红色*/label {color: red;} /*.代表类选择器,绿色*/.test {color: green;} /*#代表id选择器,黄色*/#test {color: yellow;} /*div标签下的魔偶写标签下的lable标签(相对关系),内容的颜色为蓝色*/div label {color: blue;} /*div标签下的直接的lable标签(父子关系),,灰色*/div > label {co…

测开之路一百零六：bootstrap布局

可以在html的head里面加一些说明 <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> 引入bootstrap和…

测开之路九十三：css之文字样式和段落对齐

引用css 字体族字体类型和尺寸 em:字体按倍数缩放 font-weight:调整文字的粗细段落对齐:text-align 左对齐:left 右对齐:right 居中对齐:center 两边对齐,对最后一行无效:justify 强制所有行两端对齐:text-align-last: justify /*字体族:font-family*/body{ /*设置字体,如下设置时浏览器会按顺序查找客户端有的字体,找到哪个就用哪个字体*/ font-family: "微软雅黑","…

测开之路九十一：css常用的选择器

一:全局选择器:* 二:标签选择器,如给所有p标签加个背景色三:id选择器:# ,如给id为id_01的元素加一个框四:类选择器:. 如设置一个类选择器为blue,当有标签引用blue的时候,背景颜色就会变为蓝色 css /* 全局选择器*,即所有 */*{ color: red;} /* 标签选择器,如给所有p标签加个背景色 */p {background-color: blueviolet;} /* id选择器:# ,如给id为id_01的元素加一个框*/#id_01{ border:…

测开之路七十六：性能测试蓝图之html

{% extends 'base.html' %} {% block script %}  <script src="https://cdn.bootcss.com/ace/1.4.5/ace.js"></script> <script src="https://cdn.bootcss.com/ace/1.4.5/mode-python…

测开之路六十五：UI测试平台之js

//添加网址的函数,生成一个输入网址的标签,并且把标签append到id为cases下function browser() { var html = '\ <div class="row" command="browser">\ <label>打开网址:</label>\ <input type="text" placeholder="http://www.baidu.com/">…

测开之路六十二：接口测试平台之公共的js、html、平台入口

common.js //定义后台的host和端口var host = 'http://192.168.xxx.1:8000'; //'http://127.0.0.1:8000'; //用于发送http请求function http(url, data, method, success, fail){ //如果是get请求,直接传参,如果是其他请求,以json的格式传参 var data = method == 'GET' ? data : JSON.stringify(data) consol…

测开之路六十一：接口测试平台之interface蓝图

create的js //添加header的函数function add_header() { // 这里是动态拼接html语句,带着样式,拼凑成页面的 "key [] value []" var html = '<div class="row">' + '<div style="display: inline; width: 10%; margin-left: 10px; margin-right: 10px;" col-sm-…

测开之路三十八：css布局之定位

常用的布局方式: static:静态定位(默认),什么都不用管,元素会按照默认顺序排列,排不下是会默认换行relative:相对定位(同一层),相对于某一个元素进行定位fixed:绝对定位,指定位置absolute:相对于浏览器的绝对定位和fixed类似文件关系: static定位: css里面写入内容:static定位方式,定位到的显示为红色 .static { position: static; background-color: red;} html里面写入内容:引入css,并加一个标签…

测开之路三十五：css引入

CSS是一种定义样式结构,如字体.颜色.位置等的语言,被用于描述网页上的信息格式化和现实的方式.CSS样式可以直接存储于HTML网页或者单独的样式单文件.无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则.外部使用时,样式单规则被放置在一个带有文件扩展名css的外部样式单文档中. css引入方式: 1.div标签 2.style标签,在head里面声明给某一个标签加样式,如果body里面的改标签没有特别声明样式,将全部展示为同一声明的样式,类似于继承与重写的关系 3.link标签:外链导…

测开之路一百四十六：WTForms之表单应用

WTForms主要是两个功能:1.生成HTML标签 2.对数据格式进行验证官网:https://wtforms.readthedocs.io/en/stable/ 这篇介绍用wtform生成html标签,前端只需要框架,元素使用wtform自动生成安装: 使用wtform重新建模和写前端 from flask_wtf import Formimport wtforms class EmployeeForm(Form): name = wtforms.StringField("姓名"…

测开之路一百二十六：flask之获取request请求数据

可以根据flask的request对象获取所有的请求信息 path = request.path # 获取请求地址method = request.method # 获取请求方法ip = request.remote_addr # 请求来源的ipform = request.form # 获取form表单的数据value = request.values # 获取查询字符串/表单数据headers = request.headers # 后区头部信息User_Agent = request.he…