CSS实现小功能

运行效果：

HTML：

首先定义div标签，里面嵌套a标签和span标签，从01到10，每10个一组。把call me crazy but i think we have got a winner on our hands这句话输入进去，例如：

<div class="letter p01"><a href="#"><span>c</span></a></div>
<div class="letter p02"><a href="#"><span>a</span></a></div>
<div class="letter p03"><a href="#"><span>l</span></a></div>
<div class="letter p04"><a href="#"><span>l</span></a></div>
<div class="letter p05"><a href="#"><span> </span></a></div>
<div class="letter p06"><a href="#"><span>m</span></a></div>
<div class="letter p07"><a href="#"><span>e</span></a></div>
<div class="letter p08"><a href="#"><span> </span></a></div>
<div class="letter p09"><a href="#"><span>c</span></a></div>
<div class="letter p10"><a href="#"><span>r</span></a></div>

CSS：

body {
  background:#FFF;
  font-family:Arial, Sans-serif;
  font-size:1.0em;
  height:100%;
  width:3000px;
  padding:0px;
  margin:0px;
  }

a {
  color:#000;
  }


.letter a:hover {
  background:#FFF;
  }

.letter {
  font-size:70px;
  width:40px;
  float:left;
  height:999px;
  }

a {
  padding:0px 0 999px 0;
  display:block;
  text-decoration:none;
  }

a span {
  visibility:hidden;
  }

a:hover span {
  visibility:visible;
  }

.p01 a {
  background:#ACF;
  padding-top:350px;
  }


.p02 a {
  background:#BDE;
  padding-top:340px;
  }

.p03 a {
  background:#CED;
  padding-top:320px;
  }

.p04 a {
  background:#DFC;
  padding-top:280px;
  }

.p05 a {
  background:#EEB;
  padding-top:260px;
  }

.p06 a {
  background:#FDA;
  padding-top:250px;
  }

.p07 a {
  background:#ECB;
  padding-top:260px;
  }

.p08 a {
  background:#DBC;
  padding-top:280px;
  }

.p09 a {
  background:#CAD;
  padding-top:320px;
  }

.p10 a {
  background:#BBE;
  padding-top:340px;
  }

分别设置对应每个字母的颜色和格式