整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
大家分享一个html写的俄罗斯方块：
源代码如下:
<!DOCTYPE html>
<html>
<head>
<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;
}
</style>
</head>
<body>
</body>
</html>
<script type="text/javascript">
var over=false,
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(";");
//shapes 中的每一个元素的各个数字意2两个一组，分别指该层移动的X，Y轴
function create(tag, css) {
var elm=document.createElement(tag); //创建一个tag标签
elm.className=css; //添加一个css样式
document.body.appendChild(elm); //把该标签添加到body标签中
return elm;
} //返回该标签
function Field(w, h) { //Field整个游戏界面的对象，没跳动一次，就是一次刷新
this.width=w ? w : 10;
this.height=h ? h : 20;
this.show=function() { //创建一个底层，游戏界面
var f=create("div", "f")
f.style.width=this.width * 20 + 'px';
f.style.height=this.height * 20 + 'px';
}
this.check=function(shape, x, y, d) { //判断是否到了边缘
var r1=0,
r2='GO'; //每一次所生成的4个层绝对不会存在超出左边的同时又超出右边，故r1只有一个
for(var i=0; i < 8; i +=2) {
//循环横坐标，查看是够超过边距
if(parseInt(shape) + x < 0 && parseInt(shape) + x < r1) {
//若向左边移动会超出边界
r1=parseInt(shape) + x;
} else if(parseInt(shape) + x >=this.width && parseInt(shape) + x > r1) {
//若向右移动会超出边界
r1=parseInt(shape) + x;
}
if(parseInt(shape[i + 1]) + y >=this.height || this[parseInt(shape) + x + (parseInt(shape[i + 1]) + y) * this.width]) {
r2="NO";
}
}
if(d=="move" && r2=="GO") { //当此次操作是左右移动的话，就返回移动后的横坐标，只要没有超出边界，r1就肯定不为0
return r1;
} else if(d=="upchange" && r2=="GO") { //当此次操作是变换形状时
return r1 > 0 ? r1 - this.width + 1 : r1; //其实每次移动的都是该层的很坐标，以左边为准移动的
} else {
return r2;
}
}
this.findFull=function() { //判断该行是否已经满了
for(var h=0; h < this.height; h++) { //循环底层的纵坐标
var s=0;
for(var w=0; w < this.width; w++) { //循环行坐标
s +=this[w + h * this.width] ? 1 : 0 //确定每个坐标点上时候有元素，以便于确定改行是否满了
}
if(s==this.width) { //若改行满了，则调用removeLine方法，一处该行的每一个元素
this.removeLine(h);
}
}
}
//清除已经填满的行
this.removeLine=function(line) {
for(var w=0; w < this.width; w++) { //因为每个元素都是根据对象的横纵坐标在存储，所以需要重新循环横坐标，以便于取出每一个元素
document.body.removeChild(this[w + line * this.width]); //每个元素都是在body上存在着
}
//移除该行之后需要让其上的每行都向下移动一行
for(var l=line; l > 0; l--) {
for(var i=0; i < this.width; i++) {
this[i + l * this.width]=this[i + (l - 1) * this.width]; //把上一行的元素付给下一行的元素()
if(this[i + l * this.width]) {
this[i + l * this.width].style.top=l * 20 + 'px'; //移动
}
}
}
}
this.fixShape=function(shape, x, y) { //生成落地的方块
var d=new Tetris("d", shape, x, y);
d.show();
for(var i=0; i < 8; i +=2) { //记录每个变灰色的div层，只有成功到底底层的时候才记录
//parseInt(shape) + x 记录的为该层的横坐标
//parseInt(shape[i + 1]) + y 记录的为纵坐标
//这样是为了this[…]是唯一。
this[parseInt(shape) + x + (parseInt(shape[i + 1]) + y) * this.width]=d.divs[i / 2];
}
}
}
function Tetris(c, t, x, y) {
var c=c ? c : "c"; //若C存在，则为C，不存在，则赋值
this.field=null;
this.divs=[create("div", c), create("div", c), create("div", c), create("div", c)]; //调用create方法创建元素
var ttt=t;
this.reset=function() { //创建一个方块
this.x=typeof x !='undefined' ? x : 3;
this.y=typeof y !='undefined' ? y : 0;
this.shape=t ? t : (shapes[Math.floor(Math.random() * (shapes.length - 0.00001))].split(","));
this.show();
//当刚生的方块就不能再向下移动的时候，游戏结束
if(this.field && this.field.check(this.shape, this.x, this.y, "down")=="NO") {
over=true;
this.field.fixShape(this.shape, this.x, this.y);
alert('game over');
}
}
this.show=function() { //根据生成的方案，初始化方块。
for(var i=0; i < this.divs.length; i++) {
this.divs.style.left=(this.shape[i * 2] * 1 + this.x) * 20 + 'px';
this.divs.style.top=(this.shape[i * 2 + 1] * 1 + this.y) * 20 + 'px';
}
}
this.vMove=function() { //该方法使方块向下移动
if(this.field.check(this.shape, this.x, this.y + 1, "down")=="GO") { //若还能向下移动就执行
this.y++;
this.show();
} else {
this.field.fixShape(this.shape, this.x, this.y); //不能向下移动了，就生成固定的块。
this.field.findFull();
this.reset();
};
}
this.hMove=function(moveNo) { //该方法使方块左右移动
var r=this.field.check(this.shape, parseInt(this.x) + moveNo, this.y, 'move');
if(r !='GO' && r==0) {
this.x +=moveNo;
this.show();
}
}
this.rotate=function() { //当按动上键时，改变方块的排列方向
var s=this.shape;
var newShape=[3 - s[1], s[0], 3 - s[3], s[2], 3 - s[5], s[4], 3 - s[7], s[6]]; //先把坐标循环180度，然后纵横坐标互换。
var r=this.field.check(newShape, this.x, this.y, 'upchange'); //调用check方法，确定时候可以改变
if(r=="NO") { return; };
if(r==0) { //若为0 ，则说明改变后的块并没有超出范围，继续执行
this.shape=newShape;
this.show();
} else if(this.field.check(newShape, this.x - r, this.y, 'move')==0) { //超出后，根据返回值，让其向相应的方向移动。以保证并不会超出范围
this.x -=r;
this.shape=newShape;
this.show();
}
}
this.reset();
}
var f=new Field();
f.show();
var t=new Tetris();
t.field=f;
t.reset();
window.setInterval("if(!over)t.vMove();", 500); //调用向下移动的方法
document.onkeydown=function(e) { //当按上下左右键时，触发
if(over) return;
var e=window.event ? window.event : e;
switch(e.keyCode) {
case 38: //up 当按下上键时
t.rotate();
break;
case 40: //down
t.vMove();
break;
case 37: //left
t.hMove(-1);
break;
case 39: //right
t.hMove(1);
break;
}
}
</script>
路过的朋友给个关注哦，需要打包源码的私信小编。
. block(区块)
block面板主要是设置对象文本的文字间距、对齐方式、上标、下标、排列方式、首行缩进等。
(1)word-spacing：设置单词之间的间距。可以设置负值。
默认值:normal
(2)letter-spacing：设置字符之间的间距。可以指定负值。因为中文也是字符, 这个参数可以设置文字间的间距。
默认值:normal
(3)vertical-align：指定元素的垂直对齐方式。针对<td>表格设置垂直对齐方法,但是对<div>设置无效,可以将display属性设置为table-cell值;
可以指定sub(下标)、super(上标)、top(与顶端对齐)、middle(居中)、bottom(与底端对齐)等。适用于行内块元素 img、input、td等
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
默认值: baseline
(4)text-align：设置文本的排列方式(适用于行内元素和行内块元素, 如 a、span、input、img、label等元素)。left(左对齐)、right(右对齐)、center(居中)、justify(两端对齐)。也可用于<hr/>下划线对齐方式
默认值： 如果 direction 属性是 ltr, 则默认值是 left；如果 direction 是 rtl，则为 right。(关于CSS direction 属性看下面的内容介绍)
text-align 和margin auto 区别
text-align 可以让块级元素里面的文字内容居中对齐.
文字内容==(图片 input 行内元素 行内块元素)
但是对于里面的块级元素无效
让一个块级元素居中对齐 ： margin:0 auto;
(5)text-indent：设置文本第一行的缩进值。负值用于将文本第一行向外拉, 主要给<p>设置首行。
要在每段前空两格,可设置为2em，因为em是当前字体尺寸，2em就是两个字的大小。
默认值： not specified(没有规定的)
p{font-size:12px;text-indent:2em;}上述代码就是可以实现段落首行缩进24px(也就是两个字体大小的距离)。
(6)white-space：设置如何处理元素内的空白符。有三个选项可选：
normal 会将空白符全部压缩；
pre 则会如同处理pre标签内的文本一样处理这些空白符,也就是说，所有的空白符，包括空格，标签，回车，等都会得以保留；
nowrap 指定文本只有遇到br标签时才换行。
默认值: normal
(7)display: none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认值。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>)，表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>)，表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。
默认值： inline
常用的属性:
display:none; //隐藏
display:block //显示(将行内元素转换为块元素)
dispaly:inline //将块元素转换行内元素
dispaly:inline-block //将块元素转换为行内块元素
display:table-cell; //此元素会作为一个表格单元格显示(类似 <td> 和 <th>) 用于多行文本、块元素垂直居中以上转换涉及行内块元素(img、input)转换;
经过大量的测试证明：属性display是不能用于转换行内块元素(img、input)
同义词: 内联元素(行内元素)
4. box(方框或盒子) 主要针对图片、表格、层、段落(p)、标题(h1-h6)等
box面板主要设置对象的边界、间距、高度、宽度、和漂浮方式等。
(1)width：定义元素的宽。
默认值:auto
(2)height：定义元素的高。
默认值:auto
以上width、height属性如果是针对div标签设置css样式，则与定位设置窗口width、height属性一致(Dreamweaver会自动填充数据)
在父元素和子元素都设置了高度和宽度的情况下：
如果子元素的宽度超出了它的父元素的宽度, 则会父元素不会限制其显示宽度;
如果子元素的高度超出了它的父元素的高度, 则会父元素不会限制其显示高度;
(3)float：定义元素的漂浮方式。left 表示对象浮在左边、right表示对象浮在右边、none 表示对象不浮动。
默认值:none
一个span标签不需要转成块级元素, 就能够设置宽度、高度了。所以能够证明一件事儿, 就是所有标签已经不区分行内、块了。
也就是说, 一旦一个元素浮动了, 那么, 将能够并排了, 并且能够设置宽高了。无论它原来是个div还是个span。
span{
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
(4)clear：不允许元素的漂浮，相对于前一个<div>设置浮动时，下一个有清除设置的元素就会移到它的下面。
left表示不允许左边有浮动对象 right表示不允许右边有浮动对象
none 表示允许两边都可以有浮动对象 both 不允许有浮动对象。
默认值:none
浮动的主要作用是将块元素排在同一行(span也可以设置浮动);
浮动元素它会向左或者向右进行浮动, 所谓浮动可以理解"飘";
浮动元素向它遇到父元素的边框就停止浮动;
浮动元素的层级会比普通元素要高, 并且它不会再占用原有的高度;
浮动元素只会影响后面的元素, 不会影响前面的元素：
浮动元素的后面的元素(可能是一个也可能是多个元素受到影响)也会继承浮动元素的特性, 它也会浮动了要解决这个问题有两办法;
第一个：需要清除浮动
第二个：给父元素设置一个高度(子元素都设置了height高度条件下), 不建议使用
清除浮动后它不会影响到它后面的元素, 父元素会将所有的浮动元素包围者
当然浮动元素对后面的元素的影响可以做首字母方法, 图文混排(文字环绕图片)等特效；
(5)padding：定义元素内容与其边框的空距(如果元素没有边框就是指页边的空白)。
可以分别设置分别设置上、右、下、左内边距。
padding-top
padding-right
padding-bottom
padding-left
p {padding:20px} 设置设置上、右、下、左内边距都为20px
p {margin: 20px 30px 30px 20px;} 设置padding-top padding-right padding-bottom padding-left分别为20px 30px 30px 20px
默认值：0。
要懂得, 用小属性层叠大属性：
padding: 20px;
padding-left: 30px;
注意：大属性要写在前面, 小属性写在后面;
比如：
div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding:40px 50px 60px;
padding-bottom: 30px;
border: 1px solid #000;
}padding-left:10px和padding-right:20px没用, 因为后面的padding大属性, 层叠覆盖了。
(6)margin：定义元素的边框与其他元素之间的距离(如果没有边框就是指内容之间的距离)。
可以分别设置上边界、右边界、下边界、左边界的值。
margin-top
margin-right
margin-bottom
margin-left
p {margin:20px}
p {margin:10px 0px 15px 5px;}
默认值：0
marign：上边界值 右边界值 下边界值 左边界值
margin属性值必须按照上面顺序进行排列,以空格分开。如果仅输入一个值,则4个边界值会同时设置为此值。
如果仅输入两个的值,则缺少的值会以对边的设置值进行替代。例如：
div{margin:5px 10px 15px 20px} /*上=5px,右=10px,下=15px,左=20px*/
div{margin:5px} /*上=5px,右=5px,下=5px,左=5px*/
div{margin:5px 10px} /*上=5px,右=10px,下=5px,左=10px*/
div{margin:5px 10px 15px} /*上=5px,右=10px,下=15px,左=10px*/
5. border(边框) 针对段落(p标签)、图片、表格、标题(h1-h6)、form、input等(几乎所有的元素都可以设置边框)
border面板可以设置对象边框的宽度、颜色及样式。
(1)border-width：设置元素边的宽度。可以分别设定top(上边宽)、right(右边宽)、bottom(下边宽)、left(左边宽)的值。
border-top-width border-right-width border-bottom-width border-left-width
thin 定义细的边框。
medium 默认。定义中等的边框。
thick 定义粗的边框。
length 允许您自定义边框的宽度。
inherit 规定应该从父元素继承边框宽度。
默认值: medium
(2)border-color：设置边框的颜色。你可以分别对每条边设置颜色。
注意：我们可以通过设置不同的颜色做出亮边和暗边的效果，这样元素看起来是立体的。
border-top-color border-right-color border-bottom-color border-left-color
默认值: not specified(未规定的)
(3)border-style：设置边框样式。
border-top-style border-right-style border-bottom-style border-left-style
可以设置为none(无边框)、dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、
groove(凹槽,3D凹线)、ridge(凸槽,3D凸线)、inset(凹边,3D嵌入线)、outset(凸边,3D浮出线)等边框样式。
默认值:none(无边框)
推荐：表单输入框：inset(凹边) 按钮：outset(凸边)
兼容性问题
比如, border:10px ridge red; 在chrome和firefox、IE中有细微差别：
如果公司里面的设计师, 处女座的, 追求极高的页面还原度, 那么不能使用css来制作边框。
就要用到图片, 就要切图了。所以, 比较稳定的就几个：solid、dashed、dotted, 其他的边框样式尽量不要用。
border可以没有： border: none;
某一条边没有： border-left: none;
也可以调整左边边框的宽度为0px： border-left-width: 0px;
注意：border-bottom-style：可以修改a链接的"下划线"的风格
border-bottom-width：可以修改a链接的"下划线"的宽度(粗细)
border-bottom-color：可以修改a链接的"下划线"的颜色
家好，本篇文章分享小方块缩小放大动画特效，欢迎参考和指正。
效果图：
小方块缩小放大动画特效
HTML代码：
<div class="tui-demo-3"></div>
CSS代码：
<style type="text/css">
.tui-demo-3 {
width: 100px;
height: 100px;
background: #1E9FFF;
margin: 50px auto;
animation: tui-demo-3 2.0s infinite;
}
@keyframes tui-demo-3 {
0% {
transform: scale(0.3);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.3);
}
}
</style>
知识点：
animation：是CSS3的动画属性，这里把animation绑定到tui-demo-3元素上，并指定该动画需要2.0秒完成，infinite则表示无限次播放该动画。
@keyframes：该规则表示动画可以逐步从一个CSS样式改变为另一个CSS样式。这里0％是动画开头，100％是动画结束。
transform：该属性应用于2D元素或3D元素的转换，允许元素发生旋转，缩放，移动，倾斜等效果。scale定义2D缩放，可以配置缩放大小。
最后注意下浏览器兼容问题，-webkit-,-ms-或-moz-，有问题可以留言，大家一起学习HTML+CSS基础入门开发。
*请认真填写需求信息，我们会在24小时内与您取得联系。
