多くは、通常の表示アイコンと考え、アイコンは単一のアイコンである今、本当にページノルムでページに直接ハングアップする時間を使用し、プロジェクトページで使用される単一のファイルを見つけました。
ブラウザとサーバが限られているため、同時接続数に、サイトはオンラインぶらぶらされ、または速度が低すぎる、と例のアイコンの数が多い場合には、通常は4〜8、アイコンが遅すぎる表示されたり、タイムアウトしています状況が発生します。もちろん、CDNを使用してのような、またはストレージドメインの分散画像ファイルの同時ブラウザの任意の数ではありません、より良い治療であるが、そのような条件を持っていません。
通常、アイコンファイルは、できるだけを行うには、それにもかかわらず、50Kファイルは50 1kのファイルにはまだ非常に支配的にそれらをダウンロードし比較しました。だから、どのように絵のないセグメンテーション機能がないため、ページに表示される画像における単一のアイコンになります。
まず、我々は、アイコン画像は、一般的に、ツリービューで使用されていることを前提としています。
単純なページを行い、必要なフォルダとファイルのアイコンは、両方のdivに表示され、2つのdivを置きます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> </style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>対応するアイコンが明らかにされるように、表示方法は、背景要素として、アイコンに画像を素子サイズの大きさを設定するだけで、画像の左と上の設定。
デフォルトのスタイルを定義し、サイズ指定された要素は、アイコンはまだここに要素のサイズを設定し、32 * 32です。
.tree-default {
width:32px;
height:32px;
}定義されたフォルダアイコン表示スタイルは、背景としてアイコン画像を話す左を調整し、一番上のアイコンの位置に応じて値を調整することです。
.tree-folder {
background: url("images/tree_icons_32px.png") -260px -4px no-repeat;
}定義ファイルのアイコンの表示スタイル、配置されているファイルのアイコンの位置を調整します。
.tree-file {
background: url("images/tree_icons_32px.png") -100px -68px no-repeat;
}スタイル上にある要素を与えます。
<div class="tree-default tree-file"></div>
<div class="tree-default tree-folder"></div>このプロセスは、条件がないわけではないが、あまりにも多くの複数の画像に入れることができるならば、単一の画像圧縮として、すべてではない画面上のアイコン、画像を共通とすることができます。
すべてのコード：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.tree-default{
width:32px;
height:32px;
}
.tree-file{
background: url("images/tree_icons_32px.png") -100px -68px no-repeat;
}
.tree-folder{
background: url("images/tree_icons_32px.png") -260px -4px no-repeat;
}
</style>
</head>
<body>
<div class="tree-default tree-file"></div>
<div class="tree-default tree-folder"></div>
</body>
</html>誰もがあなたが乱雑フルスタックエンジニアによるフロントエンドエンジニア、さらには道になるため大量のリソースを共有するために、簡単で効率的かつ無料の学習に役立つために。フロントエンドエンジニアに必要な知識、（実際のケースを投影するゼロベースからの）いくつかのシニアフロントエンドの開発エンジニアは、動画を録画784783012未払いのシェア：私たちは、フロントエンドのフルスタック学習バックルqunをお勧めするためにここにいます。また、無料の学習リソース受ける
非効率性につながる学習を継続する自信に影響を与え、本当のスタート学習は必然的に開始するためにどこか分かりません。
しかし、最も重要なことは、私がキーテクノロジーを習得する必要があるかわからないで、頻繁に、ピット学習を強化多くの時間を無駄に終わる、それが効果的か、必要な資源です。