目录
一、背景相关样式
二、定位position
三、javascript
1、变量的定义
2、数据类型
3、绑定事件
一、背景相关样式
background-image: url(); // 背景图片
background-repeat: repeat; // 背景图片是否平铺 no-repeat
background-size: 200px; // 背景图片尺寸 cover把所在容器铺满
background-position:50px 10px; // 背景图片位置 距离左50px 上10px 也可以是单词center
background-attachment:fixed; // 背景图片不随浏览器的滚动而滚动
二、定位position
- static：静态模式|常态模式。
- relative：代表相对模式，随着浏览器的滚动而滚动，参考物是自己原来的位置，保留自己原来的空间。
- absolute：代表绝对模式，随着浏览器的滚动而滚动，参考物是浏览器，会释放掉自己原来的空间。
- fixed：代表绝对模式，不随着浏览器的滚动而滚动，参考物是浏览器，会释放掉自己原来的空间。
vh视口高度 wh视口宽度
默认position为static不动,测试如下:
/*
html结构如下
<div class="demo"><div class="t1">top</div><div class="m1">middle</div><div class="b1">bottom</div>
</div>
*/.t1 {width: 200px;height: 100px;background: palegreen;
}.m1 {width: 200px;height: 100px;background: plum;position: static;
}
.b1 {width: 200px;height: 100px;background: skyblue;
}
position为relative不动,测试如下:
/*
html结构如下
<div class="demo"><div class="t1">top</div><div class="m1">middle</div><div class="b1">bottom</div>
</div>
*/.t1 {width: 200px;height: 100px;background: palegreen;
}.m1 {width: 200px;height: 100px;background: plum;position: relative;top: 20px;left: 50px;
}
.b1 {width: 200px;height: 100px;background: skyblue;
}
我们发现相对模式，是相对静态时候，通过left，top控制与静态的相对位置，并且可以随浏览器滚动而滚动。
position为absolute不动,测试如下:
/*
html结构如下
<div class="demo"><div class="t1">top</div><div class="m1">middle</div><div class="b1">bottom</div>
</div>
*/
.demo{height: 1100px;
}
.t1 {width: 200px;height: 100px;background: palegreen;
}.m1 {width: 200px;height: 100px;background: plum;position: absolute;top: 20px;left: 50px;
}
.b1 {width: 200px;height: 100px;background: skyblue;
}
我们发现绝对模式，是相对浏览器，与原来静态位置无关，通过top,left调整在浏览器的位置，并且可以随浏览器滚动而滚动。
position为fixed不动,测试如下:
/*
html结构如下
<div class="demo"><div class="t1">top</div><div class="m1">middle</div><div class="b1">bottom</div>
</div>
*/
.demo{height: 1100px;
}
.t1 {width: 200px;height: 100px;background: palegreen;
}.m1 {width: 200px;height: 100px;background: plum;position: fixed;top: 20px;left: 50px;
}
.b1 {width: 200px;height: 100px;background: skyblue;
}
与absolute大致相同都是以浏览器为基础，但是不随浏览器的滚动而滚动，同样通过top等方位词控制位置。
三、javascript
两种使用方式
1、内嵌
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 内嵌 --><script>alert(1);</script>
</head>
<body></body>
</html>2、外引
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/javascript基础语法.js"></script>
</head>
<body></body>
</html>js文件内容如下：
alert("hello")1、变量的定义
// var 声明变量的关键字
var a = 3;
var b = "hello";
var c = 3.1415926;2、数据类型
基本类型可以分为如下几类：
- 数字（小数、整数）
- 字符串（单引号，双引号索引的内容)
- 布尔类型（true,false)
- undefined（声明变量但没赋值）
- null 涉及一个量、但是这个量本身不存在
复合类型可以分为如下几类
1、数组
var arr = [10, 5.3, true, undefined, null, "hhh", [10, 2]];下标从0开始访问
2、对象
var obj = {name:"张三", age:50, marry:true, play:['足球','篮球']};类似于python的字典，C++的map容器 ，访问方式———对象.属性
3、函数
// 定义函数
function f(a, b) {console.log("函数已执行");
}// 调用函数
f(a, b);//匿名函数
var ff = function(a,b){console.log("函数已执行");
}// 调用匿名函数
ff(a, b);注：
var f = function ff(a, b){}
// 调用方法
f(a, b);
// 不能用ff(a, b);var a = {name:function(){}};
//调用方法
a.name();var b = [function(){}]
//调用方法
b[0]();// 如果不传参，不耽误函数运行
// 如果不传参，就相当于函数内的变量为undefined3、绑定事件
- onclick点击
- ondblclick双击
- onmouseenter鼠标放上去
- onmouseleave鼠标离开
// 鼠标点击页面，出现弹窗1
document.onclick = function(){alert(1);
}// 鼠标双击页面，出现弹窗2
document.ondblclick = function(){alert(2);
}// 鼠标放页面上，出现弹窗3
document.onmouseenter = function(){alert(3);
}// 鼠标离开页面上，出现弹窗4
document.onmouseleave = function(){alert(4);
}小总结，如何利用js实现点击一次屏幕，背景换个随机颜色，代码如下：
document.onclick = function(){var color = "";for(var i = 0; i < 6; i ++ ){var num = Math.round(Math.random() * 15);if(num == 10){num = 'a';} else if(num == 11) {num = 'b';} else if(num == 12) {num = 'c';} else if(num == 13) {num = 'd';} else if(num == 14) {num = 'e';} else if(num == 15) {num = 'f';}color = color + num;}document.body.style.background = "#" + color;
}简单介绍这节用到的常用的测试函数
console.log(x); // 控制台打印x
console.dir(x); //打印对象x的基本属性
alert(x); // 网页弹窗
