整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
大家分享一個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小時內與您取得聯系。
