Html5的学习 （第三周）

html用到的是外部样式、外部脚本的导入以及一些常用标签——div、ul、li和a标签。

css用到的是弹性布局display：flex；
弹性布局下的子节点均匀分布justify-content：space-between；平均分配
以及常用的消除列表标记list-style：none；
例如：

前面的小点就没了

消除文本下划线：text-decoration：none；
比如标签的下划线


保持盒子原本大小防止padding的撑大box-sizing：boder-box；

动画效果transition； 例如

transition: all 0.5s; /* 动画效果 有0.5s的动画时长*/

字符间隔letter-spacing等。
如果需要对所有元素操作 可以在css中

*{
		padding: 0;/* 所有元素的 填充为零*/
		margin: 0;/*margin是两个元素的间距  设置0就是紧挨着 */
}

也可以对指定元素进行修改 例如指定所有的ul 指定body

html,body,ul{ 
padding: 0;
margin: 0;
list-style-type: none;/*列表前的的格式设置没有 例如li前面的小点 或者 数字*/
}

JavaScript用到的是元素选择器document.querySelector();获取页面的水平滚动条位置
通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
document.getElementById(“head”); 通过元素的id名来获取
document.getElementsByClassName()通过元素的class名来获取（有多个的话获取第一个）
document.getElementsByTagName(name) 通过标签名来查找元素
还有很多的获取方法
获取到变量可以对其进行修改 修改style 删除元素等等操作

document.documentElement.scrollLeft；获取页面的垂直滚动条位置document.documentElement.scrollTop以及元素className属性设置HTMLElementObject.className=classname。

在使用js的时候需要注意 导入外部js的时候应该在body中进行导入 因为html也是按着代码顺序来执行的。如果在head中定义的话，js中的变量会获取不到。所以我们要么在body中定义，要么使用变量时在window.onload 中获取例如：

window.onload = function(){
myhead = document.getElementById("head");
}

在js中的变量 用 var定义 可以根据变量的值来转换类型
函数用function来定义

window.onscroll = function(){

//获取用户水平滚动条进度
var x = document.documentElement.scrollLeft;
//获取用户垂直滚动条进度
var y = document.documentElement.scrollTop;
if (y>10) {
	if (myhead.className == "big_bg") {
	myhead.className = "small_bg";
}
}

}

当滑动鼠标滚轴时就会把头部的背景更换
类似英雄联盟首页的效果（可能不是完全一样）

当我滚动鼠标后就变了