役に立つcss知識収集

currentColorは、「現在のラベルが継承する文字の色」を表します.
実戦1:背景色透かし技術去年紹介した「CSS背景色透かし技術」は、アイコンの色を簡単にコントロールできるという素晴らしいアイデアです.この記事はdemoに対応して、ここを軽くスタンプしてアクセスできます.このデザインの目的は、マウスhoverの場合、アイコンが文字とともに変色することです.互換性の問題を考慮しなければ、より簡単に実現できるように少し改造することができます.

.icon { 
display: inline-block; width: 16px;
 height: 20px; 
background-image: url(../201307/sprite_icons.png); 
background-color: currentColor; /*            */
}

そこで、マウスhoverの文字リンクがほしいです.そのアイコンの色は一緒に変化し、文字の色を変えるだけでいいです.

.link:hover { color: #333; }/*           ，             */

HTMLの構造は以下の通りである: るマウスhoverは#333であるcurrentColorテキスト色という属性を継承するため、colorの変更はbackground-colorを変更する

meta

ieドキュメントの互換性を表し、ieでのドキュメントの互換性モードを示す

ie 8で正常に表示されないが、古いバージョンのブラウザで正常なモード

を表示するために互換性がある.

contentを通じてieブラウザにie 7の形式をシミュレートしたり、ie 8またはie 9、ie 11の形式でページ

を表示したりすることができることを伝えることができます.

、例えばcontent="IE=EmulateIE8"は、ie 8のモードでページ

をレンダリングする.

ie=edgeは、ieブラウザに最新のモードでページをレンダリングさせ、どれだけ新しく、どれだけ新しいかを強制するためである(ただし、ブラウザが最も高いie 8であれば、ie 8のモードでしかレンダリングできない).

モバイル端末meta必須

ieの低バージョン互換性

cssの中0みんな知っている

htmlの

フォーマットgtが大きい、ltが小さい、gteが等しい、lteが

以下であることは多くない.

px em rem

px画素

em親要素に対して、設定していないとずっと上を探して、強いですが混乱を招きます

rem相対htmlですが、rem ie 678は

をサポートしていません.

html {
    font-size: 62.5%;
    color: #222;
}

このようなremは10 pxになります

7.選択解除

css 3属性の順序は乱れてはいけなくて、さもなくばグーグルはなくて、火狐はありません

::-moz-selection{
    background-color: #b3d4fc;
    text-shadow: none;
}
::selection{
    background-color: #b3d4fc;
    text-shadow: none;
}

7.文字を隠す

.text-hide{
    font:0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

注意その中のtext-hideは文字を隠すため、seoが画像を識別するのに便利です
フローティングのクリア

.clearfix:after,.clearfix:before{
    content:' ';
    display: table;
}
.clearfix:after{
    clear:both;
}

この方法はmarginの重畳を防止することができる.

before利用

.notice a:first-child:before{
    content: '    ：\00a0\00a0';
    color: #aaa;
}

  `\00a0\00a0`         ,  content   `&nbsp`    

文字を改行せず省略する

.notice a:first-child{
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}

デバイス情報

ユーザエージェント文字列コンソール入力navigator.userAgentで関連デバイス情報を取得

テキストが非表示を超えています

{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

アイコンを文字に変換

背景色透かし技術はcurrentColorを用いて「現在のラベルが継承する文字色」を表す.このデザインの目的は、マウスhoverの場合、アイコンが文字とともに変色することです.

.icon {
    display: inline-block;
    width: 16px; height: 20px;
    background-image: url(../201307/sprite_icons.png);
    background-color: currentColor; /*            */
}

そこで、マウスのhover文字リンクがほしいです.アイコンの色は一緒に変化し、文字の色を変えるだけでいいです.

.link:hover { 
color: #333; 
 }

currentColorはテキストの色という属性を継承するため、colorの変更はbackground-colorに変更されます.

margin-topオーバーフローの問題:

エレメントボックスに垂直外側のmargin-topを与えると、親エレメントボックスもmargin-topの値を下に移動します.以下のソリューションがあります.親要素の高さを変更し、padding-topを増やして使いやすいが、間隔はmargin+padding 2になる.親要素にoverflowを追加する:hiddenは特に使いやすく、サブ要素を下に移動するのに相当するが、範囲とサブ要素の大きさに注意しなければならない.親エレメントまたは子エレメントのフローティング(float:left)は使用できますが、親子の位置が変わり、フローティング4になります.親要素にborderを追加すると便利ですが、枠線が変わります.

毛ガラス特効

cssコード

.blur {    
    -webkit-filter: blur(20px); /* Chrome, Opera */
       -moz-filter: blur(20px);
        -ms-filter: blur(20px);    
            filter: blur(20px);    
}
/**--    div--**/
.top-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}
.top-bg img{
    transform: scale(4.0);
}

htmlコード

  
    
 
      ![](./img/37403260_p0.png)