CSS 学习

最新推荐文章于 2024-09-14 17:04:32 发布

程序员文弟

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量361

点赞数

分类专栏： WEB篇文章标签： css

本文链接：https://blog.csdn.net/qq_35388185/article/details/107590589

版权

WEB篇专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS 学习

1 css 的声明
2 css的选择器选择
3 css 的样式使用
4 照片墙案例
5 css的盒子模型
6 盒子模型简单布局
7 css的定位
8 百度首页
9 百度首页模拟
10 轮播
11 俄罗方块

1 css 的声明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css的声明学习</title>
		<!--
			CSS声明学习:
				 1、在head标签中使用style标签声明：
				 		作用：此声明一般声明当前网页的公共样式或者给某个标签的单独样式
				 2、在标签上使用style属性进行声明：
				 		作用：此声明会将css样式直接作用于当前标签。
				 3、在head标签中使用link标签引入外部声明好的css文件
						作用：此声明相当于调用,解决了不同网页间样式重复使用的问题
							一次声明，随处使用
			问题：
				不同的声明给同一个标签操作了同一个样式，会使用谁的？
				如果Css的声明全部在head标签中，则遵循就近原则，谁离标签近，谁就会被显示。
		-->
		<!--引入外部声明好的css文件-->
		<link rel="stylesheet" type="text/css" href="css/my.css"/>
		<!--声明css代码域-->
		<style type="text/css">
			hr{
				width: 50%;
				height: 20px;
				color: red;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<h3>css的声明学习</h3>
		<hr style="background-color: blue;height:50px;"/>
		<hr/>
	</body>
</html>

2 css的选择器选择

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css的选择器学习</title>
		<!--
			css的选择器学习：
				标签选择器：
					标签名{样式名1：样式值1;……}
					作用：会将当前网页内的所有该标签增加相同的样式
				id选择器:
					#标签的id属性值{样式名1：样式值1;……}
					作用：给某个指定的标签添加指定的样式
				类选择器：
					.类选择器名{样式名1：样式值1;……}
					作用：给不同的标签添加相同的样式
				全部选择选择器
					*{样式名1：样式值1;……}
					作用：选择所有的HTML标签，并添加相同的样式
-----------------------------------------------------------------------------
				组合选择器：
					选择器1,选择器2,……{样式名1：样式值1;……}
					作用：解决不同的选择器之间重复样式的问题
				子标签选择器
					选择器1 子标签选择器{样式名1：样式值1;……}
				属性选择器：
					标签名[属性名=属性值]{样式名1：样式值1;……}
					作用：选择某标签指定具备某属性并且属性值为某属性值的标签
			css的使用过程：
				1、声明css代码域
				2、使用选择器选择要添加样式的标签
					根据需求来。
						使用*选择器来给整个页面添加基础样式
						使用类选择器给不同的标签添加基础样式
						使用标签选择器给某类标签添加基础样式
						使用id、属性选择器、style属性声明方式给某个标签添加个性化样式。
				3、书写样式单
					边框设置
						border:solid 1px;
					字体设置:
						font-size:10px;设置字体大小
						font-family:"黑体";(设置字体的格式)
						font-weight：bold;设置字体加粗
					字体颜色设置
						color:颜色;
					背景颜色设置
						background-color:颜色;
					背景图片设置
						background-img:url(图片的相对路径);
						background-repeate:no-repeate;设置图片不重复
						bacground-size:cover;图片平铺整个页面
					高和宽设置
					浮动设置
						float:left|right
					行高设置
						line-height:10;
		-->
		<!--声明css代码域-->
		<style type="text/css">
			/*标签选择器*/
			table{
				width: 300px;
				height: 200px;
				border: solid 1px;
				background-color: red;
			}
			b{
				width: 300px;
				height: 200px;
				border: solid 1px;
				background-color: red;
			}
			/*id选择器*/
			#t1{
				background-color: gray;
			}
			/*类选择器*/
			.common{
				color: red;
			}
			/*组合选择器*/
			.common,table{
				background-color: blue;
			}	
			/*子标签选择器*/
			ul li a{
				color: black;
			}
			#p1 a{
				color: yellow;
			}
			input[type=text]{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<h3>css的选择器学习</h3>
		<hr />
		<hr />
		<table id="t1" class="common">
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
		</table>
		<table>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
		<b class="common">css学习</b>
		<hr />
		<!--子选择器-->
		<ul id="u">
			<li><a href="">哈哈</a></li>
			<li><a href="">呵呵</a></li>
			<li><a href="">嘿嘿</a></li>
		</ul>
		<ul>
			<li><a href="">哈哈</a></li>
			<li><a href="">呵呵</a></li>
			<li><a href="">嘿嘿</a></li>
		</ul>
		<p id="p1">
			<a href="">嘻嘻</a>
		</p>
		<p>
			<a href="">嘻嘻</a>
		</p>
		<a href="">嘻嘻</a>
		<hr />
		<input type="text" name="" id="" value="" /><br />
		<input type="password" name="" id="" value="" />
	</body>
</html>

3 css 的样式使用

<html>
	<head>
		<title>css的样式使用</title>
		<meta charset="UTF-8"/>
		<!--声明css代码域-->
		<style type="text/css">
			/*添加网页背景图*/
			body{
				background-image: url(img/a1.jpg);/*添加背景图片*/
				background-repeat: no-repeat;/*设置图片不重复*/
				background-size: cover;/*设置图片平铺*/
				
			}
			/*使用标签选择器*/
			table{
				
			}
			/*设置table的行高*/
			tr{
				height: 40px;
				
			}
			/*设置td*/
			td{
				width: 100px;/*设置宽*/
				border: solid 1px red;/*添加边框及其颜色和大小*/
				border-radius: 10px;/*设置表框的角度*/
				background-color: orange;		/*设置背景颜色*/
				text-align: center;/*设置文本位置*/
				color: blueviolet;/*设置文本颜色*/
				font-weight: bold;/*设置文本加粗*/
				letter-spacing: 10px;/*设置字体间距*/
			}
/*--------------------------------------------------------------------------------*/
			ul{
				background-color: gray;
				height: 50px;
				
				
			}
			li{
				list-style-type:none;/*去除li的标识符*/
				/*display: inline;*/
				float: left;/*设置菜单左悬浮*/
			}
			li a{
				color: black;
				text-decoration: none;/*设置超链接去除下划线*/
				font-weight: bold;
				font-size: 20px;
				margin-left: 20px;
				position: relative;
				top:10px;
			}
		</style>
	</head>
	<body>
		<h3>css的样式使用</h3>
		<hr />
		<table>
			<tr>
				<td>姓名</td>
				<td>性别</td>
				<td>爱好</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>唱歌</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>男</td>
				<td>跳舞</td>
			</tr>
		</table>
		<hr />
		<ul>
			<li><a href="">首页</a></li>
			<li><a href="">百战</a></li>
			<li><a href="">java风情</a></li>
			<li><a href="">客服</a></li>
		</ul>
	</body>
</html>

4 照片墙案例

<html>
	<head>
		<title>照片墙案例</title>
		<meta charset="UTF-8"/>
		<!--声明css代码域-->
		<style type="text/css">
			/*设置body样式*/
			body{
				text-align: center;
				background-color: gray;
			}
			/*设置图片样式*/
			img{
				width: 12%;/*设置高度*/
				padding: 10px;/*设置内边距*/
				background-color: white;/*设置背景颜色*/
				transform: rotate(-10deg);/*设置倾斜角度*/
				margin: 20px;/*设置外边距*/
			}
			/*使用伪类给标签添加样式*/
			img:hover{
				transform: rotate(0deg) scale(1.5);/*设置旋转角度和缩放比例*/
				z-index: 1;/*设置显示优先级别*/
				transition: 1.5s;/*设置显示加载时间*/
			}
		</style>
	</head>
	<body>
		<br /><br /><br />
		<img src="img/a1.jpg" alt="" />
		<img src="img/a2.jpg" alt="" />
		<img src="img/a3.jpg" alt="" />
		<img src="img/a4.jpg" alt="" /><br />
		<img src="img/a5.jpg" alt="" />
		<img src="img/a6.jpg" alt="" />
		<img src="img/a7.jpg" alt="" />
		<img src="img/a8.jpg" alt="" />
	</body>
</html>

5 css的盒子模型

<html>
	<head>
		<title>css的盒子模型学习</title>
		<meta charset="UTF-8"/>
		<!--
			css的盒子模型学习：
				div标签：
					块级标签，主要是用来进行网页布局的，会将其中的子元素内容作为一个独立的整体存在。
					特点：
						默认宽度是页面的宽度，但是可以设置。
						高度默认是没有的，但是可以设置。(可以顶开)
						如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是页面的。
				盒子模型：
					外边距:margin
						作用：用来设置元素和元素之间的间隔。
						居中设置:margin:0px auto;上下间隔是0px,水平居中。
						可以根据需求单独的设置上下左右的外边距。
					边框：border
						作用：用来设置元素的边框大小
						    可以单独设置上下左右
					内边距：padding
						作用：设置内容和边框之间的距离
						注意：内边距不会改变内容区域的大小
						可以单独的设置上下左右的内边距
					内容区域：
						作用：改变内容区域的大小。
						设置宽和高即可改变内容区域的大小。
		-->
		<style type="text/css">
			img{
				width: 49.53%;
				height: 150px;
			}
			#showdiv{
				border: solid 100px;
				width: 40%;
				height: 200px;
				margin-bottom: 10px;
				margin: 0px auto;
				padding: 20px;
			}
			#div01{
				border: dashed 3px orange;
				width: 40%;
				height: 200px;
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<div id="showdiv">
			<img src="img/a1.jpg"/>
			<img src="img/a1.jpg"/>
		</div>	
		<div id="div01">
			
		</div>
	</body>
