CSS对对 - 记忆力和注意力的游戏 - huobengluantiao8

huobengluantiao8

浏览: 1077294 次

最近访客更多访客>>

u012363178

wangyy

lsmh2000

shlpyy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1470)

社区版块

存档分类

CSS对对 - 记忆力和注意力的游戏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>站长中心--www.software8.co</title>
<style type="text/css">
body {
background:#333;
color:#fff;
}
h1, h2, p.intro {
text-align:center;
font-size:16px;
margin:0 auto .8em;
width:790px;
}
h1 {
font-size:24px;
}
ul.pairs {
padding:0;
list-style:none;
width:520px;
height:260px;
overflow:hidden;
margin:10px auto;
position:relative;
border:5px solid #000;
float:left;
}
ul.pairs li {
width:52px;
height:52px;
position:relative;
float:left;
overflow:hidden;
}
ul.pairs li a {
text-decoration:none;
display:block;
width:50px;
height:50px;
text-align:center;
line-height:50px;
font-size:34px;
position:relative;
z-index:1;
color:red;
background:#f2f2f2;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
}
ul.pairs li b {
float:left;
}
ul.pairs li b a {
background:#fcf;
}
ul.pairs li a:active, ul.pairs li a:focus {
outline:none;
}
.wrap {
width:790px;
margin:auto;
}
ul.add {
padding:0;
list-style:none;
width:100px;
height:100px;
overflow:hidden;
border:5px solid #000;
float:left;
margin:10px;
position:relative;
display:inline;
}
.box3 {
margin-right:0
}
ul.add li {
width:100px;
height:100px;
position:relative;
float:left;
}
ul.add li a, ul.add li span {
text-decoration:none;
display:block;
width:100px;
height:100px;
text-align:center;
line-height:100px;
font-size:64px;
position:relative;
z-index:1;
color:red;
background:#fcf;
}
ul.add li a:active, ul.add li a:focus {
background:#fcc
}
ul.add li i a, ul.add li b a {
position:absolute;
right:3px;
border-left:10px dashed transparent;
outline:0;
z-index:99;
width:auto;
height:auto;
text-align:right;
line-height:normal;
font-size:12px;
background:transparent!important;
}
ul.add li span#z13, ul.add li span#zz13 {
background:#000;
color:#fff;
}
ul.add li i a {
top:5px;
border-bottom:10px solid red;
border-right:10px dashed transparent;
font-style:normal;
}
ul.add li b a {
bottom:5px;
border-right:10px dashed transparent;
border-top:10px solid red;
}
ul.add li a:hover {
border-top-color:blue!important
}
ul.add2, ul.add3 {
border:none;
margin:0!important;
}
.player {
float:left;
text-align:center;
}
.player p {
clear:both;
font-weight:bold
}
</style>

</head>
<body>
<h1>CSS对 - 记忆力和注意力的游戏</h1>
如果对数字的2个玩过的游戏-以轮流单击网格中发现2个数字2平方。
如果数字相匹配，然后离开他们可见，但“你的分数卡，一旦记住得分和有另一个免费去。
不匹配，然后单击将其关闭，然后让球员2他们去。
第一个获得13对是赢家。.
没有工作在IE6或Opera
<div class="wrap">
<div class="player">

