高度なテクニック

1·精霊図

1.設計原稿に基づいて箱の大きさ(幅と高さ)を明確にする.ピクセルシェフなどのツールを使用して画像オフセット座標を測定します.3.レイアウト時にボックスに割り当てる:width、height、backgroundプロパティ:

width: 60px;
height: 60px;
background: url(./images/sprites.png) no-repeat -px -px;

2・フォントアイコン

Webサイト:

icomoonライブラリhttps://icomoon.io/(opens new window)

iconfontアリワードライブラリhttps://www.iconfont.cn/

第一歩:ウェブサイトにフォントアイコンをダウンロードして、ダウンロードパッケージの中のfontsフォルダをページのルートディレクトリの下に入れます
ステップ2:フォントアイコンの導入、フォントファイルパスの問題に注意

"en">
  
    "UTF-8" />
    "viewport" content="width=device-width, initial-scale=1.0" />
    
    
  
  
    
       or    '\eqie'
  

3・css三角形

の三角形の形成は、幅が0の箱の色枠とtransparent透明枠の太さが互いに構成する、本質は長方形である.

行の高さとフォントを設定して、互換性を保証します:line-height: 0; font-size: 0;

4・マウススタイル

cursor: default;     
cursor: pointer;   
cursor: move;   
cursor: text;   
cursor: not-allowed;   
cursor: zoom-in;   （    js  ）
cursor: zoom-out;   （    js  ）

5・フォームアウトライン

input { outline: none; }フォームに追加すると、デフォルトの青い枠を取り除くことができます.

6・フォームフィールドのドラッグ禁止

textarea{ resize: none; }

7・画像の文字揃え

vertical-alignプロパティvertical-align: top | middle | baseline | bottom vertical-align:上部|中部|ベースライン|下部
画像の下部にある空白の解決策

ピクチャにvertical-align: top | middle | bottomを追加しても行内、行内ブロック要素の底部の隙間

を解決することができる.

画像をブロックレベル要素display:blockに変換する.

8・オーバーフロー文字省略記号表示

1行テキストオーバーフロー

/* 1.          ，   normal       */
white-space: nowrap;

/*2 .         */
overflow: hidden;

/* 3.               */
text-overflow: ellipsis;

マルチテキストオーバーフロー

/* 1.         */
overflow: hidden;

/* 2.               */
text-overflow: ellipsis;

/* 3.            */
display: -webkit-box;

/* 4.                  */
-webkit-line-clamp: 2;

/* 5.                     */
-webkit-box-orient: vertical;

多行文字オーバーフローは互換性の問題があり、実際の作業ではバックエンドの完了を推奨し、バックエンドは文字数を制限することができる.

9・margin負の値で箱の枠を解決する

float: left; margin-left: -1px;
マウスを箱に置いて枠を表示

箱は

に位置決めされていません

ul li:hover {
     
  position: relative;
  border: 1px solid color;
}

箱には

の位置決めがある

ul li:hover {
     
  z-index: 1;
  border: 1px solid color;
}