</html>

6 盒子模型简单布局

<html>
	<head>
		<title>盒子模型简单的布局</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
		/*设置div的基础样式*/
			div{
				width: 300px;
				height: 300px;
			}
		/*设置header和footer的样式*/
			#header,#footer{
				width: 650px;
				margin: auto;
				margin-top: 20px;
			}
		/*设置子div的样式*/
			#div01{
				border: solid 1px orange;
				float: left;
				margin-right: 20px;
			}
			#div02{
				border: solid 1px blueviolet;
				float: left;
			}
			#div03{
				border: solid 1px #4791FF;
				float: left;
				margin-right: 20px;
			}
			#div04{
				border: solid 1px coral;
				float: left;
			}*/
		</style>
	</head>
	<body>
		<div id="header">
				<div id="div01">
					我是div01
				</div>
				<div id="div02">
					我是div02
				</div>
		</div>
		
		<div id="footer">
			<div id="div03">
				我是div03
			</div>
			<div id="div04">
				我是div04
			</div>
		</div>
		
	</body>
</html>

7 css的定位

<html>
	<head>
		<title>css的定位</title>
		<meta charset="UTF-8"/>
		<!--
			css的定位学习：
				position
					相对定位:relative
						作用：相对元素原有位置移动指定的距离(相对的自己的原有位置)
							可以使用top,left,right,bottom来进行设置。
						注意：
							其他元素的位置是不改变的。
					绝对定位:absolute
						作用：可以使用元素参照界面或者相对父元素来进行移动 	
						注意：
							如果父级元素成为参照元素，必须使用相对定位属性
							默认情况下是以界面为基准进行移动的。
					固定定位:fixed
						作用：将元素固定现在页面的指定位置，不会随着滚动条的移动而改变位置。
					以上定位都可以使用top,left,right,bottom来进行移动。
				z-index:此属性是用来声明元素的显示级别的。
		-->
		<!--声明css代码域-->
		<style type="text/css">
		/*给div01添加样式*/
			#div01{
				border: solid 2px orange;
				height: 200px;
				width: 800px;
				margin-bottom: 10px;
				margin-top: 50px;
				position: relative;/*给div01添加相对定位成为其子元素绝对定位的参照元素*/
			}
			/*给showdiv添加样式*/
			#showdiv{
				border: solid 3px;
				height: 50px;
				width: 50px;
				position: absolute;
				top:10px;
			}
		/*给div02添加样式*/
			#div02{
				border: dashed 2px coral;
				height:200px;
				width: 800px;
				margin-bottom: 10px;
				position: relative;/*使用相对定位*/
				left:50px;
				top:100px;
				background-color: coral;
				z-index: 3;
			}
		/*给div03添加样式*/
			#div03{
				border: solid 2px #FF7F50;
				height: 200px;
				width: 800px;
				background-color: gray;
				position: relative;
				z-index: 4;
			}
		/*给div04添加样式*/
			#div04{
				border: solid 3px blue;
				height: 50px;
				width: 50px;
				position: fixed;
				top:270px;
				right: 10px;
			}
		</style>
	</head>
	<body>
		<div id="div01">
				<div id="showdiv">
					
				</div>
		</div>
		<div id="div02">我是div02</div>
		<div id="div03"></div>
		<div id="div04">
			
		</div>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	</body>
