一、防止页面变形
在改变浏览器大小时，可能会导致里面的元素变形（特别是用百分比设置的宽度）。
那么，我们如何解决这个问题？
可以在最外层的元素（例如div）中，设置一个固定像素的宽度，例如:
<body style="background: #dddddd; margin: 0px;">
<div style="background-color: #2b99ff;width:800px;height:2000px;margin: 0 auto;">
<div></div>
<div></div>
<div></div>
</div>
</body>
我们在<body>中的最外层div标签中设置宽度为800px。那么当浏览器页面不足800px的时候，浏览器会自动出现左右滚动条。
二、重用CSS样式
当多个元素的样式出现重复时，即有一些样式一样，有一些样式是独有的。我们可以这样处理。
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="xxx.css"/>
<style>
.c{
height: 100px; width:100px;
}
.c1{
background-color: red;
}
.c2{
background-color: blue;
}
</style>
</head>
<body style="background: #dddddd; margin: 0px;">
<div class="c c1"></div>
<div class="c c2"></div>
</body>
将不同元素中相同的样式提取出来形成一类单独的样式。然后在每个元素中同时使用多个样式，从而达到目的。
三、去除img的边框
在淘宝等网页中，商品的图片可以添加超链接，点击跳转到相应的页面。他是使用a标签和img标签实现的。
<body style="background: #dddddd; margin: 0px;">
<a href="www.baidu.com">
<img src="xiaohua.png" style="height: 550px;width: 400px;">
</a>
</body>
当使用IE打开时，图片边上会有一个蓝色的边框。如果去除这个边框？
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="xxx.css"/>
<style>
img{
border: 0px;
}
</style>
</head>
<body style="background: #dddddd; margin: 0px;">
<a href="www.baidu.com">
<img src="xiaohua.png" style="height: 550px;width: 400px;">
</a>
</body>
img默认有一个1px的border。通过将其设置为0px，去除这个边框。
四、CSS补充-position
我们遇到过几种情况：
1.网站页面右下角存在一个返回顶部的按钮，永远在那个位置，不管缩放页面还是滚动页面，按钮位置不变。
2.网站顶部有一个固定的菜单，不管怎么上下滚动，菜单位置不变。
处理方法：使用position: fixed，固定在浏览器窗口某个位置，并与其它元素分层，互不影响。
第一种情况：
<body>
<div onclick="GoTop()" style="width:50px;height: 50px;background-color: blue;color: white;position: fixed;bottom:20px;right:20px;">回到顶部</div>
<div style="height: 5000px;"></div>
<script>
function GoTop(){
document.body.scrollTop = 0;
}
</script>
</body>
使用position: fixed; bottom: 20px; right: 20px;将《回到顶部》这个按钮固定在浏览器页面的右下角。并使用JS实现回到顶部的效果（Chrome不生效，搜狗生效）。
第二种情况：
<body>
<div style="height: 50px; width:100%; background-color: blue;color:white;position: fixed;top:0px;">Top Menu...</div>
<div style="height: 5000px; width:800px; background-color: #9b9b9b;margin:0 auto;"></div>
</body>
同样使用position将其固定在顶部。这样上下滚动，该菜单也不会动。
position: absolute;
position:absolute是将某个元素固定在页面（画布，即当前浏览器的窗口）上的一个点，当我们滚动页面时，该元素是会跟对页面移动的。单独使用这个样式，是没有什么意义的。
position:absolute要和position:relative配合使用才有意义：
<body>
<div style="position: relative; background-color: #9b9b9b; border:1px solid red;height: 100px;width:100px;">
<div style="position: absolute; top:10px;left:10px; background-color:red; height: 10px;width:10px;"></div>
</div>
<div style="position: relative; background-color: #9b9b9b; border:1px solid red;height: 100px;width:100px;">
<div style="position: absolute; bottom:10px; right:10px; background-color:blue; height: 10px;width:10px;"></div>
</div>
</body>
position: relative;相当于将父亲div变为一个独立的画布，儿子div中的position:absolute;是以父亲div为参照的。但是儿子div所处位置不一定被包含在父亲div中，我们把position:absolute;bottom:-20px;left:100px;里面的相对位置设置为负数，或者值比较大，父亲div比较小的时候，儿子div就可以处于父亲div之外。实际上，父亲div只是充当了儿子div的一个参照物。
五、三层样式
有时候我们访问的网站会出现一个弹窗，当弹窗出现时，原本页面的元素我们就不能操作了。例如下图：
这种页面其实分为三层：
1.原本的页面
2.中间灰色的遮挡层
3.弹框
按如下代码实现：
<body>
<!-- 最上面层（弹窗）可操作层-->
<div style="z-index:10; position: fixed; top:50%; left:50%; margin-left:-250px;margin-top:-100px;background-color: white;height: 200px;width: 500px;">
<a href="http://www.baidu.com">
<img src="xiaohua.png" style="width: 500px;height: 200px;border: 0px;">
</a>
</div>
<!-- 中间遮挡层，半透明 -->
<div style="z-index:9; position:fixed;background-color: #7B7B7B;
top:0;
bottom:0;
left:0;
right:0;
opacity: 0.5;"></div>
<!-- 最下面层，本来页面层，被遮挡不能操作 -->
<div style="background-color: #2b99ff;height: 5000px;">
<img src="xiaohua.png">
</div>
</body>
效果如下，小图片为弹窗，可点击跳转到baidu：
代码中的z-index表示层次关系，z-index越大，越在上层。
使用JS来控制上面两层（弹窗和遮挡层）的display:none，即可实现弹窗效果。
六、元素大小约束
当内层元素的尺寸大于外层元素的时候，可能会将其撑大。例如：
<body>
<div style="height: 300px;width:200px;">
<img src="xiaohua.png">
</div>
</body>
div中的img尺寸大于200*300。此时如何约束图片：
<body>
<div style="height: 300px;width:200px;overflow: hidden">
<img src="xiaohua.png">
</div>
</body>
使用overflow:hidden，效果如下（只能显示局部）：
另一种方式overflow:auto
<body>
<div style="height: 300px;width:200px;overflow: auto">
<img src="xiaohua.png">
</div>
</body>
效果如下（由滚动条）：
七、鼠标悬停变色
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg_header{
position: fixed; /*固定不动*/
right:0;
left:0;
top:0;
height:48px;
line-height: 48px; /*使其中的元素居中*/
background-color: #2459a2;
}
.pg_body{
margin-top:50px; /*避免内容被pg_header挡住*/
}
.w{
width:980px;
margin: 0 auto;
}
.pg_header .menu{
display: inline-block; /*让其可以修改大小*/
padding: 0 10px;
}
.pg_header .menu:hover{ /*当鼠标悬停时，这个样式才生效*/
color: white;
background-color: #2b99ff;
}
</style>
</head>
<body>
<div class="pg_header">
<div class="w">
<a class="LOGO">LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">1024</a>
<a class="menu">段子</a>
</div>
</div>
<div class="pg_body">
<div class="w">hello</div>
</div>
</body>
、
八、background-image
background-image：
<div style="height: 100px;background-image: url('xiaohua.png')"></div>
此时，效果是这样的（重复的），即当图片的高或宽大于div的高或宽时，图片显示不完整。当图片高或宽小于div时，会重复填充。
这种效果如何应用：例如渐变色的背景图，实际上是一个很小的局部渐变图片重复填充形成的。
background-repeat: no-repeat
background-repeat: repeat-x
background-repeat: repeat-y
如果想让图片不填充，只横向填充，或纵向填充，可以使用这些样式。
有些网站使用的小图标，例如下图：
实际上他是一个背景图片：
这个背景图片是这样的：
要让其只显示其中一个小图标，可以使用以下样式：
background-position: 0 -40px;
background-position-x: 0;
background-position-y: -40px;
这样做的好处：多个小图片合并成一张图，客户端只需要请求一次。如果每个小图标都是单独是一张图，那么需要多次请求。
还有一种简写的方式：
background: url(img.png) -40px -40px no-repeat;
相当于：
background-image: url(img.png);
background-position: -40px -40px;
background-repeat: no-repeat;
九、JavaScript概述
除了名字和Java有点像，但是没有任何关系。
是一种解释性语言，浏览器具有JS解释器的功能。
JS终端：
在浏览器F12的Console里可以输入JS代码。和Python的终端差不多。
JS代码是放在HTML文件中的：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
alert("hello")
</script>
</head>
使用<script></script>包裹。type="text/javascript"用于执行其中的代码是JS代码，也可以不写，默认是JS。
如果多个HTML都需要使用同样的JS代码，则使用：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="xxx.js"></script>
</head>
JS代码注释：
使用"//"进行单行注释。
使用"/* */"进行多行注释。
十、放JS代码的位置（重要）
HTML页面是按从上到下的顺序解释的，我们在打开页面的时候为了提高用户体验，需要先显示页面元素，再来加载JS代码（若JS代码在远程服务器，例如google。那么我们将JS放在最前面，默认会先去请求JS文件，会造成页面元素在JS加载好之前不显示）。
所以，我们在编写JS代码后，需要将JS代码或JS文件的引入放在页面元素的最后：</body>的前面。
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello</div>
<div>world</div>
<script type="text/javascript">
alert("hello")
</script>
<script src="xxx.js"></script>
</body>
十一、JS中的基本语法
变量的定义：（很重要）
name = "alex"; // 全局变量
var name = "leo" //局部变量
数字：JS中的数字都默认是float的。
age = 18;
feet = "4";
feet_num = parseInt(feet) //将字符串转换为数字
字符串：
a = "Hello World,hello,hahah";
a.length; //字符串长度
a.trim(); //去掉前后的空白字符。
a.trimLeft(); //去掉最左边的空白字符。
a.trimRight(); //去掉最右边的空白字符。
a.charAt(0); //返回某个位置的字符。
a.concat("I'm","Leo"); //a还是Hello World,返回的值为Hello WorldI'mLeo。
a.indexOf("llo",0); //从index=0开始查找子串，返回这个子串的位置index。
a.lastIndexOf("llo"); //找最后一个符合的子串。
a.substring(1,5); //获取index从1-5的子串。
a.slice(1,5); //切片，和substring()一样，获得一个子串。
a.toLowerCase(); //变为小写。
a.toUpperCase(); //变为大写。
a.split(' '); //按某个字符分割字符串。获得一个数组。
定时器：
setInterval("alert(123);",5000); 每5000毫秒执行一次alert(123);
函数：
function func1(){
console.log(123); //在F12的console中打印消息123，百度在这里发布了招聘程序猿的信息。^*^
}
setInterval("func1();",5000);
跑马灯效果：
<body>
<div id="i1">欢迎奥巴马访问成都</div>
<script type="text/javascript">
function func1(){
var div_item = document.getElementById("i1");
var content = div_item.innerText;
var c0 = content.charAt(0);
var c1 = content.substring(1,content.length);
var new_content = c1 + c0;
div_item.innerText = new_content;
}
setInterval("func1();",500);
</script>
</body>
每0.5秒将第一个字放到最后，然后重新将值设置到标签中。实现跑马灯效果。
布尔类型：
真：true
假：false
和Python不一样的是，Python中布尔类型首字母为大写，例如True和False。
数组（列表）：
obj = [11,22,33,44,55];
obj2 = [1,2,3,4]
obj.length;
obj.push(100);
obj.pop();
obj.unshift(101);
obj.shift();
obj.splice(1,2,102,"ooo",103,104); //从index=1的位置删除2个元素，然后插入102和"ooo"。可以插入多个。
obj.slice(1,3); //获取index从1-3的子数组。
obj.reverse(); //反转数组。
obj.join("*") //使用一个字符链接起来构建一个字符串，11*22*33*44*55
obj.concat(obj2,obj2); //多数组组合起来，形成一个新的数组。
obj.sort() //对数组进行排序。
字典：
和Python比较像。
a = {"k1":"v","k2":"v2"};
for循环：
obj = [11,22,33,44,55];
for(var i in obj){
console.log(obj[i]);
}
for(var i = 0;i<obj.length;i++){
console.log(obj[i]);
}
dict = {'k1':'v1','k2':'v2'};
for(var key in dict){
console.log(dict[key]);
}
条件语句：
1 == '1'： true，==表示值相等。
1 === '1'：false，===表示值和类型都相等。
JS中不能使用Python中的and和or，和C++一样，使用&&和||。
if(1 === 1){
//do
}else if(1 == 1){
//do
}else{
//do
}
十二、DOM
JS要让HTML的标签动起来，需要做两个步骤的事情：
1.找到这个标签。
2.让他动起来：删除标签（隐藏标签等）、修改属性、修改内容等。
获取标签：
通过document直接找标签：
document.getElementById('a1'); //获取对应id的标签，id不能重复，只能获取一个
document.getElementsByName("hello"); //根据标签name属性获取一个标签列表
document.getElementsByTagName("div"); //根据标签种类获取一个标签列表
document.getElementsByClassName("c1"); //根据类名获取一个标签列表
间接找标签：（当前标签的父亲、儿子、兄弟等）
tag = document.getElementById('i1'); //先直接找到一个标签
tag.parentElement; //通过已经找到标签，找他的父亲标签
tag.children; //获取她的儿子标签（列表）
tag.firstElementChild; //找她的第一个儿子标签
tag.lastElementChild; //找她的最后一个儿子标签
tag.previousElementSibling; //找他前面那个兄弟标签
tag.nextElementSibling; //找他后面那个兄弟标签
修改标签内容：
innerText：标签内部文本，例如<div>inner text</div>
tag = document.getElementById('i1');
tag.innerText = "Good"; //修改标签的innerText值。
className：标签class的值，例如<div class="className"></div>。
classList：标签class可以设置多个，可以使用classList获取class列表。可以通过列表操作来添加删除class。
tag.className;
tag.classList.add("c2");
tag.classList.remove("c2");