<ul class="add">
<li>0 <a href="#z1"></a></li>
<li>1 <a href="#z0"></a><a href="#z2"></a></li>
<li>2 <a href="#z1"></a><a href="#z3"></a></li>
<li>3 <a href="#z2"></a><a href="#z4"></a></li>
<li>4 <a href="#z3"></a><a href="#z5"></a></li>
<li>5 <a href="#z4"></a><a href="#z6"></a></li>
<li>6 <a href="#z5"></a><a href="#z7"></a></li>
<li>7 <a href="#z6"></a><a href="#z8"></a></li>
<li>8 <a href="#z7"></a><a href="#z9"></a></li>
<li>9 <a href="#z8"></a><a href="#z10"></a></li>
<li>10<a href="#z9"></a><a href="#z11"></a></li>
<li>11<a href="#z10"></a><a href="#z12"></a></li>
<li>12<a href="#z11"></a><a href="#z13"></a></li>
<li>win<a href="#z12"></a></li>
</ul>
Player 1
</div>
<ul class="pairs">
<li id="a5"><a id="b5" href="#c5"> </a> <a id="c5" href="#b5">5</a></li>
<li id="a9"><a id="b9" href="#c9"> </a> <a id="c9" href="#b9">9</a></li>
<li id="a14"><a id="b14" href="#c14"> </a> <a id="c14" href="#b14">14</a></li>
<li id="a1"><a id="b1" href="#c1"> </a> <a id="c1" href="#b1">1</a></li>
<li id="a16"><a id="b16" href="#c16"> </a> <a id="c16" href="#b16">16</a></li>
<li id="a29"><a id="b29" href="#c29"> </a> <a id="c29" href="#b29">4</a></li>
<li id="a2"><a id="b2" href="#c2"> </a> <a id="c2" href="#b2">2</a></li>
<li id="a4"><a id="b4" href="#c4"> </a> <a id="c4" href="#b4">4</a></li>
<li id="a21"><a id="b21" href="#c21"> </a> <a id="c21" href="#b21">21</a></li>
<li id="a10"><a id="b10" href="#c10"> </a> <a id="c10" href="#b10">10</a></li>
<li id="a41"><a id="b41" href="#c41"> </a> <a id="c41" href="#b41">16</a></li>
<li id="a23"><a id="b23" href="#c23"> </a> <a id="c23" href="#b23">23</a></li>
<li id="a7"><a id="b7" href="#c7"> </a> <a id="c7" href="#b7">7</a></li>
<li id="a8"><a id="b8" href="#c8"> </a> <a id="c8" href="#b8">8</a></li>
<li id="a26"><a id="b26" href="#c26"> </a> <a id="c26" href="#b26">1</a></li>
<li id="a27"><a id="b27" href="#c27"> </a> <a id="c27" href="#b27">2</a></li>
<li id="a48"><a id="b48" href="#c48"> </a> <a id="c48" href="#b48">23</a></li>
<li id="a28"><a id="b28" href="#c28"> </a> <a id="c28" href="#b28">3</a></li>
<li id="a43"><a id="b43" href="#c43"> </a> <a id="c43" href="#b43">18</a></li>
<li id="a15"><a id="b15" href="#c15"> </a> <a id="c15" href="#b15">15</a></li>
<li id="a11"><a id="b11" href="#c11"> </a> <a id="c11" href="#b11">11</a></li>
<li id="a12"><a id="b12" href="#c12"> </a> <a id="c12" href="#b12">12</a></li>
<li id="a34"><a id="b34" href="#c34"> </a> <a id="c34" href="#b34">9</a></li>
<li id="a13"><a id="b13" href="#c13"> </a> <a id="c13" href="#b13">13</a></li>
<li id="a22"><a id="b22" href="#c22"> </a> <a id="c22" href="#b22">21</a></li>
<li id="a17"><a id="b17" href="#c17"> </a> <a id="c17" href="#b17">17</a></li>
<li id="a18"><a id="b18" href="#c18"> </a> <a id="c18" href="#b18">18</a></li>
<li id="a19"><a id="b19" href="#c19"> </a> <a id="c19" href="#b19">19</a></li>
<li id="a20"><a id="b20" href="#c20"> </a> <a id="c20" href="#b20">20</a></li>
<li id="a24"><a id="b24" href="#c24"> </a> <a id="c24" href="#b24">24</a></li>
<li id="a3"><a id="b3" href="#c3"> </a> <a id="c3" href="#b3">3</a></li>
<li id="a25"><a id="b25" href="#c25"> </a> <a id="c25" href="#b25">25</a></li>
<li id="a6"><a id="b6" href="#c6"> </a> <a id="c6" href="#b6">6</a></li>
<li id="a44"><a id="b44" href="#c44"> </a> <a id="c44" href="#b44">19</a></li>
<li id="a45"><a id="b45" href="#c45"> </a> <a id="c45" href="#b45">20</a></li>
<li id="a33"><a id="b33" href="#c33"> </a> <a id="c33" href="#b33">8</a></li>
<li id="a40"><a id="b40" href="#c40"> </a> <a id="c40" href="#b40">15</a></li>
<li id="a30"><a id="b30" href="#c30"> </a> <a id="c30" href="#b30">5</a></li>
<li id="a47"><a id="b47" href="#c47"> </a> <a id="c47" href="#b47">21</a></li>
<li id="a50"><a id="b50" href="#c50"> </a> <a id="c50" href="#b50">25</a></li>
<li id="a42"><a id="b42" href="#c42"> </a> <a id="c42" href="#b42">17</a></li>
<li id="a31"><a id="b31" href="#c31"> </a> <a id="c31" href="#b31">6</a></li>
<li id="a46"><a id="b46" href="#c46"> </a> <a id="c46" href="#b46">21</a></li>
<li id="a32"><a id="b32" href="#c32"> </a> <a id="c32" href="#b32">7</a></li>
<li id="a35"><a id="b35" href="#c35"> </a> <a id="c35" href="#b35">10</a></li>
<li id="a49"><a id="b49" href="#c49"> </a> <a id="c49" href="#b49">24</a></li>
<li id="a36"><a id="b36" href="#c36"> </a> <a id="c36" href="#b36">11</a></li>
<li id="a37"><a id="b37" href="#c37"> </a> <a id="c37" href="#b37">12</a></li>
<li id="a38"><a id="b38" href="#c38"> </a> <a id="c38" href="#b38">13</a></li>
<li id="a39"><a id="b39" href="#c39"> </a> <a id="c39" href="#b39">14</a></li>
</ul>
<div class="player">/* www.software8.co */
<ul class="add">
<li>0 <a href="#zz1"></a></li>
<li>1 <a href="#zz0"></a><a href="#zz2"></a></li>
<li>2 <a href="#zz1"></a><a href="#zz3"></a></li>
<li>3 <a href="#zz2"></a><a href="#zz4"></a></li>
<li>4 <a href="#zz3"></a><a href="#zz5"></a></li>
<li>5 <a href="#zz4"></a><a href="#zz6"></a></li>
<li>6 <a href="#zz5"></a><a href="#zz7"></a></li>
<li>7 <a href="#zz6"></a><a href="#zz8"></a></li>
<li>8 <a href="#zz7"></a><a href="#zz9"></a></li>
<li>9 <a href="#zz8"></a><a href="#zz10"></a></li>
<li>10<a href="#zz9"></a><a href="#zz11"></a></li>
<li>11<a href="#zz10"></a><a href="#zz12"></a></li>
<li>12<a href="#zz11"></a><a href="#zz13"></a></li>
<li>win<a href="#zz12"></a></li>
</ul>
Player 2
</div>
</div>
</body>
</html>

分享到：