测试开发进阶(十三)

浮动和定位

定位

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>

基本语法

  1. 注释
  • 单行注释:以 // 开头。
  • 多行注释:以 /* 开始,以 */ 结尾。
  1. 变量
  • 命名

变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。 变量必须以字母开头 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做) 变量名称对大小写敏感(y 和 Y 是不同的变量) 驼峰式命名

  • 声明
// 先声明后赋值
var x;
x = 20;

// 在声明的时候赋值
var y=3;

// 同时给多个变量赋值
var a = 100,b = 200,c = 300;
  1. 数据类型
  • 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

  1. 运算符
  • 算术运算符:+(加)、 -(减)、 *(乘)、/(除)、 %(求余)
  • 赋值运算符:=+=-=*=/=%=++
  • 条件运算符:=====>>=<<=!=
  • 逻辑运算符:&amp;&amp;(而且 )、||(或者 )、!(否 )

条件运算

  1. 条件语句
  • 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 的代码:
  1. 循环
  • 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)
}

![for](../../../Library/Application Support/typora-user-images/image-20190903153318464.png)

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]);
}

遍历对象

  1. 函数
  • 函数定义:定义函数的关键词 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)
  1. 对象属性

对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:

var objA={name : "python",age  : 18,id :123};

原文发布于微信公众号 - 测试游记(zx94_11)

原文发表时间:2019-09-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券