HTML学习笔记（4）
目录
一、背景相关样式
二、定位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); // 网页弹窗