</html>

8 百度首页

<html>
	<head>
		<title>百度首页</title>
		<meta charset="UTF-8"/>
		<link href="title.ico" rel="shortcut icon"/>
		<!--引入声明好的样式-->
		<link rel="stylesheet" type="text/css" href="css/baidu.css"/>
	</head>
	<body>
		<!--百度首页：网页布局-->
			<!--网页标题部分-->
			<div id="header">
				<!--声明导航栏-->
				<ul id="header_nav">
					<li><a href="">新闻</a></li>
					<li><a href="">hao123</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>
			</div>
			<!--网页主体部分-->
			<div id="main">
				<div id="main_logo">
					<img src="img/bd_logo.png" height="129px" width="270px"/><br />
				</div>
				<div id="main_search">
					<input type="text" name="" id="" value="" />
					<input type="submit" name="" id="" value="百度一下" />
				</div>
			</div>
			<!--网页声明部分-->
			<div id="footer">
				<img src="img/footer.png"/>
			</div>
	</body>
</html>

/*声明网页基础样式*/
*{margin: 0px;padding: 0px;}
/*网页标题部分样式*/
	#header{width: 100%;height: 45px;}
		/*设置导航栏样式*/
		#header_nav{position: absolute;right: 94px;top:26px;}
		#header_nav li{float: left;list-style-type: none;margin-left: 24px;}
		/*设置超链接样式*/
		#header_nav li a{color: black;font-weight: 700;color:#333;font-size: 13px; line-height: 24px;}
