测试开发进阶(十三)
浮动和定位
定位
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
通过使用 position 属性，选择不同类型的定位。
- 相对定位:
position: relative;
在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
- 绝对定位:
position: absolute;
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
- 固定位置:
position:fixed;
直接以浏览器窗口作为参考进行定位，它是浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
img{
float:right;
}
- left -> 元素向左浮动
- right ->元素向右浮动
- none ->默认值。元素不浮动，并会显示在其在文本中出现的位置。
- Inherit -> 规定应该从父元素继承 float 属性的值。
完成一个简单的菜单栏
菜单栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>「测试游记」- 菜单栏</title>
<style type="text/css">
.menu {
width: 100%;
height: 80px;
background: #5c5dff;
color: white;
}
.menu li {
float: left;
width: 100px;
height: 100%;
font: normal 20px/80px 'Microsoft Sans Serif';
list-style: none;
margin-left: 20px;
text-align: center;
}
.menu li:hover{
background: coral;
color: darkblue;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
</ul>
</div>
</body>
</html>
JavaScript
HTML 中的脚本必须位于 标签之间。脚本可被放置在 HTML 页面的 和 部分中。
1、行间事件（主要用于事件）
<div onclick="alert('Hello Python')">box</div>
弹出hello
2、页面script标签嵌入
<script type="text/javascript">
alert('ok！');
</script>
3、外部引入
<script type="text/javascript" src="js/index.js"></script>
基本语法
- 注释
- 单行注释：以 // 开头。
- 多行注释：以 /* 开始，以 */ 结尾。
- 变量
- 命名
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。 变量必须以字母开头 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做） 变量名称对大小写敏感（y 和 Y 是不同的变量） 驼峰式命名
- 声明
// 先声明后赋值
var x;
x = 20;
// 在声明的时候赋值
var y=3;
// 同时给多个变量赋值
var a = 100,b = 200,c = 300;
- 数据类型
- number 数字类型
var y=3;
- string 字符串类型
var st='python'
- boolean 布尔类型
true和false(小写)
- undefined 类型
变量声明未初始化，它的值就是undefined
- null类型
表示空对象，类似于python中的None
var tr = null
- arry 数组
方法：
length属性：获取数组长度
pop() 方法从数组中删除最后一个元素
push() 方法（在数组结尾处）向数组添加一个新的元素
//创建数组
var skill= Array("html","css","js");
skill[0]
skill.length
skill.pop()
skill.push('jquery')
image-20190903151321110
- 运算符
- 算术运算符：
+(加)、-(减)、*(乘)、/(除)、%(求余) - 赋值运算符：
=、+=、-=、*=、/=、%=、++ - 条件运算符：
==、===、>、>=、<、<=、!=、 - 逻辑运算符：
&&(而且 )、||(或者 )、!(否 )
条件运算
- 条件语句
- if
- else
- else if
- switch
var a = 199;
if(a>200){
alert('大于200');
}
else if(a>100){
alert('大于100')
}
else {
alert(a);
}
弹框
switch(表达式) {
case n1:
代码块
break;
case n1:
代码块
break;
default:
默认代码块
}
- 计算一次 switch 表达式
- 把表达式的值与每个 case 的值进行对比
- 如果存在匹配，则执行关联代码
- 遇到 break 关键词，它会跳出 switch 代码块。
- case 匹配不存在时，运行default 的代码：
- 循环
- while循环
- for 循环
- for in 循环
// while循环
while（条件语句){
循环体
}
// for 循环
for (语句1,语句2，语句3 ){
循环体代码
}
// for in 循环
for (x in arrayr){
循环体代码
}
var aa = 101, bb = 100;
while (aa > bb) {
console.log(aa);
aa -= 1;
}
while
for (i=0;i<10;i++){
console.log(i)
}
var aList = Array(11,22,33,44,55);
for (i in aList){
console.log(i);
console.log(aList[i]);
}
for in
var objC = {name: 'abc', age: 19};
// 遍历对象
for (x in objC) {
console.log(x);
console.log(objC[x]);
}
遍历对象
- 函数
- 函数定义：定义函数的关键词 function，函数内的代码块，包裹在花括号中：
// 函数的定义 使用function
function func() {
alter(999)
}
// 函数调用
func()
提示：JavaScript 对大小写敏感。关键词 function 必须是小写的
- 函数参数：
function addNumber(var1,var2) {
alert(var1 + var2;);
}
addNumber(11,22)
- 函数返回值：使用 return 来返回值。在使用 return 语句时，函数会停止执行，并返回指定的值。
function addNumber(var1, var2) {
return var1 + var2;
}
var res = addNumber(11,222);
alert(res)
- 对象属性
对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var objA={name : "python",age : 18,id :123};