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

效果：

主要的功能有：

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

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

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

<div class="toolbox">                <ul>			<li class="tb-item tb-rs-2 tb-cs-2">				<a class="tb-item-wrapper tb-item-big  tb-item-hbox tb-item-huafei" href="javascript:;" title="话费充值">					<div class="tb-item-iwrapper">						<i class="tb-item-icon iconfont icon-icon"></i>						<p class="tb-item-text">充值</p>					</div>					<div class="tb-item-box">					</div>				</a>			</li>			<li class="tb-item">				<a class="tb-item-wrapper tb-item-hbox tb-item-youxi" href="javascript:;" title="游戏充值">					<div class="tb-item-iwrapper">						<i class="tb-item-icon iconfont icon-youxi"></i>						<p class="tb-item-text">游戏</p>					</div>					<div class="tb-item-box">					</div>				</a>			</li>			<li class="tb-item">				<a class="tb-item-wrapper tb-item-hbox tb-item-lvxing" href="javascript:;" title="旅行">					<div class="tb-item-iwrapper">						<i class="tb-item-icon iconfont icon-hanglvxingye"></i>						<p class="tb-item-text">旅行</p>					</div>					<div class="tb-item-box">					</div>				</a>			</li>			<li class="tb-item">				<a class="tb-item-wrapper tb-item-hbox tb-item-baoxian" href="javascript:;" title="保险">					<div class="tb-item-iwrapper">						<i class="tb-item-icon iconfont icon-baoxian"></i>						<p class="tb-item-text">保险</p>					</div>					<div class="tb-item-box">					</div>				</a>			</li>			<li class="tb-item">				<a class="tb-item-wrapper" href="javascript:;" title="彩票">					<div class="tb-item-iwrapper">						<i class="tb-item-icon iconfont icon-caipiao"></i>						<p class="tb-item-text">彩票</p>					</div>				</a>			</li>                     ...		</ul>	</div>

로그인 후 복사

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

结合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代码实现：

<strong>@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;      }    }  }}</strong>

로그인 후 복사

Js部分：

<script type="text/javascript"> (function() { var $tb = $('.toolbox'); var toggleTb = function(e){ $('.toolbox').toggleClass('tb-on'); } $('.toolbox').on('mouseenter','.tb-item-hbox',toggleTb).on('mouseleave','.tb-item-hbox',toggleTb); })(); </script>
로그인 후 복사

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

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