/*网页主体部分样式*/
	#main{width: 100%;height: 379px;background-color: white;text-align: center;border-top: solid 1px white;}
	/*设置图片的样式*/
		#main_logo{margin-top: 60px;margin-bottom: 18px;}
		input[type=text]{
			width: 537px;
			height: 36px;
			border: solid 0.5px #4791FF;
			background-image: url(../img/inp.png);
			background-repeat: no-repeat;
			background-position-x: 500px;
			background-position-y: 5px;
		}
		input[type=submit]{
			height: 36px;
			width: 103px;
			border: solid 1px #2d78f4;
			background-color: #2d78f4;
			font-size: 15px;
			letter-spacing: 1px;
			color: #fff;
			position: relative;
			right: 5px;
			top:1px;
		}
/*网页声明部分样式*/
	#footer{width: 100%;height: 210px;text-align: center;}

9 百度首页模拟

<html>
	<head>
		<title>百度首页模拟</title>
		<meta charset="UTF-8"/>
		<!--
			模拟百度首页：
				1、首页使用css+div进行页面的布局
					css代码一般使用外联方式进行开发
				2、使用HTML进行每一个块中的内容填充			
		-->
		<!--引入外部声明的css文件-->
		<link rel="stylesheet" type="text/css" href="css/baidu01.css"/>
		<!--引入网页标题图片-->
		<link href="img/title.ico" rel="shortcut icon"/>
	</head>
	<body>
		<!--声明头 部分-->
		<div id="header">
			<!--声明导航栏-->
			<ul id="header_nav">
				<li><a href="">新闻</a></li>
				<li><a href="">hao123</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>
		</div>
		<!--声明主体-->
		<div id="main">
			<!--引入百度logo-->
			<img id="img_logo" src="img/bd_logo.png" width="270px" height="129px"/>
			<br />
			<!--声明搜索框和按钮-->
			<input type="text" name="" id="" value="" />
			<input type="submit" name="" id="" value="百度一下" />
		</div>
		<!--声明底部-->
		<div id="footer">
			<!--声明网站声明内容-->
			<img src="img/footer.png"/>
		</div>
	</body>
