ウィザードテクノロジー
サーバーの数を減らすことは、より大きなマップに統合され、いくつかの小さな絵を要求します
花火とPhotoshop CS6の使用はほとんど
どのように使用するには：
主に小さな背景画像、背景画像のため1.大画面に小さな数を統合することです
2.また、スプライトスプライトマップやグラフとして知られている大きな画像
背景位置を使用して、背景画像の位置を移動3.
4.移動距離は、物体xとy軸であります
左に一般下方に移動5.負であります
6.ボックスのサイズを正確に計量します
フォントのアイコン
それでも基本的にテキスト：あなたは、フォント、アイコンのサイズを使用して色変換を変更することができます
ダウンロードフォントのアイコン
http://icomoon.io海外でわずかに遅いです
http://www.iconfont.cnわずかに速く
1.まず、ダウンロードとなっicomoon.zipダウンロードパッケージ
ページを使用して、ルートディレクトリにフォントファイル内のパッケージをダウンロード2.
3.コピーのstyle.cssフォントスタイルのフォントフェイスAFFIRM @
4は、bodyタグで書かれており、あなたのラベルに小さなボックスにdemo.htmlをコピー
してスタイルで指定したラベルのフォントスタイルの開発5.
2を。元の基礎で追加のフォントのアイコン
をクリックし、インポートアイコン- >アップロード新しいファイルselection.json前に選択- >ラインを使用して再作成します
CSSトライアングル練習
無しボックスの1セット高さと幅
境界サイズカセット2境界は、実線の色を提供
右上の左下3.border
指定三角形はその方向に向いている場合4：方向は、透明にいくつかの他の透明として指定されます
.div {
幅：0;
高さ：0;
ボーダー幅：20ピクセル;
ボーダースタイル：固体;
ボーダーカラー：透明透明透明赤。
}
CSSスタイルのユーザーインターフェイス
1.変更するユーザーのマウスカーソルのスタイル
、許可されていないデフォルトのポインタ移動テキスト
https://www.w3cschool.cn/cssref/pr-class-cursor.html
2.キャンセルフォームのアウトラインの
概要：なし
https://www.w3cschool.cn/cssref/pr-outline.html
3.防止フォームフィールドのドラッグ
サイズ変更：なし
https://www.w3cschool.cn/cssref/css3-pr-resize.html
垂直-alignプロパティ
又は画像（行内のインライン要素またはブロック要素）とテキストの垂直方向の配置を設定するために使用されるフォーム
属性：ベースライン、ベースラインアライメント底中央上部
画像ブランクギャップ方式の底を解決
1.長基線アラインメントとしてとして（または、この方法を使用することを推奨）
ブロックレベル要素に2画像（シナ別々のラインが他のボックスのレイアウトに影響を与える可能性があります）
オーバーフローテキストは、省略記号を使用して表示されます
1.単一行のテキストオーバーフロー省略記号
空白：通常のテキストは、オープンラップ切断された場合に
空白：文字表示力行ショーに開いていない場合NOWRAPを
隠さ：オーバーフロー
テキストオーバーフロー：省略記号が表示されるとき、テキストのオーバーフローをellipis
2。複数行のテキスト表示オーバーフロー省略記号
.multipleライン{
幅：200pxの。
表示：-webkit-ボックス。
-webkit-ボックスオリエント：縦;
-webkitラインクランプ：2。
オーバーフロー：隠されました;
}
一般的なレイアウト技術
負の使用を1.margin
2.浮動要素の周りのテキスト
賢いを使用してブロック内の3行
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>使用フォント、アイコン、CSSの三角形の生産、UIスタイル</ TITLE>
<スタイル>
フォント面{@
/ *フォントの宣言* /
フォントファミリ：「icomoon」;
SRC：URL（ 'フォント/ icomoon.eot kaurh3？'）;
SRC：URL（ 'フォント/ icomoon.eot kaurh3＃iefix？'）フォーマット（ '組み込みのOpenType'）、
URL（ 'フォント/ icomoon.ttf？kaurh3'）フォーマット（ 'TrueTypeの'）、
URL（ 'フォント/ icomoon.woff？kaurh3'）フォーマット（ 'WOFF'）、
URL（ 'フォント/ icomoon.svg kaurh3＃icomoon？'）フォーマット（ 'SVG'）;
フォント重量：ノーマル;
フォントスタイル：ノーマル;
フォント表示：ブロック;
}
/ *フォントを指定します* /
スパン{
フォントファミリ：icomoon。
フォントサイズ：100ピクセル;
色：＃ff46a6。
}
.box1 {
ボックスのサイズを開発する/ *最初ではありません* /
幅：0;
高さ：0;
/ * *境界線を指定します/
border-top：20ピクセル固体赤。
border-right：20ピクセル固体グリーン。
border-bottom：20ピクセルソリッドブルー;
国境左：20ピクセル固体deeppink。
}
.box2 {
幅：0;
高さ：0;
ボーダー：は50px固体透明。
border-left：は50px固体deeppink。
マージン：100pxに自動;
}
.jd {
位置：相対;
幅：100ピクセル;
高さ：200pxの。
背景色：小麦。
マージン：300ピクセルのオート;
}
.jdスパン{
位置：絶対;
幅：0;
高さ：0;
ボーダー：10pxの固体透明。
ボーダー底色：小麦。
トップ：-20px;
左：60PX;
}
入力、TEXTAREA {
概要：なし。
}
TEXTAREA {
サイズを変更：なし。
}
IMG {
/ * *ボトムアライメント/
/ *垂直整列：底; / *
垂直整列：中央;
/ *垂直整列：トップ; / *
}
#yy {
垂直整列：中央;
}
.box3 {
幅：150ピクセル;
高さ：80px;
背景色：＃98ffb5。
マージン：自動;
/ * *ラップ/
/ *ホワイトスペース：ノーマル; * /
/ *表示され、通常の事前の取り扱い線要素を空白にしてNOWRAPプリラップ事前ライン* /
ホワイトスペース：NOWRAP。
オーバーフロー：隠されました;
/ *代わりに楕円のディスプレイ上のフィニッシュライン* /
テキストオーバーフロー：省略記号。
}
.box4 {
幅：150ピクセル;
高さ：115px;
背景色：＃ff8b8e。
マージン：自動;
オーバーフロー：隠されました;
テキストオーバーフロー：省略記号。
/ *伸縮性ボックス* /
表示：-webkit-ボックス。
アレンジメント/ *セットまたはオブジェクトテレスコピックボックスサブ要素を取り出します* /
-webkit-ボックスオリエント：縦;
テキスト要素のブロック内の行/ *制限が表示* /
-webkitラインクランプ：3。
}
ULのLi {
位置：相対;
リストスタイル：なし。
フロート：左;
幅：100ピクセル;
高さ：200pxの。
国境：1pxの固体赤。
余白左：-1px;
}
UL李：ホバー{
/リー*あなたは相対的な位置を見つけることができない場合*追加/
位置：相対;
ボーダーカラー：＃ff2b9d。
}
UL李：ホバー{
Liは、Zインデックスに配置されている場合/ *積層順序を向上させるために添加されます* /
Zインデックス：1。
ボーダーカラー：＃ff2b9d。
}
* {
パディング：0;
マージン：0;
}
.box5 {
幅：300ピクセル;
高さ：70ピクセル;
背景色：マゼンタ。
マージン：0自動;
パディング：5pxの;
}
.PIC {
フロート：左;
幅：120ピクセル;
高さ：60PX;
マージン右：5pxの;
}
.PIC IMG {
幅：100％;
}
</スタイル>
</ head>の
<身体>
<！ - 小さなボックスは、フォントのアイコンであります - >
<スパン></ span>の
<スパン></ span>の
<！ - CSSトライアングル生産 - >
<DIV CLASS = "BOX1"> </ div>
<DIV CLASS = "BOX2"> </ div>
<！ - 小さな三角形Jingdongはケースを作ります - >
<のdivクラス= "JD">
<スパン> </ span>を
</ div>
< - ユーザーインタフェース:! 1マウスカーソルのスタイルを変更します - >
<UL>
<LIスタイル= "カーソル：デフォルト">デフォルトのスタイル白マウスます。</ li>
<LIスタイル= "カーソル：ポインタ">小さな手のマウスのスタイルジャンプます。</ li>
<LIスタイル= "カーソル：移動">マウスカーソルスタイルの詳細ます。</ li>
<LIスタイル= "カーソル：テキスト">テキストスタイルにカーソルます。</ li>
<LIスタイル= "カーソル：-許可されていません">禁止スタイルカーソルます。</ li>
</ UL>
<！ - ユーザー・インターフェース：2.入力、入力ボックス青の境界線の色のアウトラインキャンセル：なし - >
<input type = "text">
<！ - ユーザー・インターフェース：3.防止ユーザーがテキストフィールドのサイズ変更をドラッグ：どれもここで最高のラベルが1行に書かれたか、他のギャップはありませんあなたは、彼らがテキストボックスにパディングを設定することができ、ギャップでラップしたい場合は - >
<TEXTAREA名= "" ID = "XX" COLS = "30" 行= "10"> </ TEXTAREA>
<！ - 垂直-alignプロパティ垂直方向の配置を使用して画像とテキスト - >
<IMG SRC = "./ th.jpeg" ALT = "">私はジャッキー粉末午前
<BR>
<TEXTAREA NAME = "" ID = "YY" COLS = "30" 行= "10"> </ TEXTAREA>请你留言
<！ - オーバーフロー省略記号文字表示テキストの1つの行 - >
<のdivクラス= "BOX3">
クリスマスの成果を見て素晴らしいと嘘に決めました
</ div>
<！ - テキストオーバーフロー省略記号複数行のテキスト表示2 - >
科学技術活動の卵カード番号とどのくらいのスペースへの活動時間とお金による<DIVクラス=「box4は」>利用可能ああ開かれたCCBカード拡張スペースと</ DIV>であります
<！ - スキルの共通レイアウトマージン - >
<UL>
<LI> 1 </ LI>
<LI> 2 </ LI>
<LI> 3 </ LI>
<LI> 4 </ LI>
<LI> 5 </ LI>
</ UL>
<BR>
<！ - 浮動要素の周りにテキスト - >
<のdivクラス= "box5">
<のdivクラス= "PIC">
<IMG SRC = "./スクリーンショット％20from％202019-11-20％2014-53-57.png" ALT = "">
</ div>
女性公務員の後に<P>香港非難されるようにバリケードをクリーンアップするために公共の叫びを妨害するためには：ああ。</ P>私を襲いました
</ div>
</ BODY>
</ HTML>
ページ制作
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>制作ページ</ TITLE>
<スタイル>
* {
パディング：0;
マージン：0;
}
.box6 {
テキスト整列：センター;
}
.box6 {
表示：インラインブロック。
幅：36px;
高さ：36px;
背景色：＃f7f7f7;
色：＃333333;
テキスト整列：センター;
行の高さ：36px;
テキスト装飾：なし;
}
.box6 .prev、
.box6の.next {
幅：80px;
フォントサイズ：14px;
}
.box6 .current、
.box6の.elp {
背景色：#FFF;
国境：なし;
}
.box6：ホバー{
背景色：ピンク;
}
.box6入力{
幅：36px;
高さ：25ピクセル;
国境：1pxの固体#CCC。
概要：なし。
背景色：＃f7f7f7;
色：＃333333;
テキスト整列：センター;
}
.box6ボタン{
幅：36px;
高さ：は24px;
国境：1pxの固体#CCCCCC。
概要：なし。
背景色：＃f7f7f7;
色：＃333333;
}
</スタイル>
</ head>の
<身体>
<！ - ブロック巧妙な使用中の一般的なレイアウト技術行 - >
<のdivクラス= "box6">
<a href="#" class="prev"> <<上一页</ A>
<a href="#" class="current"> 2 </a>の
<a href="#"> 3 </a>に
<a href="#"> 4 </a>に
<a href="#"> 5 </a>に
<a href="#"> 6 </a>に
<a href="#" class="elp"> ... </a>の
<a href="#" class="next"> >>下一页する</a>
<スパン> </ span>を
最初に
<input type = "text">
ページ
<スパン> </ span>を
<ボタン>确定</ボタン>
</ div>
</ BODY>
</ HTML>