前端基础总结（二）

Love The Way You Lie 2021-12-14 22:27 300阅读 0赞

[点击][Link 1]

[前端总结（一）][Link 2]

[前端总结（二）][Link 3]

[前端总结(三）][Link 4]

**目录**

45.display和visibility

46.overflow

47.文档流

48.浮动

49.简单布局

50.高度塌陷问题

51.解决高度塌陷问题

52.导航条

53.清除浮动

54.练习-开班信息

55.相对定位

56.绝对定位

57.固定定位

58.层级

59.背景1

60.导航条

61.背景2

62.背景3

63.练习

64.雪碧图

65.背景4

--------------------

### 45.display和visibility ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			
    			a{
    				background-color: #bfa;
    				
    				/*
    				 * 将一个内联元素变成块元素，
    				 * 	通过display样式可以修改元素的类型
    				 * 		可选值：
    				 * 			inline：可以将一个元素作为内联元素显示
    				 * 			block: 可以将一个元素设置块元素显示
    				 * 			inline-block：将一个元素转换为行内块元素
    				 * 					- 可以使一个元素既有行内元素的特点又有块元素的特点
    				 * 						既可以设置宽高，又不会独占一行
    				 * 			none: 不显示元素，并且元素不会在页面中继续占有位置
    				 */
    				display: none;
    				
    				/*为其设置一个宽和高*/
    				width: 500px;
    				height: 500px;
    			}
    			
    			.box{
    				width: 100px;
    				height: 100px;
    				background-color: orange;
    				
    				/*
    				 * display: none;
    				 * 	使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置
    				 */
    				/*display: none;*/
    				
    				/*
    				 * visibility
    				 * 	- 可以用来设置元素的隐藏和显示的状态
    				 * 	- 可选值：
    				 * 		visible 默认值，元素默认会在页面显示
    				 * 		hidden 元素会隐藏不显示	
    				 * 
    				 * 使用 visibility:hidden;隐藏的元素虽然不会在页面中显示，
    				 * 		但是它的位置会依然保持
    				 */
    				visibility:hidden ;
    			}
    			
    		</style>
    	</head>
    	<body>
    		
    		<div class="box"></div>
    		
    		<a href="#">我是一个大大的超链接</a>
    		
    		<span>hello</span>
    		
    	</body>
    </html>

### 46.overflow ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			
    			.box1{
    				width: 200px;
    				height: 200px;
    				background-color: #bfa;
    				/*
    				 * 子元素默认是存在于父元素的内容区中，
    				 * 		理论上讲子元素的最大可以等于父元素内容区大小
    				 * 	如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，
    				 * 		超出父元素的内容，我们称为溢出的内容
    				 *  父元素默认是将溢出内容，在父元素外边显示，
    				 * 	通过overflow可以设置父元素如何处理溢出内容：
    				 * 		可选值：
    				 * 			- visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
    				 * 			- hidden, 溢出的内容，会被修剪，不会显示
    				 * 			- scroll, 会为父元素添加滚动条，通过拖动滚动条来查看完整内容
    				 * 					- 该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
    				 * 			- auto，会根据需求自动添加滚动条，
    				 * 						需要水平就添加水平
    				 * 						需要垂直就添加垂直
    				 * 						都不需要就都不加
    				 */
    				overflow: auto;
    			}
    			
    			.box2{
    				width: 100px;
    				height: 500px;
    				background-color: red;
    			}
    			
    		</style>
    	</head>
    	<body>
    		
    		<div class="box1">
    			在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
    这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。
    
    
    		</div>
    		
    	</body>
    </html>

### 47.文档流 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		
    		
    		
    		<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>

### 48.浮动 ###

<!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>

<!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>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			
    			.box1{
    				/*
    				 * 在文档流中，子元素的宽度默认占父元素的全部
    				 */
    				background-color: #bfa;
    				
    				/*
    				 * 当元素设置浮动以后，会完全脱离文档流.
    				 * 	块元素脱离文档流以后，高度和宽度都被内容撑开
    				 */
    				/*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>

### 49.简单布局 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			
    			/*清除默认样式*/
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			
    			/*设置头部div*/
    			.header{
    				/*设置一个宽度*/
    				width: 1000px;
    				/*设置一个高度*/
    				height: 120px;
    				/*设置一个背景颜色*/
    				background-color: yellowgreen;
    				/*设置居中*/
    				margin: 0 auto;
    			}
    			
    			/*设置一个content*/
    			.content{
    				/*设置一个宽度*/
    				width: 1000px;
    				/*设置一个高度*/
    				height: 400px;
    				/*设置一个背景颜色*/
    				background-color: orange;
    				/*居中*/
    				margin: 10px auto;
    			}
    			
    			/*设置content中小div的样式*/
    			.left{
    				width: 200px;
    				height: 100%;
    				background-color: skyblue;
    				/*向左浮动*/
    				float: left;
    			}
    			
    			.center{
    				width: 580px;
    				height: 100%;
    				background-color: yellow;
    				/*向左浮动*/
    				float: left;
    				/*设置水平外边距*/
    				margin: 0 10px;
    			}
    			
    			.right{
    				width: 200px;
    				height: 100%;
    				background-color: pink;
    				/*向左浮动*/
    				float: left;
    			}
    			
    			
    			
    			/*设置一个footer*/
    			.footer{
    				/*设置一个宽度*/
    				width: 1000px;
    				/*设置一个高度*/
    				height: 120px;
    				/*设置一个背景颜色*/
    				background-color: silver;
    				/*居中*/
    				margin: 0 auto;
    			}
    			
    		</style>
    	</head>
    	<body>
    		
    		<div class="header"></div>
    		
    		
    		<div class="content">
    			
    			
    			<div class="left"></div>
    			
    			<div class="center"></div>
    			
    			<div class="right"></div>
    			
    		</div>
    		
    		
    		<div class="footer"></div>
    		
    	</body>
    </html>

### 50.高度塌陷问题 ###

<!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>

### 51.解决高度塌陷问题 ###

<!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{
    				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>

<!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">
    			<div class="box2"></div>
    		</div>
    	</body>
    </html>

### 52.导航条 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>导航条</title>
    		<style type="text/css">
    			
    			/*
    			 * 清除默认样式
    			 */
    			*{
    				margin:0;
    				padding:0;
    			}
    			
    			/*
    			 * 设置ul
    			 */
    			.nav{
    				/*去除项目符号*/
    				list-style: none;
    				/*为ul设置一个背景颜色*/
    				background-color: #6495ED;
    				/*设置一个宽度*/
    				/*
    				 * 在IE6中，如果为元素指定了一个宽度，则会默认开启hasLayout
    				 */
    				width: 1000px;
    				/*设置元素居中*/
    				margin: 50px auto;
    				/*解决高度塌陷*/
    				overflow: hidden;
    			}
    			
    			/**
    			 * 设置li
    			 */
    			.nav li{
    				/*设置li向左浮动*/
    				float: left;
    				width: 12.5%;
    			}
    			
    			.nav a{
    				/*将a转换为块元素*/
    				display: block;
    				/*为a指定一个宽度*/
    				width: 100%;
    				/*设置文字居中*/
    				text-align: center;
    				/*设置一个上下内边距*/
    				padding: 5px 0;
    				/*去除下划线*/
    				text-decoration: none;
    				/*设置字体颜色*/
    				color: white;
    				/*设置加粗*/
    				font-weight: bold;
    			}
    			
    			/*
    			 * 设置a的鼠标移入的效果
    			 */
    			.nav a:hover{
    				background-color: #c00;
    			}
    			
    			
    		</style>
    	</head>
    	<body>
    		
    		
    		<ul class="nav">
    			<li><a href="#">首页</a></li>
    			<li><a href="#">新闻</a></li>
    			<li><a href="#">联系</a></li>
    			<li><a href="#">关于</a></li>
    			<li><a href="#">首页</a></li>
    			<li><a href="#">新闻</a></li>
    			<li><a href="#">联系</a></li>
    			<li><a href="#">关于</a></li>
    		</ul>
    		
    	</body>
    </html>

### 53.清除浮动 ###

<!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>

### 54.练习-开班信息 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			/*清除默认样式*/
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			
    			/*统一页面中的字体*/
    			body{
    				font: 12px/1 宋体;
    			}
    			
    			/*设置outer的大小*/
    			.outer{
    				width: 300px;
    				/*height: 473px;*/
    				/*background-color: #bfa;*/
    				/*设置outer居中效果*/
    				margin: 50px auto;
    			}
    			
    			/*
    			 * 设置title的边框
    			 */
    			.title{
    				/*设置上边框*/
    				border-top:2px #019e8b solid ;
    				/*设置盒子的高度*/
    				height: 36px;
    				/*设置背景样式*/
    				background-color: #f5f5f5;
    				/*设置title的行高*/
    				line-height: 36px;
    				/*设置title的内边距*/
    				padding: 0px 22px 0px 16px;
    			}
    			
    			/*
    			 	设置title中的超链接
    			 * */
    			.title a{
    				float: right;
    				/*设置字体颜色*/
    				color: red;
    			}
    			
    			/*设置h3*/
    			.title h3{
    				font: 16px/36px "微软雅黑";
    			}
    			
    			/*设置内容*/
    			.content{
    				border: 1px solid #deddd9;
    				/*设置内边距*/
    				padding: 0px 28px 0px 20px;
    			}
    			
    			/*设置内容中的超链接*/
    			.content a{
    				color: black;
    				/*去除超链接的下划线*/
    				text-decoration: none;
    				/*设置字体大小*/
    				font-size: 12px;
    			}
    			
    			/*为超链接添加一个hover伪类*/
    			.content a:hover{
    				color: red;
    				/*为超链接添加下划线*/
    				text-decoration: underline;
    			}
    			
    			/*设置内容中的标题*/
    			.content h3{
    				margin-top: 14px;
    				margin-bottom: 16px;
    			}
    			
    			/*
    			 * 设置右侧的a的样式
    			 */
    			.content .right{
    				/*设置向右浮动*/
    				float: right;
    			}
    			
    			/*设置ul的样式*/
    			.content ul{
    				/*去除项目符号*/
    				list-style: none;
    				/*为ul设置一个下边框*/
    				border-bottom: 1px dashed #deddd9;
    			}
    			
    			/*取消最后一个ul的边框*/
    			.content .no-border{
    				border: none;
    			}
    			
    			/*设置内容中的红色字体*/
    			.content .red{
    				color: red;
    				font-weight: bold;
    			}
    			
    			/*设置内容中的li*/
    			.content li{
    				margin-bottom: 15px;
    			}
    			
    			
    		</style>
    	</head>
    	<body>
    		
    		
    		<div class="outer">
    			
    			
    			<div class="title">
    				<a href="#">16年面授开班计划</a>
    				<h3>近期开班</h3>
    			</div>
    			
    			
    			<div class="content">
    				<h3><a href="#">JavaEE+云计算-全程就业班</a></h3>
    				<ul>
    					<li>
    						<a class="right" href="#"><span class="red">预约报名</span></a>
    						<a href="#">开班时间：<span class="red">2016-04-27</span></a>
    					</li>
    					<li>
    						<a class="right" href="#"><span class="red">无座，名额爆满</span></a>
    						<a href="#">开班时间：<span class="red">2016-04-07</span></a>
    					</li>
    					<li>
    						<a class="right" href="#"><span>开班盛况</span></a>
    						<a href="#">开班时间：<span>2016-03-15</span></a>
    					</li>
    					<li>
    						<a class="right" href="#"><span>开班盛况</span></a>
    						<a href="#">开班时间：<span>2016-02-25</span></a>
    					</li>
    					<li>
    						<a class="right" href="#"><span>开班盛况</span></a>
    						<a href="#">开班时间：<span>2015-12-26</span></a>
    					</li>
    				</ul>
    				
    				<h3><a href="#">Android+人工智能-全程就业班</a></h3>
    				<ul>
    					<li>
    						<a class="right" href="#"><span class="red">预约报名</span></a>
    						<a href="#">开班时间：<span class="red">2016-04-10</span></a>
    					</li>
    					<li>
    						<a class="right" href="#"><span>开班盛况</span></a>
    						<a href="#">开班时间：<span>2016-03-17</span></a>
    					</li>
    					<li>
    						<a class="right" href="#"><span>开班盛况</span></a>
    						<a href="#">开班时间：<span>2016-02-20</span></a>
    					</li>
    					<li>
    						<a class="right" href="#"><span>开班盛况</span></a>
    						<a href="#">开班时间：<span>2015-12-23</span></a>
    					</li>
    				</ul>
    				<h3><a href="#">前端+HTML5-全程就业班</a></h3>
    				<ul class="no-border">
    					<li>
    						<a class="right" href="#"><span class="red">预约报名</span></a>
    						<a href="#">开班时间：<span class="red">2016-05-10</span></a>
    					</li>
    					<li>
    						<a class="right" href="#"><span>开班盛况</span></a>
    						<a href="#">开班时间：<span>2016-03-16</span></a>
    					</li>
    				</ul>
    			</div>
    			
    		</div>
    		
    	</body>
    </html>

### 55.相对定位 ###

<!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>

### 56.绝对定位 ###

<!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>

### 57.固定定位 ###

<!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>

### 58.层级 ###

<!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>

### 59.背景1 ###

### 60.导航条 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    		<style type="text/css">
    			.box1{
    				width: 990px;
    				height: 32px;
    				background-color: #bfa;
    				margin: 50px auto;
    				/*
    				 * 设置为背景图片
    				 */
    				background-image: url(img/bg.gif);
    				/*
    				 * 设置水平方向重复
    				 */
    				background-repeat: repeat-x;
    			}
    		</style>
    		
    	</head>
    	<body>
    		<div class="box1"></div>
    	</body>
    </html>

### 61.背景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>

### 62.背景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>
    		<p>
    			在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
    		</p>
    		<p>
    			在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
    		</p>
    		<p>
    			在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
    		</p>
    		<p>
    			在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
    		</p>
    		<p>
    			在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
    		</p>
    		<p>
    			在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
    		</p>
    		<p>
    			在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
    		</p>
    		<p>
    			在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
    		</p>
    		<p>
    			在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
    		</p>
    		<p>
    			在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
    		</p>
    		<p>
    			在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
    		</p>
    
    	</body>
    
    </html>

### 63.练习 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    		
    		/*
    		 * 做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，
    		 * 	这个闪烁会造成一次不佳的用户体验。
    		 * 产生问题的原因：
    		 * 	背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求，
    		 * 	但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源
    		 * 	我们这个练习，一上来浏览器只会加载link.png由于hover和active的状态没有马上触发，
    		 * 		所以hover.png和active.png并不是立即加载的
    		 * 	当hover被触发时，浏览器才去加载hover.png
    		 * 	当active被触发时，浏览器才去加载active.png
    		 * 	由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况
    		 * 
    		 * 	为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了，
    		 * 	然后在通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
    		 * 	优点：
    		 * 		1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，
    		 * 			提高访问效率，提高了用户体验。
    		 * 		2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
    		 * 
    		 * 
    		 */
    			
    			.btn:link{
    				/*将a转换为块元素*/
    				display: block;
    				/*设置宽高*/
    				width: 93px;
    				height: 29px;
    				/*设置背景图片*/
    				background-image: url(img/btn/btn2.png);
    				/*设置背景图片不重复*/
    				background-repeat: no-repeat;
    				
    			}
    			
    			.btn:hover{
    				
    				/*
    				 * 当是hover状态时，希望图片可以向左移动
    				 */
    				background-position: -93px 0px;
    			}
    			
    			.btn:active{
    				/*
    				 * 当是active状态时，希望图片再向左移动
    				 */
    				background-position: -186px 0px;
    				
    			}
    			
    		</style>
    	</head>
    	<body>
    		
    		
    		<a class="btn" href="#"></a>
    		
    	</body>
    </html>

### 64.雪碧图 ###

<!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>

### 65.背景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>

## ##

[Link 1]: https://www.bilibili.com/video/av21557880?from=search&seid=10548590873728321873
[Link 2]: https://blog.csdn.net/qq_43554997/article/details/94568994
[Link 3]: https://blog.csdn.net/qq_43554997/article/details/94591381
[Link 4]: https://blog.csdn.net/qq_43554997/article/details/95226611