</html>

/*设置页面的基础样式*/
	*{margin: 0px;padding: 0px;}
/*设置header头部分的大小*/
	#header{width: 100%;height: 45px;}
	/*设置导航栏样式*/
		#header_nav{position: absolute;right:92px;top:26px;}
		#header_nav li{float: left;list-style-type: none;margin-left: 24px;}
		#header_nav li a{color:  #333;font-size: 13px;font-weight: 700;line-height: 24px;}
/*设置main主体部分的大小*/
	#main{width:100%;height: 384px;text-align: center;}
		#img_logo{margin-top: 30px;margin-bottom: 21px;}
		/*设置搜索框样式*/
		input[type=text]{height: 34px;width: 539px;border: solid 1px #4992FF;background-image: url(../img/inp.png);background-repeat: no-repeat;background-position-x: 500px;background-position-y: 3px;}
		input[type=submit]{width: 100px;height: 34px;font-size: 15px;color: #fff;background-color: #2d78f4;border: solid #2d78f4;letter-spacing: 1px;position: relative;right: 5px;top:1px;}
/*设置footer底部部分的大小*/
 	#footer{width: 100%;height: 206px;text-align: center;}
/*使用伪类给标签添加样式*/
	#header_nav li a:hover{color: blue;}

10 轮播

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js文字图片轮播</title>
<meta charset="UTF-8"/>
<style type="text/css">
<!--
*
{
    margin:0;
    padding:0;
    font-size:12px;
}
 
ul,li
{
    list-style:none;
}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1;}
#dd { width:303px; height:80px; margin:50px auto 0 auto; border:1px solid #ccc; border-right:none; overflow:hidden;}
#dd li { float:left; width:50px; height:80px; overflow:hidden;border-right:1px solid #ccc;}
#dd li span { width:50px; display:inline-block;  text-align:center; line-height:80px;}
#dd li  p { width:150px; display:inline-block;}
#dd li.on { width:200px;}
#ii { width:303px;  margin:5px auto 0 auto;}
#ii li { float:left; width:10px; height:10px; margin:0 1px; background:#ccc; text-align:center; line-height:10px; cursor:pointer;}
#ii li.on{ background:#6CF;}
-->
</style>
</head>
 
<body>
 
<ul id="dd" class="clearfix">
 
    <li><span>表一</span><p>户籍管理松动<br />权益捆绑依旧</p></li>
    <li><span>表二</span><p>户籍管理松动<br />权益捆绑依旧</p></li>
    <li><span>表三</span><p>户籍管理松动<br />权益捆绑依旧</p></li>
 
</ul>
 
<ul id="ii" class="clearfix">
     
    <li>1</li>
    <li>2</li>
    <li>3</li>
 
</ul>
 
<script type="text/javascript">
<!--
function newSlider()
{
    var dl=document.getElementById("dd").getElementsByTagName("li");//得到数组赋值给变量
    // 如果这里输入alert(dl)将会提示Object: HTMLCollection
    // 关于Object: HTMLCollection解释
    // The HTMLCollection object is an array that contains an ordered collection of nodes. 
    // 对象时一个包含有序节点集的数组
    // 英文解释摘自BlackBerry Browser开发人员说明手册
    var il=document.getElementById("ii").getElementsByTagName("li");
    var dlen = dl.length;
    var timer = null,index = 0,autoTime = 3000;
    //timer定时器，index当前显示的是第几个，autotime自动切换时间
     
    dl[0].className="on",il[0].className="on";// 改变类名，变换CSS格式
    //切换函数
     
    function play(j)
    {
        index = j;
        stopAuto();//停止计时
        for (var i=0;i<dlen ;i++ )
        {
            dl[i].className="";
            il[i].className="";
        }
        dl[j].className="on";
        il[j].className="on";
        startAuto();//重新开始计时
    }
    //mouseover表切换
    for ( var i=0;i<dlen ;i++ )
    {
        dl[i].onmouseover=function(j)
        {
            return function(){play(j);}
        }(i)
    }
    //click按钮切换
    for ( var i=0;i<dlen ;i++ )
    {
        il[i].onclick=function(j)
        {
            return function(){play(j);}
        }(i)
    }
    // 为鼠标点击和离开添加函数
    // 自动切换开始
    function startAuto()
    {
        timer = setInterval
        (
            function()
            {
                index++;
                index = index>dlen-1?0:index;
                play(index);
            },autoTime
        );
    }
    //自动切换停止
    function stopAuto()
    {
        clearInterval(timer);
    }
    //启动自动切换
    startAuto()
}
// setInterval()与clearInterval()特效代码中极其常见的两个函数，参考W3C，不多介绍
window.onload=function(){newSlider();}
//-->
</script>
</body>
</html>

11 俄罗方块

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>俄罗斯方块</title>
		<style type="text/css">
			.c {
				margin: 1px;
				width: 19px;
				height: 19px;
				background: red;
				position: absolute;
			}
			
			.d {
				margin: 1px;
				width: 19px;
				height: 19px;
				background: gray;
				position: absolute;
			}
			
			.f {
				top: 0px;
				left: 0px;
				background: black;
				position: absolute;
			}
			
			.e {
				top: 0px;
				background: #151515;
				position: absolute;
			}
			
			.g {
				width: 100px;
				height: 20px;
				color: white;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			var row = 18;
			var col = 10;
			var announcement = 6;
			var size = 20;
			var isOver = false;
			var shapes = ("0,1,1,1,2,1,3,1;1,0,1,1,1,2,2,2;2,0,2,1,2,2,1,2;0,1,1,1,1,2,2,2;1,2,2,2,2,1,3,1;1,1,2,1,1,2,2,2;0,2,1,2,1,1,2,2").split(";");
			var tetris;
			var container;

			function createElm(tag, css) {
				var elm = document.createElement(tag);
				elm.className = css;
				document.body.appendChild(elm);
				return elm;
			}

			function Tetris(css, x, y, shape) {
				// 创建4个div用来组合出各种方块
				var myCss = css ? css : "c";
				this.divs = [createElm("div", myCss), createElm("div", myCss), createElm("div", myCss), createElm("div", myCss)];
				if (!shape) {
					this.divs2 = [createElm("div", myCss), createElm("div", myCss), createElm("div", myCss), createElm("div", myCss)];
					this.score = createElm("div", "g");
					this.score.style.top = 10 * size + "px";
					this.score.style.left = (col - -1) * size + "px";
					this.score.innerHTML = "score:0";
				}
				this.container = null;
				this.refresh = function() {
						this.x = (typeof(x) != 'undefined') ? x : 3;
						this.y = (typeof(y) != 'undefined') ? y : 0;
						// 如果有传参，优先使用参数的，如果有预告，优先使用预告，都没有就自己生成
						if (shape)
							this.shape = shape;
						else if (this.shape2)
							this.shape = this.shape2;
						else
							this.shape = shape ? shape : shapes[Math.floor((Math.random() * shapes.length - 0.000000001))].split(",");
						this.shape2 = shapes[Math.floor((Math.random() * shapes.length - 0.000000001))].split(",");
						if (this.container && !this.container.check(this.x, this.y, this.shape)) {
							isOver = true;
							alert("游戏结束");
						} else {
							this.show();
							this.showScore();
							this.showAnnouncement();
						}
					}
					// 显示方块
				this.show = function() {
						for (var i in this.divs) {
							this.divs[i].style.top = (this.shape[i * 2 + 1] - -this.y) * size + "px";
							this.divs[i].style.left = (this.shape[i * 2] - -this.x) * size + "px";
						}
					}
					// 显示预告
				this.showAnnouncement = function() {
						for (var i in this.divs2) {
							this.divs2[i].style.top = (this.shape2[i * 2 + 1] - -1) * size + "px";
							this.divs2[i].style.left = (this.shape2[i * 2] - -1 - -col) * size + "px";
						}
					}
					// 显示分数
				this.showScore = function() {
						if (this.container && this.score) {
							this.score.innerHTML = "score:" + this.container.score;
						}
					}
					// 水平移动方块的位置
				this.hMove = function(step) {
						if (this.container.check(this.x - -step, this.y, this.shape)) {
							this.x += step;
							this.show();
						}
					}
					// 垂直移动方块位置
				this.vMove = function(step) {
						if (this.container.check(this.x, this.y - -step, this.shape)) {
							this.y += step;
							this.show();
						} else {
							this.container.fixShape(this.x, this.y, this.shape);
							this.container.findFull();
							this.refresh();
						}
					}
					// 旋转方块
				this.rotate = function() {
					var newShape = [this.shape[1], 3 - this.shape[0], this.shape[3], 3 - this.shape[2], this.shape[5], 3 - this.shape[4], this.shape[7], 3 - this.shape[6]];
					if (this.container.check(this.x, this.y, newShape)) {
						this.shape = newShape;
						this.show();
					}
				}
				this.refresh();
			}

			function Container() {
				this.init = function() {
					// 绘制方块所在区域
					var bgDiv = createElm("div", "f");
					bgDiv.style.width = size * col + "px";
					bgDiv.style.height = size * row + "px";
					// 绘制预告所在区域
					var bgDiv = createElm("div", "e");
					bgDiv.style.left = size * col + "px";
					bgDiv.style.width = size * announcement + "px";
					bgDiv.style.height = size * row + "px";
					// 清空积分
					this.score = 0;
				}
				this.check = function(x, y, shape) {
						// 检查边界越界
						var flag = false;
						var leftmost = col;
						var rightmost = 0;
						var undermost = 0;
						for (var i = 0; i < 8; i += 2) {
							// 记录最左边水平坐标
							if (shape[i] < leftmost)
								leftmost = shape[i];
							// 记录最右边水平坐标
							if (shape[i] > rightmost)
								rightmost = shape[i];
							// 记录最下边垂直坐标
							if (shape[i + 1] > undermost)
								undermost = shape[i + 1];
							// 判断是否碰撞
							if (this[(shape[i + 1] - -y) * 100 - -(shape[i] - -x)])
								flag = true;
						}
						// 判断是否到达极限高度
						for (var m = 0; m < 3; m++)
							for (var n = 0; n < col; n++)
								if (this[m * 100 + n])
									flag = true;
						if ((rightmost - -x + 1) > col || (leftmost - -x) < 0 || (undermost - -y + 1) > row || flag)
							return false;
						return true;
					}
					// 用灰色方块替换红色方块，并在容器中记录灰色方块的位置
				this.fixShape = function(x, y, shape) {
						var t = new Tetris("d", x, y, shape);
						for (var i = 0; i < 8; i += 2)
							this[(shape[i + 1] - -y) * 100 - -(shape[i] - -x)] = t.divs[i / 2];
					}
					// 遍历整个容器，判断是否可以消除
				this.findFull = function() {
					var s = 0;
					for (var m = 0; m < row; m++) {
						var count = 0;
						for (var n = 0; n < col; n++)
							if (this[m * 100 + n])
								count++;
						if (count == col) {
							s++;
							this.removeLine(m);
						}
					}
					this.score -= -this.calScore(s);
				}
				this.calScore = function(s) {
						if (s != 0)
							return s - -this.calScore(s - 1)
						else
							return 0;
					}
					// 消除指定一行方块
				this.removeLine = function(row) {
					// 移除一行方块
					for (var n = 0; n < col; n++)
						document.body.removeChild(this[row * 100 + n]);
					// 把所消除行上面所有的方块下移一行
					for (var i = row; i > 0; i--) {
						for (var j = 0; j < col; j++) {
							this[i * 100 - -j] = this[(i - 1) * 100 - -j]
							if (this[i * 100 - -j])
								this[i * 100 - -j].style.top = i * size + "px";
						}
					}
				}
			}

			function init() {
				container = new Container();
				container.init();
				tetris = new Tetris();
				tetris.container = container;
				document.onkeydown = function(e) {
					if (isOver) return;
					var e = window.event ? window.event : e;
					switch (e.keyCode) {
						case 38: //up
							tetris.rotate();
							break;
						case 40: //down
							tetris.vMove(1);
							break;
						case 37: //left
							tetris.hMove(-1);
							break;
						case 39: //right
							tetris.hMove(1);
							break;
					}
				}
				setInterval("if(!isOver) tetris.vMove(1)", 500);
			}
		</script>
	</head>

	<body onload="init()">
	</body>

</html>