练习：90%的css实现淘宝话费充值等快捷应用栏_html/css_WEB-ITnose

效果：

主要的功能有：

1. 网格设计
2. 充话费独占2行2列
3. 充话费鼠标移入有字体缩小的动画
4. 充话费等第一行的四个应用鼠标移入时，图标会向上弹一下
5. 充话费等第一行的四个应用鼠标移入时，会有更多的应用内容以框的显示显示在该应用下面，如：

本文的价值：
1. 在html结构，css逻辑方面，有一些自己的想法可供参考和交流
2. 熟悉css的transition和animation的简单应用
3. 学习如何通过浮动和负的的margin值，实现这种网格效果
4. 学习如何利用less，编写更加清晰和易于修改的css
5. 见识下淘宝的iconfront的威力

html结构：该找个演示代码的工具了。。。贴代码不好

                

									
												
充值
					
												
			
									
												
游戏
					
												
			
									
												
旅行
					
												
			
									
												
保险
					
												
			
									
												
彩票
					
							
                     ...		

最后几个省略，跟彩票应用实现相同。

结合html结构，描述下实现思路，主要是各个html元素的作用和css类的组织：

1. 整个应用包裹在div里，加了一个toolbox的类标识它这个容器
2. toolbox>ul，这个ul元素没有必要加css类，因为toobox的子元素从需求考虑不会再有其它元素，如果要对这个ul添加样式，利用子元素选择器即可
3. 每个li元素都加了一个类，一方面是为了结构更加清晰，另一方面是因为有些应用内部还会有div包括它的具体内容，这些内容很有可能也会用li元素来实现，所以要对跟应用直接相关的li元素添加css类，以便对它设置的样式不会影响更加深远的后代li元素，其实因为这个原因，li元素下面的a，div，i，p都必须加css类，道理同理
4. tb-item表示一个应用，同时考虑到话费对应的tb-item，占了两行两列，所以单独加了两个类tb-rs-2,tb-cs-2，表示rowspan或colspan为2，命名简便了点，有注释的话，代码就不难理解了，原本是想借助less的循环和mixin，将这个占多行多列的类做的更加灵活，从实际结果来看，这个还是不太好实现。。。。
5. li下面直接元素是a元素，因为字体大小，颜色和图标闪一下的动画效果都需要利用a元素的hover伪类实现
6. a元素还有一些其他的辅助类，如tb-item-big的作用是可以利用它，对需要显示大字体的应用进行处理，如tb-item-hbox，其实是tb-item-hasbox的简写，意思是它里面还有更多的内容，需要一个box来包裹，所以它里面has a box，如tb-item-huafei，tb-item-youxi，这个是用来单独标识每一个应用的，利用它可以实现它里面的box在显示的时候，left值可以得到不同的控制，以便box的左右边框总是能够跟toolbox的两边重合。
7. a元素里面有两个元素，第一个元素时tb-item-iwrapper，它把tb-item-icon和tb-item-text包裹起来，目的是为了在显示box的时候，这个iwrapper元素的底部能够把box的border-top盖住一部分以便，这个元素与box看起来是一种连通的效果；第二个元素是tb-item-box，这个没啥好说的。这两个元素都是绝对定位的，默认的时候tb-item-box不会显示，top值为父元素的100%，当父元素hover的时候，tb-item-box就会显示出来了。然后控制好left等等，微调之后就能实现效果了。
8. 网格的实现，可以这么干：每个tb-item都设置border，然后全部左浮动，并且都设置margin-top: -1px ,margin-left: -1px就搞定了。

css代码实现：

