wulin.com（www.vevb.com）記事はじめに：Webページの制作スキル：XHTML、CSS、JS。
詳細 1………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………1.テキストと画像が同じ行にある場合、テキストは写真の下部と一致する必要があり、次のように書く必要があります。
<li>パスワードを覚えておいてください<img src = align = bottom style = margin-bottom：-4px/> </li>
2。テキストと写真が同じ行にある場合、テキストと写真をこのように中央に置いて書く必要があります。
<li>パスワードを覚えておいてください<img src = static/img/xyx.jpg align = middle/> </li>
3。IEビューソースコードメニューによって開かれたエディターを変更する
レジストリエディターを開き、Start-RunでRegEditを入力します
次の場所を見つけます：hkey_local_machinesoftwaremicrosoftインターネットエクスプローリヴィューsourceeditoreditor名デフォルトデータをDに変更します：プログラムfilesemeditoremeditor.exe
IEに切り替えてソースコードを表示すると、効果が表示されます。
View Source EditorEditor名のアイテムにそれがない場合、自分で作成できます。
4.ウィンドウを自動的に最大化し、<body>と</body>の間に追加します。
<スクリプト言語= javascript>
setimeout（ 'top.moveto（0,0）'、5000）;
setimeout（ 'top.resizeto（screen.availwidth、screen.availheight）'、5000）;
< /script>
5。window.openerは、実際にはwindow.openで開く形式の親の形です。
たとえば、親フォームのparentformで、pass window.open（subform.html）、次にsubform.html window.openerでpass
それは親の形を意味し、親フォームの値を設定するか、この方法でJSメソッドを呼び出すことができます。
1、window.opener.test（）; ---親フォームのtest（）メソッドを呼び出します。
2。window.openerが存在する場合、stockboxの値をparentformに設定します。
if（window.opener &&！window.opener.closed）
{
window.opener.document.parentform.stockbox.value = symbol;
}
6.ページを更新する方法
JavaScriptでページを更新する方法：
1 history.go（0）
2 location.reload（）
3場所=場所
4 location.Assign（場所）
5 document.execcommand（ 'refresh'）
6 Window.Navigate（場所）
7 location.replace（場所）
8 document.url = location.href
ページを自動的に更新する方法：
1.自動ページの更新：<メタhttp-equiv = refresh Content = 20> <head>領域に追加
2。自動ページジャンプ：<メタhttp-equiv = reffresh content = 20; url = http：//www.webjx.com> <head>領域に
3.JSはページを自動的に更新します
<スクリプト言語= javascript>
機能myrefresh（）
{
window.location.reload（）;
}
setimeout（ 'myrefresh（）'、1000）; // 1秒で1回更新を指定します
< /script>
4.JS更新フレームワーク
a）フレームを含むページを更新します
<スクリプト言語= javascript>
parent.location.reload（）;
< /script>
b）チャイルドウィンドウは親ウィンドウを再表示します
<スクリプト言語= javascript>
self.opener.location.reload（）;
< /script>
（または<a href = javascript：opener.location.reload（）>更新</a>）
c）別のフレームのページを更新します
<スクリプト言語= javascript>
parent.another frameid.location.reload（）;
< /script>
7. CSSハッキングを使用している場合は、アンダースコアの命名がハッキングであることを知っておく必要があります。 _styleを使用すると、IEの外側のほとんどのブラウザがこのスタイルの定義を無視することができるため、ネーミングが標準化されていない場合は_をセパレーターとして使用することができます。 CSSチェックを実行するときにエラーメッセージが表示されます。
8。つまり、条件付き注釈作成方法
<！ - [if！ie]> ie <！[endif] - >を除いて認識できます
<！ - [ie]>すべてのIEが識別可能です<！[endif] - >
<！ - [ie 5.0]> ie 5.0のみが<！[endif] - >を認識できる場合
9。CSSハックライティング方法
最初のタイプ：
.div {
背景：オレンジ;
*背景：緑！重要。
*背景：青。
}
2番目のタイプ：
.div {
マージン：10px;
*マージン：15px;
_Margin：15px;
}
3番目のタイプ：
#div {color：＃333; }
*+html #div {color：＃999; }
* HTML #DIV {color：＃666; }
詳細2……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….. ……………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………
1。IE6および以下は、次のことを認識していません。タグの外側のホバー擬似クラス。 IE7のFirefoxでは、効果を正しく達成できます。解決：
#show li.s1 {border：1px solid＃ff9900;背景：＃454242;}
#show li.s2 {border：1px solid＃d9d8d8;背景：＃312e2e;}
<li> </li>
2.要素のhaslayoutを設定します
多くのIE6（またはIE7）の問題は、Haslayout値を設定することで解決できます。要素のHaslayout値を設定する最も簡単な方法は、CSSの高さまたは幅を追加することです（もちろん、ズームも使用できますが、これはCSSの一部ではありません）。たとえば、高さに設定：1％。親要素が高さを設定しない場合、要素の物理的な高さは変わりませんが、すでにhaslayoutプロパティがあります。
3。IE6で文字が繰り返し表示されます
ディスプレイ：インラインがフローティング要素に設定されていることを確認してください。
マージン右：フローティング要素で-3pxを使用します。
4。スタイルの優先順位
1。インラインスタイル[1.0.0.0]
2。IDセレクター[0.1.0.0]
3。クラス、属性、擬似クラスセレクター[0.0.1.0]
4。要素タグ、擬似エレメントセレクター[0.0.0.1]
5。CSS垂直中心の1つの要素の作成方法
#exm {
位置：絶対;
左：50％;
トップ：50％;
z-index：1;
幅：200px;
高さ：100px;
マージン左：-100px;
マージントップ：-52px;
}
6。ズーム：通常|番号
オブジェクトのスケーリング比を設定または取得します。レンダリングされたオブジェクトのこのプロパティ値を設定または変更すると、オブジェクトを取り巻くコンテンツが再び流れます。このプロパティは継承可能ではありませんが、オブジェクトのすべての子オブジェクト（子供）に影響します。
7.画像とテキストが並んで配置される場合、画像テキストは垂直に中央に配置する必要があります。
1> set line-height：画像の高さ、または画像の親要素の高さまで。
2>次に、垂直アライインを設定します：写真のCSSの中央。
8。LI要素にIMG要素が含まれている場合、IE6の下に空白が表示されます
解決策1
Liが浮かんで、IMGをブロックレベルの要素に設定します
解決策2
ULのフォントサイズを設定：0;
ソリューション3
IMGの垂直アライインを設定します：bottom;
解決策4
IMGのマージンボトムを設定：-5px;
詳細3………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….. ……………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………
1.クリックして訪問されたハイパーリンクスタイルには、ホバーとアクティブがありません
解決策：CSS属性の順序を変更：LVHA
2。FFの下の連続した長いフィールドを自動的にラップすることはできません
解決策：Word-wrap：Break-word; Overflow：Hidden;
3.親コンテナの高さはFFの下で適応できません
解決策：子要素の浮きを片付けます
4. IEの下の写真の下にギャップが生成されます
解決策：IMGをディスプレイとして定義します：ブロック、または垂直アライインは、トップ/ボトム/ミドル/テキストボトムとして
親コンテナのフォントサイズをゼロに定義します。フォントサイズ：0
5. IE6の下のフローティング要素とその隣接する非強化要素の間には3pxのギャップがあります。
解決策：隣接する非強化要素も浮かぶように設定されています。
フローティング要素は、IE6_Margin-right：-3pxに対して定義されています。
6. LI含有量は、長すぎた後に楕円に表示されます。
解決策：ホワイトスペース：Nowrap; （テキストはラップしません）テキストオーバーフロー：ellipsis; -o-text-overflow：ellipsis;オーバーフロー：隠し;
7.テキストを垂直に中央に配置することはできません
解決策：ラインの高さと容器の高さは、ラインハイト=高さと等しい。
8。テキスト入力ボックスは、隣接するテキストに合わせることはできません。
解決策：テキスト入力ボックスの設定Vertical-Align：Middle;
9。つまり、スクロールバースタイルを設定します
解決：
体{
Scrollbar-Face-Color：＃f6f6f6;
Scrollbar-Highlight-Color：#fff;
Scrollbar-Shadow-Color：#eeeeee;
Scrollbar-3dlight-color：#eeeeee;
Scrollbar-Arrow-Color：＃000;
Scrollbar-Track-Color：#ffff;
Scrollbar-Darkshadow-Color：#fff;
}
10。IE6は1pxの高さのコンテナを定義できません
解決策：オーバーフロー：隠されています
ズーム：0.8
ラインハイト：1px
詳細 4………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………
1.フラッシュにレイヤーを表示します
解決策：透過<パラメーションname = wmode値=透過 />または<param name = wmode値= opaque /> frashの設定
2.ブラウザの垂直に中央に置かれたレイヤーを作成します
解決策：外部パッチの負の値を持つ絶対的な位置率の割合を使用します。
位置：絶対;
トップ：50％;
左：50％;
マージン：-100px Auto Auto -100px;
幅：200px;
高さ：200px;
3.お気に入りに追加します
解決策：<script type = text/javascript>
// <！[cdata [
function bookmark（）{
var title = document.title
var url = document.location.href
if（window.sidebar）window.sidebar.addpanel（title、url、）;
else if（window.opera && window.print）{
var mbm = document.create_r_relement_x（ 'a'）;
mbm.setattribute（ 'rel'、 'Sidebar'）;
mbm.setattribute（ 'href'、url）;
mbm.setattribute（ 'title'、title）;
mbm.click（）;}
else if（document.all）window.external.addfavorite（url、title）;
}
//]]>
< /script>
<a href = javascript：bookmark（）>お気に入りに追加</a>
詳細5…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….. ……………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………
1.一般的なニュースリストを書く方法：
<ul class = list>
<li> <Span> 2006年6月6日</span> <a href =＃>ニュースタイトル01 </a> </li>
<li> <Span> 2006年6月6日</span> <a href =＃>ニュースタイトル02 </a> </li>
<li> <Span> 2006年6月6日</span> <a href =＃>ニュースタイトル03 </a> </li>
<li> <Span> 2006年6月6日</span> <a href =＃>ニュースタイトル04 </a> </li>
< /ul>
2.ieはページの背景グラデーションを実装しています（FFとクロムはサポートしません）
上から下へ：
body {filter：progid：dmimagetransform.microsoft.gradient（gradienttype = 0、startcolorstr =＃ffffff、endcolorstr =＃000000）;}
左上から右上：
フィルター：alpha（style = 1、Opacity = 25、finantopacity = 100、startx = 50、finishx = 100、starty = 50、finishy = 100）;背景色：Skyblue;}
左から右
body {filter：progid：dmimagetransform.microsoft.gradient（gradienttype = 1、startcolorstr =＃ffffff、endcolorstr =＃000000）;}
上から下へ
style = filter：progid：dmimagetransform.microsoft.gradient（gradienttype = 0、startcolorstr = blue、endcolorstr = white）;
3.ホバーのスタイルはさまざまな効果を実現し、柔軟に使用できます
＃outer a {border：1px solid＃069;}
#outer A：Hover {Border：1PX Dashed＃C00;}
4. border：なし;境界線からの違い：0
理論的なパフォーマンスの違い：
ボーダー：0;ボーダーを0ピクセルに設定しますが、ページでは見えませんが、Borderのデフォルト値に応じて、ブラウザは依然としてBorder-Width/Border-Colorをレンダリングします。つまり、メモリ値が占有されています。国境：なし;境界線をなしに設定します。つまり、ブラウザがなしに解析する場合、レンダリングアクションはありません。つまり、メモリ値は消費されません。
互換性の違い：
互換性の違いは、ブラウザIE6、IE7、タグボタン、入力のみであり、これはWin、Win7、およびVistaのXPテーマの下で発生します。国境がない場合、IE6/7の無効な境界線がまだ存在するようです。境界線が0の場合、それは誰よりも効果的であると感じます。すべてのブラウザは一貫して国境を非表示にします。
国境を作る方法：なし;完全に互換性がありますか？同じセレクターに背景属性を追加するだけです
5.CSSは、マルチカラムの輪郭レイアウト、正の内側の縁、負の外側の縁を実装しています
輪郭を達成するために必要な各列にスタイルを適用します：.e {padding-bottom：32767px;マージンボトム：-32767px;}
6.ポジション：相対的;特別な使用法？ ？ ？ ？
* {マージン：0;パディング：0;フォント：通常12px/25px songti;}
ボディ{背景：＃f8f8f8;}
ul {list-style：none; width：300px; height：25px; margin：20px auto;}
li {float：left; width：86px; height：25px; text -align：center; margin：0 -5px; display：inline;}
{color：#ffff;フロート：左;幅：86px; height：25px; top：0; left：0; background：url（***。gif）センターセンターノーレピート;}
A：Hover {color：＃000; background：url（***。gif）0 0 no-repeat; width：86px; position：relative;}
詳細6…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….. ……………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………
1。innertext：開始位置から終了位置までのコンテンツには、タグinnerhtmlが含まれていません
outerhtml：innerhtmlとタグが含まれています
<div id = test> <span> test1 </span> test2 </div>
test.innertext：test1 test2
test.innerhtml：<span> test1 </span> test2
test.outerhtml：<div id = test> <span> test1 </span> test2 </div>
2。番号（）：非数値文字を含む文字列がパラメーターとして使用される場合、結果はnanになります
parseint（）：文字列を左から右にできるだけ低い数値に変換します。
isnan（）：パラメーターが数字ではない場合にtrueを返します。
3。a= 23.50ABC
typeof（a）=文字列
parsefloat（a）= 23.5
parseint（a）= 23
番号（a）= nan
4.JS変数名には、ドル記号が覆われた数字が含まれており、数字で始めることができません
5。getelementsbytagname_r（）は、ドキュメントが読み込まれた後に取得する必要があります
6。NodeType：12種類、1つは要素ノードを表し、3はテキストノードを表します
nodename：ノード名を表します。テキストノードの場合、#textを意味します
Nodevalue：ノードの値を表します
例：ノードを取得する場合（obj.nodename.tolowercase（）== 'li'）{}
P document.getElementsbytagname_r（ 'p'）[0]のテキストコンテンツを変更します。firstchild.nodevalue= ''
7。子ノードへの子ノード
チャイルドノード：より深い子ノードを除く要素内のすべての第1レベルの子ノードのリスト
obj.firstchild = obj.childnodes [0]
obj.lastchild = obj.childnodes [obj.childnodes.length-1]
haschildnodes（）要素に子供がいるかどうかを決定し、ブール値を返します
7。子ノードから親ノードへ
var parentelm = mylinkitem.parentnode;
while（parentelm、classname！= 'syna' && parentelm！= 'document.body'）
parentelm = parentelm.parentnode
8.要素プロパティを変更します
1）オブジェクトプロパティの形式で取得または設定する
var mainimage = document.getElementByIdx_x（ 'nav'）。getElementsByTagname ['img'] [0];
mainimage.src = '';
mainimage。;
2）getattribute（）およびsetattribute（）メソッドを使用します
詳細7………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….. ……………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………
1。数字をx 10進数の機能を丸くするフォームに変換します（ベース、精度）
{var m = math.pow（10、precision）;
var a = math.round（base*m）/m;
aを返します。
}
var n = 3.942487;
roundto（n、3）= 3.942
roundto（n、0）= 3
2。制約された乱数を作成します
function randombetween（min、max）
{min+math.floorを返す（math.random（）*（max-min+1））}
3。数字を文字列に変換します
var a = 10;
a = string（a）;/a = a.tostring（）;
4。URLのエンコード
var a =？p = e;
var b = escase（a）;
var c =（b）;
5.ドキュメント内の要素のタイプを変更します
p ---> div
最初にdiv要素を作成し、次にpの子ノードをdivにコピーし、最後にpをdivに置き換えます
6.関数に必要なパラメーターの数
関数add（n1、n2）{}
num = add.length;
7.関数で渡されるパラメーターの数
関数add（n1、n2）{
rutch arguments.length;}
詳細8………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….. ……………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………
1）。ディスプレイ：インラインブロック。名前が示すように、それはインラインのブロック形状であり、高さの幅を設定できます。
.element-class {
ディスプレイ：-moz-inline-stack; // firefoxのみコード
ディスプレイ：インラインブロック。 //いくつかの標準ブラウザー
ズーム：1; // IEのみ
*表示：インライン; // IEのみがこのコードを知っています（CSSハック）
}
2）。フロートを締めます
.CLEARFIX：After {visibility：hisdibility：hidden; display：block; font-size：0; content：; clear：both; height：0;}
.ClearFix {Zoom：1;}
3）。アドレスバーにカスタムアイコンを追加します
まず、16*16ピクセルのサイズのアイコンファイルを事前に作成する必要があります。ファイル拡張子はICOであり、対応するディレクトリにアップロードします。 HTMLソースファイルの間に次のコードを追加します<head> </head>：<link rel = icon name href =画像のアドレス（今すぐディレクトリに対応していることに注意してください）>。もちろん、ユーザーがIE5以降を使用してブラウジングする場合、さらに簡単になります。写真をWebサイトのルートディレクトリにアップロードするだけで、自動的に認識できます！
4）。ディスプレイを設定する場合：IE6のブロックの空の容器は、<P style = height：1px;> </p>など、より小さな高さまで、その高さは特定の値よりも少ないことがわかります。解決策：オーバーフローを設定：非表示。
5）。テキストは省略記号で遮断されています
div {width：200px; height：100px;オーバーフロー：隠された;テキストオーバーフロー：ellipsis;ホワイトスペース：nowrap;}