文档流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
文档流
文档流处在网页的最底层，它表示的是一个页面中的位置，
我们所创建的元素默认都处在文档流中
元素在文档流中的特点
块元素
1.块元素在文档流中会独占一行，块元素会自上向下排列。
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
内联元素
1.内联元素在文档流中只占自身的大小，会默认从左向右排列，
如果一行中不足以容纳所有的内联元素，则换到下一行，
继续自左向右。
2.在文档流中，内联元素的宽度和高度默认都被内容撑开
-->
<!--
当块元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，
而是会自动修改宽度，以适应内边距
-->
<div style="background-color: #bfa;">
<div style="height: 50px;"></div>
</div>
<div style="width: 100px; height: 100px; background-color: #ff0;"></div>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
</body>
</html>
浮动1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 600px;
height: 200px;
background-color: red;
/*
* 块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，
* 如果希望块元素在页面中水平排列，可以使块元素脱离文档流
* 使用float来使元素浮动，从而脱离文档流
* 可选值：
* none，默认值，元素默认在文档流中排列
* left，元素会立即脱离文档流，向页面的左侧浮动
* right，元素会立即脱离文档流，向页面的右侧浮动
*
* 当为一个元素设置浮动以后（float属性是一个非none的值），
* 元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
* 元素浮动以后，会尽量向页面的左上或这是右上漂浮，
* 直到遇到父元素的边框或者其他的浮动元素
* 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
* 浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
*/
float: left;
}
.box2{
width: 600px;
height: 200px;
background-color: yellow;
float: left;
}
.box3{
width: 200px;
height: 200px;
background-color: green;
float: right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
浮动2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
/*
* 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，
* 所以我们可以通过浮动来设置文字环绕图片的效果
*/
/*box1向左浮动*/
float: left;
}
.p1{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<p class="p1">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。
我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。
枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。
鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。
哇的一声，夜游的恶鸟飞过了。
</p>
</body>
</html>
浮动3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
/*
* 在文档流中，子元素的宽度默认占父元素的全部
*/
background-color: #bfa;
/*
* 当元素设置浮动以后，会完全脱离文档流.
* 宽度设置auto的块元素脱离文档流以后，宽度都被内容撑开
*/
/*float: left;*/
}
.s1{
/*
* 开启span的浮动
* 内联元素脱离文档流以后会变成块元素（这时就可以设置高度和宽度了）
*/
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">a</div>
<span class="s1">hello</span>
</body>
</html>
高度塌陷
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box1{
/*为box1设置一个边框*/
border: 10px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
/*
* 在文档流中，父元素的高度默认是被子元素撑开的，
* 也就是子元素多高，父元素就多高。
* 但是当为子元素设置浮动以后，子元素会完全脱离文档流，
* 此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
* 由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
*
* 所以在开发中一定要避免出现高度塌陷的问题,
* 我们可以将父元素的高度写死，以避免塌陷的问题出现，
* 但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。
*/
/*为子元素设置向左浮动*/
float: left;
}
.box3{
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
解决高度塌陷1（开启BFC）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box1{
border: 10px red solid;
/*
* 根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context
* 简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
* 当开启元素的BFC以后，元素将会具有如下的特性：
* 1.父元素的垂直外边距不会和子元素重叠
* 2.开启BFC的元素不会被浮动元素所覆盖
* 3.开启BFC的元素可以包含浮动的子元素
*
* 如何开启元素的BFC
* 1.设置元素浮动
* - 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
* 而且使用这种方式也会导致下边的元素上移，不能解决问题
* 2.设置元素绝对定位
* 3.设置元素为inline-block
* - 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
* 4.将元素的overflow设置为一个非visible的值
*
* 推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。
*/
/*overflow: hidden;*/
/*
*但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。
* 在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，
* 该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题
* 开启方式很多，我们直接使用一种副作用最小的：
* 直接将元素的zoom设置为1即可
*
*/
/*
* zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
* zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
* zoom这个样式，只在IE中支持，其他浏览器都不支持
*/
zoom:1;
overflow: hidden;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box3{
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: yellow;
/*
* 设置box1向左浮动
*/
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: yellowgreen;
/*
* 由于受到box1浮动的影响，box2整体向上移动了100px
* 我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能
* clear可以用来清除其他浮动元素对当前元素的影响
* 可选值：
* none，默认值，不清除浮动
* left，清除左侧浮动元素对当前元素的影响
* right，清除右侧浮动元素对当前元素的影响
* both，清除两侧浮动元素对当前元素的影响
* 清除对他影响最大的那个元素的浮动
*/
/*
* 清除box1浮动对box2产生的影响
* 清除浮动以后，元素会回到其他元素浮动之前的位置
*/
/*clear: left;*/
float: right;
}
.box3{
width: 300px;
height: 300px;
background-color: skyblue;
clear: both;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
解决高度塌陷2（在高度塌陷的父元素的最后，添加一个空白的div）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/*
* 解决高度塌陷方案二：
* 可以直接在高度塌陷的父元素的最后，添加一个空白的div，
* 由于这个div并没有浮动，所以他是可以撑开父元素的高度的，
* 然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，
* 基本没有副作用
*
* 使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
*/
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="clear"></div>
</div>
</body>
</html>
解决高度塌陷问题3（通过after伪类，选中box1的后边）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/*通过after伪类，选中box1的后边*/
/*
* 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
* 这样做和添加一个div的原理一样，可以达到一个相同的效果，
* 而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
*/
.clearfix:after{
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}
/*
* 在IE6中不支持after伪类,
* 所以在IE6中还需要使用hasLayout来处理
*/
.clearfix{
zoom:1;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
* 定位：
* - 定位指的就是将指定的元素摆放到页面的任意位置
* 通过定位可以任意的摆放元素
* - 通过position属性来设置元素的定位
* -可选值：
* static：默认值，元素没有开启定位
* relative：开启元素的相对定位
* absolute：开启元素的绝对定位
* fixed：开启元素的固定定位（也是绝对定位的一种）
*/
/*
* 当元素的position属性设置为relative时，则开启了元素的相对定位
* 1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
* 2.相对定位是相对于元素在文档流中原来的位置进行定位
* 3.相对定位的元素不会脱离文档流
* 4.相对定位会使元素提升一个层级
* 5.相对定位不会改变元素的性质，块还是块，内联还是内联
*/
position: relative;
/*
* 当开启了元素的定位（position属性值是一个非static的值）时，
* 可以通过left right top bottom四个属性来设置元素的偏移量
* left：元素相对于其定位位置的左侧偏移量
* right：元素相对于其定位位置的右侧偏移量
* top：元素相对于其定位位置的上边的偏移量
* bottom：元素相对于其定位位置下边的偏移量
*
* 通常偏移量只需要使用两个就可以对一个元素进行定位，
* 一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
*/
/*left: 100px;
top: 200px;*/
left: 200px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
.s1{
position: relative;
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span class="s1">我是一个span</span>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
* 当position属性值设置为absolute时，则开启了元素的绝对定位
*
* 绝对定位：
* 1.开启绝对定位，会使元素脱离文档流
* 2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
* 3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）
* 如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
* 4.绝对定位会使元素提升一个层级
* 5.绝对定位会改变元素的性质，
* 内联元素变成块元素，
* 块元素的宽度和高度默认都被内容撑开
*/
position: absolute;
/*left: 100px;
top: 100px;*/
}
.box3{
width: 300px;
height: 300px;
background-color: yellowgreen;
}
.box4{
width: 300px;
height: 300px;
background-color: orange;
/*开启box4的相对定位*/
/*position: relative;*/
}
.s1{
width: 100px;
height: 100px;
background-color: yellow;
/*开启绝对定位*/
position: absolute;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box5">
<div class="box4">
<div class="box2"></div>
</div>
</div>
<div class="box3"></div>
<span class="s1">我是一个span</span>
</body>
</html>
固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
* 当元素的position属性设置fixed时，则开启了元素的固定定位
* 固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
* 不同的是：
* 固定定位永远都会相对于浏览器窗口进行定位
* 固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
*
* IE6不支持固定定位
*/
position: fixed;
left: 0px;
top: 0px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body style="height: 5000px;">
<div class="box1"></div>
<div class="box4" style="width: 300px; height: 300px; background-color: orange; position: relative;">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
层级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 2;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*开启绝对定位*/
position: absolute;
/*设置偏移量*/
top: 100px;
left: 100px;
/*
* 如果定位元素的层级是一样，则下边的元素会盖住上边的
* 通过z-index属性可以用来设置元素的层级
* 可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
* 层级越高，越优先显示
*
* 对于没有开启定位的元素不能使用z-index
*/
z-index: 25;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
/*position: relative;
z-index: 3;*/
position: absolute;
top: 200px;
left: 200px;
z-index: 30;
/*
* 设置元素的透明背景
* opacity可以用来设置元素背景的透明，
* 它需要一个0-1之间的值
* 0 表示完全透明
* 1 表示完全不透明
* 0.5 表示半透明
*/
opacity: 0.5;
/*
* opacity属性在IE8及以下的浏览器中不支持
* IE8及以下的浏览器需要使用如下属性代替
* alpha(opacity=透明度)
* 透明度，需要一个0-100之间的值
* 0 表示完全透明
* 100 表示完全不透明
* 50 半透明
*
* 这种方式支持IE6，但是这种效果在IE Tester中无法测试
*/
filter: alpha(opacity=50);
}
.box4{
width: 200px;
height: 200px;
background-color: orange;
/*开启相对定位*/
position: relative;
/*
* 父元素的层级再高，也不会盖住子元素
*/
z-index: 20;
top: 500px;
}
.box5{
width: 100px;
height: 100px;
background-color: skyblue;
/*开启绝对定位*/
position: absolute;
z-index: 10;
}
</style>
</head>
<body style="height: 5000px;">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="box5"></div>
</div>
</body>
</html>
背景1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 1024px;
height: 724px;
margin: 0 auto;
/*设置背景样式*/
background-color: #bfa;
/*
* 使用background-image来设置背景图片
* - 语法：background-image:url(相对路径);
*
* - 如果背景图片大于元素，默认会显示图片的左上角
* - 如果背景图片和元素一样大，则会将背景图片全部显示
* - 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
*
* 可以同时为一个元素指定背景颜色和背景图片，
* 这样背景颜色将会作为背景图片的底色
* 一般情况下设置背景图片时都会同时指定一个背景颜色
*/
background-image:url(img/1.png);
/*
* background-repeat用于设置背景图片的重复方式
* 可选值：
* repeat，默认值，背景图片会双方向重复（平铺）
* no-repeat ，背景图片不会重复，有多大就显示多大
* repeat-x， 背景图片沿水平方向重复
* repeat-y，背景图片沿垂直方向重复
*/
background-repeat: repeat-y;
}
</style>
<!--<link rel="stylesheet" type="text/css" href="css/style.css"/>-->
</head>
<body>
<div class="box1"></div>
</body>
</html>
背景2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
height: 500px;
margin: 0 auto;
/*
* 设置一个背景颜色
*/
background-color: #bfa;
/*
* 设置一个背景图片
*/
background-image: url(img/4.png);
/*
* 设置一个图片不重复
*/
background-repeat: no-repeat;
/*
* 背景图片默认是贴着元素的左上角显示
* 通过background-position可以调整背景图片在元素中的位置
* 可选值：
* 该属性可以使用 top right left bottom center中的两个值
* 来指定一个背景图片的位置
* top left 左上
* bottom right 右下
* 如果只给出一个值，则第二个值默认是center
*
* 也可以直接指定两个偏移量，
* 第一个值是水平偏移量
* - 如果指定的是一个正值，则图片会向右移动指定的像素
* - 如果指定的是一个负值，则图片会向左移动指定的像素
* 第二个是垂直偏移量
* - 如果指定的是一个正值，则图片会向下移动指定的像素
* - 如果指定的是一个负值，则图片会向上移动指定的像素
*
*/
/*background-position: -80px -40px;*/
background-attachment: fixed;
}
body{
background-image: url(img/3.png);
background-repeat: no-repeat;
/*
* background-attachment用来设置背景图片是否随页面一起滚动
* 可选值：
* scroll，默认值，背景图片随着窗口滚动
* fixed，背景图片会固定在某一位置，不随页面滚动
*
* 不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
*/
background-attachment:fixed ;
}
</style>
</head>
<body style="height: 5000px;">
<div class="box1"></div>
</body>
</html>
背景3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
background-image: url(img/2.jpg);
background-repeat: no-repeat;
background-position: center;
/*
* 当背景图片的background-attachment设置为fixed时，
* 背景图片的定位永远相对于浏览器的窗口
*/
background-attachment: fixed;
}
</style>
</head>
<body style="height: 5000px;">
<p>
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
</p>
<p>
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
</p>
</body>
</html>
雪碧图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 129px;
height: 45px;
background-image:url(img/amazon-sprite_.png) ;
}
.box2{
width: 42px;
height: 30px;
background-image:url(img/amazon-sprite_.png) ;
/*
* 设置偏移量
*/
background-position: -58px -338px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
背景4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height: 5000px;
/*设置一个背景颜色*/
/*background-color: #bfa;*/
/*设置一个背景图片*/
/*background-image: url(img/3.png);*/
/*设置背景不重复*/
/*background-repeat: no-repeat;*/
/*设置背景图片的位置*/
/*background-position: center center;*/
/*设置背景图片不随滚动条滚动*/
/*background-attachment: fixed;*/
background-color: #bfa;
/*
* background
* - 通过该属性可以同时设置所有背景相关的样式
* - 没有顺序的要求，谁在前睡在后都行
* 也没有数量的要求，不写的样式就使用默认值
*/
background: #bfa url(img/3.png) center center no-repeat fixed;
}
</style>
</head>
<body>
</body>
</html>
表格1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--
表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，
表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单
在网页中也可以来创建出不同的表格。
-->
<!--
在HTML中，使用table标签来创建一个表格
-->
<table border="1" width="40%" align="center">
<!--
在table标签中使用tr来表示表格中的一行，有几行就有几个tr
-->
<tr>
<!-- 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td -->
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<!--
rowspan用来设置纵向的合并单元格
-->
<td rowspan="2">B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<!--
colspan横向的合并单元格
-->
<td colspan="2">D3</td>
</tr>
</table>
</body>
</html>
表格2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 设置表格的宽度
*/
table{
width: 300px;
/*居中*/
margin: 0 auto;
/*边框*/
/*border:1px solid black;*/
/*
* table和td边框之间默认有一个距离
* 通过border-spacing属性可以设置这个距离
*/
/*border-spacing:0px ;*/
/*
* border-collapse可以用来设置表格的边框合并
* 如果设置了边框合并，则border-spacing自动失效
*/
border-collapse: collapse;
/*设置背景样式*/
/*background-color: #bfa;*/
}
/*
* 设置边框
*/
td , th{
border: 1px solid black;
}
/*
* 设置隔行变色
*/
tr:nth-child(even){
background-color: #bfa;
}
/*
* 鼠标移入到tr以后，改变颜色
*/
tr:hover{
background-color: #ff0;
}
</style>
</head>
<body>
<!--
table是一个块元素
-->
<table>
<tr>
<!--
可以使用th标签来表示表头中的内容，
它的用法和td一样，不同的是它会有一些默认效果
-->
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>住址</th>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
</table>
</body>
</html>
长表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<!--
有一些情况下表格是非常的长的，
这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：
thead 表头
tbody 表格主体
tfoot 表格底部
这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，
都需要直接写到table中，tr需要写在这些标签当中
thead中的内容，永远会显示在表格的头部
tfoot中的内容，永远都会显示表格的底部
tbody中的内容，永远都会显示表格的中间
如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr
-->
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>100</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
</tbody>
</table>
</body>
</html>
表格的布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
表格的列数由td最多的那行决定
表格是可以嵌套，可以在td中在放置一个表格
-->
<table border="1" width="100%">
<tr height="100px">
<td colspan="2"></td>
</tr>
<tr height="400px">
<td width="20%"></td>
<td width="80%">
<table border="1" width="100%" height="100%">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
<tr height="100px">
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
完善clearfix（table标签可以隔离父子元素的外边距，阻止外边距的重叠）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 300px;
height: 300px;
background-color: #bfa;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
* 子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素
* 使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠
*/
margin-top: 100px;
}
.box3{
border: 10px red solid;
}
.box4{
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
}
/**
* 解决父子元素的外边距重叠
*/
/*.box1:before{
content: "";*/
/*
* display:table可以将一个元素设置为表格显示
*/
/* display: table;
}
*/
/**
* 解决父元素高度塌陷
*/
/*.clearfix:after{
content: "";
display: block;
clear: both;
}*/
/*
* 经过修改后的clearfix是一个多功能的
* 既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
*/
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
</style>
</head>
<body>
<div class="box3 clearfix">
<div class="box4"></div>
</div>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
表单的作用就是用来将用户信息提交给服务器的
比如：百度的搜索框 注册 登录这些操作都需要填写表单
-->
<!--
使用form标签创建一个表单
form标签中必须指定一个action属性，该属性指向的是一个服务器的地址
当我们提交表单时将会提交到action属性对应的地址
-->
<form action="target.html">
<!--
使用form创建的仅仅是一个空白的表单，
我们还需要向form中添加不同的表单项
-->
<!--
在表单中可以使用fieldset来为表单项进行分组，
可以将表单项中的同一组放到一个fieldset中
-->
<fieldset>
<!-- 在fieldset可以使用legend子标签，来指定组名 -->
<legend>用户信息</legend>
<!--
使用input来创建一个文本框，它的type属性是text
如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性
name表示提交内容的名字
用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
url地址?查询字符串
格式：
属性名=属性值&属性名=属性值&属性名=属性值&属性名=属性值
在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示
-->
<!--
在html中还为我们提供了一个标签，专门用来选中表单中的提示文字的
label标签
该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值
-->
<label for="um">用户名</label>
<input id="um" type="text" name="username" /> <br /><br />
<!--
密码框
- 使用input创建一个密码框，它的type属性值是password
-->
<label for="pwd">密码 </label>
<input id="pwd" type="password" name="password" /> <br /><br />
</fieldset>
<fieldset >
<legend>用户爱好</legend>
<!--
单选按钮
- 使用input来创建一个单选按钮，它的type属性使用radio
- 单选按钮通过name属性进行分组，name属性相同是一组按钮
- 像这种需要用户选择但是不需要用户直接填写内容的表单项，
还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
如果希望在单选按钮或者是多选框中指定默认选中的选项，
则可以在希望选中的项中添加checked="checked"属性
-->
性别 <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
<input type="radio" name="gender" value="female" checked="checked" id="female" /><label for="female">女</label>
<br /><br />
<!--
多选框
- 使用input创建一个多选框，它的type属性使用checkbox
-->
爱好 <input type="checkbox" name="hobby" value="zq" />足球
<input type="checkbox" name="hobby" value="lq" />篮球
<input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球
<br /><br />
</fieldset>
<!--
下拉列表
- 使用select来创建一个下拉列表
下拉列表的name属性需要指定给select，而value属性需要指定给option
可以通过在option中添加selected="selected"来将选项设置为默认选中
当为select添加一个multiple="multiple"，则下拉列表变为一个多选的下拉列表
-->
你喜欢的明星
<select name="star">
<!--
在select中可以使用optgroup对选项进行分组
同一个optgroup中的选项是一组
可以通过label属性来指定分组的名字
-->
<optgroup label="女明星">
<!-- 在下拉列表中使用option标签来创建一个一个列表项 -->
<option value="fbb">范冰冰</option>
<option value="lxr">林心如</option>
<option value="zw">赵薇</option>
</optgroup>
<optgroup label="男明星">
<option value="zbs" selected="selected">赵本山</option>
<option value="ldh">刘德华</option>
<option value="pcj">潘长江</option>
</optgroup>
</select>
<br /><br />
<!--
使用textarea创建一个文本域
-->
自我介绍 <textarea name="info"></textarea>
<br /><br />
<!--
提交按钮可以将表单中的信息提交给服务器
使用input创建一个提交按钮,它的type属性值是submit
在提交按钮中可以通过value属性来指定按钮上的文字
-->
<input type="submit" value="注册" />
<!--
<input type="reset" />可以创建一个重置按钮，
点击重置按钮以后表单中内容将会恢复为默认值
-->
<input type="reset" />
<!--
使用input type=button可以用来创建一个单纯的按钮，
这个按钮没有任何功能，只能被点击
-->
<input type="button" value="按钮" />
<!--
除了使用input，也可以使用button标签来创建按钮
这种方式和使用input类似，只不过由于它是成对出现的标签
使用起来更加的灵活
-->
<br /><br />
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
</body>
</html>
框架集
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面，
框架集可以同时引入多个页面，而内联框架只能引入一个，
在h5标准中，推荐使用框架集，而不使用内联框架
使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中
所以要使用框架集，页面中就不可以使用body标签
属性：
rows，指定框架集中的所有的框架，一行一行的排列
cols， 指定框架集中的所有的页面，一列一列的排列
这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小
frameset中也可以再嵌套frameset
frameset和iframe一样，它里边的内容都不会被搜索引擎所检索，
所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的
使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面，而我们每单独加载一个页面
浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差
如果非得用建议使用frameset而不使用iframe
-->
<frameset cols="30% , * , 30%">
<!-- 在frameset中使用frame子标签来指定要引入的页面
引入几个页面就写几个frame
-->
<frame src="01.表格.html" />
<frame src="02.表格.html" />
<!-- 嵌套一个frameset -->
<frameset rows="30%,50%,*">
<frame src="04.表格的布局.html" />
<frame src="05.完善clearfix.html" />
<frame src="06.表单.html" />
</frameset>
</frameset>
</html>
图片（IE6下解决对png24格式的显示问题）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-image: url(img/3.png);
background-repeat: no-repeat;
}
.box2{
width: 200px;
height: 200px;
background-image: url(img/4.png);
background-repeat: no-repeat;
}
</style>
</head>
<body style="background-color: #bfa;">
<!--
在IE6中对图片格式png24支持度不高，
如果使用的图片格式是png24，则会导致透明效果无法正常显示
解决方法：
1.可以使用png8来代替png24，即可解决问题，
但是使用png8代替png24以后，图片的清晰图会有所下降
2.使用JavaScript来解决该问题，需要向页面中引入一个外部的JavaScript文件
然后在写一下简单的JS代码，来处理该问题
-->
<div class="box1"></div>
<div class="box2"></div>
<img src="img/3.png"/>
<!-- 在body标签的最后引入外部的JS文件 -->
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<!--再创建一个新的script标签，并且编写一些js代码 -->
<script type="text/javascript">
DD_belatedPNG.fix("*");
</script>
</body>
</html>
条件Hack
<!--
有一些情况，有一些特殊的代码我们只需要在某些特殊的浏览器中执行
而在其他的浏览器中不需要执行，这时就可以使用CSS Hack来解决问题
CSS Hack实际上指的是一个特殊的代码，这段代码只在某些浏览器中可以识别
而其他浏览器不能识别，通过这种方式，来为一些浏览器设置特殊的代码
-->
<!--
条件Hack，条件hack只对IE浏览器有效，其他的浏览器都会将它识别为注释
IE10及以上的浏览器已不支持这种方式
-->
<!-- 一下内容只会出现在IE6中 -->
<!-- [if IE 6] >
<p>为了您和家人的健康，请远离IE6</p>
<![endif]-->
<!-- [if lte IE 9] >
<p>只会在ie9以下的版本才会看到这句话</p>
<![endif]-->
我们可以在上一节中关于IE6图片处理中，添加hack
具体的hack学习请查看官方文档
属性Hack
这里省略，自己查看官方文档学习，谢谢！