@import (inline)"icon-font.css";* {  box-sizing: border-box}@tb-cols: 5;//5行@tb-rows: 3;//3列@tb-item-width: 59px;//每个item的宽@tb-item-height: 78px;//每个item的高@tb-item-bdcolor: #EAEAEA;//item默认的边框颜色@tb-item-icon-small-size: 24px;//图标默认的字体大小@tb-item-icon-big-size: 60px;//大图标的字体大小body {    font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',sans-serif;}/*设置整站的a元素，ul元素，li元素的默认样式*/a {  text-decoration: none;}ul {  list-style: none;}ul,li {  margin: 0;  padding: 0;}//以上元素应该在整站做一些整体样式的设置，以便整个网站的风格能够一致@-webkit-keyframes toTopFromBottom {  49% {    -webkit-transform: translateY(-100%);  }  50% {    opacity: 0.3;    -webkit-transform: translateY(40%);  }  51% {    opacity: 1;  }/* 假如动画动画声明的时候使用了forwards，在动画结束后，元素将保持在to定义的状态，如果没有定义to这个状态，即使配置了forwards，元素在动画结束后会回到起始状态   意思就是本例中，不使用forwards也没有关系  to {    opacity: 0.3;  } */}//从bootstrap中找出来的清除浮动的mixin.clearfix() {  &:before,  &:after {    content: " ";    display: table;  }  &:after {    clear: both;  }}//forwards 参考:http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp，.toTopFromBottom() {  -webkit-animation: toTopFromBottom 0.3s forwards;  -moz-animation: toTopFromBottom 0.3s forwards;  animation: toTopFromBottom 0.3s forwards;}.toolbox {  //这部分样式设置其实是根据需求定的，比如宽度跟定位，本例只是为了实现效果，毕竟这个toolbox的样式不太关键  width: 600px;  height: 600px;  position: fixed;  top: 50%;  left: 50%;  margin-left: -300px;  margin-top: -300px;  //组件内部可能还包含有其它的ul，li，p，a，i等元素，先用元素选择器定义一些统一的样式，针对不同位置的元素，可以结合类选择器来单独定义  //设置本组件内p元素的默认样式，之所以不设置在外面，是因为不是整站的p元素都需要清掉padding和margin，段落还是带一些行距要好看些  p {    margin: 0;    padding: 0;  }  ul {    //根据行列数跟每个item的高宽计算整个ul元素的高宽    width: @tb-item-width * @tb-cols - @tb-cols + 1;    height: @tb-item-height * @tb-rows - @tb-rows + 1;    .clearfix();  }  .tb-item {    float: left;    width: @tb-item-width;    height: @tb-item-height;    border: 1px solid @tb-item-bdcolor;    margin-left: -1px;    margin-top: -1px;    position: relative;    //定义占两列的item宽度    &.tb-cs-2 {        width: @tb-item-width * 2 - 1;    }    //定义占两行的item高度    &.tb-rs-2 {      height: @tb-item-height * 2 - 1;    }  }    .tb-item-wrapper {    text-align: center;    &,& .tb-item-iwrapper {      position: absolute;      top: 0;      right: 0;      left: 0;      bottom: 0;    }    & .tb-item-iwrapper {      overflow: hidden;    }    //图标    .tb-item-icon {      display: block;      color: #ff4400;      font-size: @tb-item-icon-small-size;      margin-top: 12px;    }    //文本    .tb-item-text {      transition: color 0.3s ease-in-out;      color: #6c6c6c;    }    //大图标    &.tb-item-big .tb-item-icon {      font-size: @tb-item-icon-big-size;      transition: font-size 0.3s ease-in-out;    }    .tb-item-box {      position: absolute;      display: none;      background-color: #fff;      top: @tb-item-height - 2;      height: @tb-item-height * 2 - 1;      width: @tb-item-width * @tb-cols - @tb-cols + 1;      border: 1px solid #ff4400;      z-index: 1;    }    //以下几处控制每个应用的box的left    &.tb-item-huafei .tb-item-box {           left: -1px;    }    &.tb-item-youxi .tb-item-box {           left: -@tb-item-width * 2 + 1;    }    &.tb-item-lvxing .tb-item-box {           left: -@tb-item-width * 3 + 2;    }    &.tb-item-baoxian .tb-item-box {           left: -@tb-item-width * 4 + 3;    }    &:hover .tb-item-text {      color: #ff4400;    }    //定义带box的wrapper元素hover时候的样式，主要是为了显示红色的边框，并且盖住父的item元素的边框    &.tb-item-hbox:hover {      top: -1px;      left: -1px;      bottom: -1px;      right: -1px;      border: 1px solid #ff4400;      z-index: 1;      .tb-item-iwrapper {              bottom: -1px;        z-index: 2;        background-color: #fff;      }    }    &.tb-item-big:hover .tb-item-iwrapper {              bottom: @tb-item-height - 2;    }    &.tb-item-hbox:hover .tb-item-box {      display: block;    }    &.tb-item-big:hover .tb-item-icon {      font-size: @tb-item-icon-small-size;    }    &:hover .tb-item-icon {      .toTopFromBottom();    }  }  //tb-on的添加和删除是通过js控制的，完全通过css做实现不了，主要是为了鼠标在滑入游戏，保险，旅行等item时，话费item的文字大小能够跟它们保持一致  &.tb-on {    .tb-item-big {      .tb-item-icon{        font-size: @tb-item-icon-small-size;      }    }  }}

Js部分：

这个tb-on的作用是为了实现，比如鼠标滑过游戏这个应用，话费这个应用的图标能够设置成普通的字体大小而不是大图标大小。