演習: CSS の 90% は、淘宝網電話 recharge_html/css_WEB-ITnose などのクイック アプリケーション バーを実装しています。

効果:

主な機能は次のとおりです:

1. グリッドデザイン

2. 電話料金を再請求するための専用の 2 行 2 列
3. マウスがアニメーションに移動すると電話料金を再請求しますフォント縮小あり
4. 電話料金をチャージします 1 行目の 4 つのアプリケーションをマウスで移動すると、アイコンがポップアップします
5. 1 行目の 4 つのアプリケーションをマウスで移動すると、さらに多くのアプリケーション コンテンツが表示されます

この記事の価値 1. HTML 構造と CSS ロジックの観点から、参照とコミュニケーションのための独自のアイデアをいくつか用意します 2. に精通します。 CSS トランジションとアニメーションのシンプルなアプリケーション
3. フローティングと負のマージン値を使用してこのグリッド効果を実現する方法を学びます
4. 使用量を減らして、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 でラップされ、それを識別するためにツールボックス クラスが追加されます。コンテナ
2.toolbox>ul 。この ul 要素に CSS クラスを追加する必要はありません。需要を考慮して、toobox の子要素には他の要素が含まれないためです。この ul にスタイルを追加したい場合は、単に使用します。子要素セレクター

3. 各 li 要素が追加されます。クラスは、一方では構造を明確にするためのものであり、他方では、一部のアプリケーションには特定のコンテンツを含む div も含まれる可能性があるためです。 li 要素を使用して実装されるため、アプリケーションに直接関係するものを理解する必要があります。これにより、li 要素に設定されたスタイルがより深い子孫の li 要素に影響を与えないようになります。 li 要素の下の、a、div、i、p はすべて CSS クラスを追加する必要があります。同じ理由です
4. tb-item はアプリケーションを表し、電話請求書に対応する tb-item が 2 行 2 列を占めることを考慮します。 、2 つの別個のクラス、tb-rs-2 と tb-cs-2 が追加され、行スパンまたはコルスパンが 2 であることを示します。コメントがあると、名前が少し単純になります。コードを理解するのは難しくありません。もともと、この複数行および複数列のクラスをより柔軟にするために、使用するループとミックスインを減らしたかったのですが、これはまだ実装が簡単ではありません。 。 。 。
5. li のすぐ下の要素は a 要素です。フォント サイズ、色、アイコンのフラッシュ アニメーション効果は、a 要素のホバー疑似クラスを使用して実装する必要があるためです。
6. a 要素には他の補助クラスもあります-big の機能は、tb-item-hbox などの大きなフォントを表示する必要があるアプリケーションを処理するために使用することです。これは実際には tb-item-hasbox の略語であり、さらに多くのコンテンツを含めるには、tb-item-huafei、tb-item-youxi などのボックスが必要です。これは、各アプリケーションを個別に識別するために使用されます。ボックス内のボックスが表示されるとき、ボックスの左右の境界線が常にツールボックスの側面と一致するように、左側の値を「異なるコントロールを取得」に設定できます。
7. a 要素には 2 つの要素があります。最初の要素は tb-item-iwrapper で、ボックスが表示されるときに iwrapper 要素を使用することが目的です。要素の下部はボックスの境界上部の一部を覆うことができるため、この要素とボックスが接続されているように見えます。これは言うまでもありません。これら 2 つの要素は絶対に配置されます。デフォルトでは、上位の値は親要素の 100% になります。親要素がマウスを移動すると、tb-item-box が表示されます。次に左側をコントロールするなど、微調整を行って効果を得ることができます。
8. グリッドを実装するには、次の手順を実行します。各 tb-item に境界線を設定し、それらをすべて左にフロートさせ、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 の目的は、たとえばマウスが上をスライドしたときに実現することです。ゲームアプリ、電話料金 アプリのアイコンを大きなアイコンサイズではなく、通常のフォントサイズに設定できます。