この記事は、次のシナリオに適用されます
リーダーはウェブページを指差して言った、これはいいです、そして私たちのページもこのレイアウトとスタイルに従って作られています。現時点では、html + css + jsで直接書き込むのは非常に面倒です。もちろん、最速の方法はWebページを直接コピーすることです。この記事には他のツールは必要ありません。ブラウザの「名前を付けてページを保存」と「ページのソースコードを表示」の2つの関数を使用して、Webページのコピーを取得します。結果は、js関数に関係なく、Webページの外観を見るだけで完全に同じであることを証明します。ページの。
例えば
次のWebページを例にとると、レイアウトは単純ですが、最初から作成する必要があり、デバッグに時間がかかります。
ページを右クリックし、ページのソースコードを
表示します。ブラウザの新しいタブで完全なhtmlファイルが開き、
コンテンツhtml全体がtestindex.htmlにコピーされます。このドキュメントは当社のWebページです。赤いボックスで紹介されたcssファイルとjsファイルディレクトリを削除します。../ .. /これは便利なディレクトリを作成するためのものです。変更後は、testindex.htmlの同じレベルのディレクトリに共通のディレクトリを作成するだけで、testindexを回避できます。 htmlが配置されているディレクトリの外にディレクトリを作成します。
ページのソースコードページでjsファイル名とcssファイル名をクリックすると、以下に示すように、jsファイルが新しいタブで開きます。js cssファイルの内容を対応するファイルにコピーすると、文字化けした文字が最終的な表示に影響し、テストが失敗します。
「
名前を付けてページを保存」を使用して目的のjsおよびcssファイルを作成し、ファイルフォルダーを取得するには、すべてのjsおよびcssを指す矢印があります
。testindex.htmltestindex.htmlカタログディレクトリでjsおよびcssのニーズを確立する必要があります。対応するファイルをコピーします。入っ
てブラウザを開きますtestindex.html
中国の部分が文字化けしていることがわかりました。ファイル変換UltraEdit
変換が再び開き、中国の表示は正常です。ポップアップは、jsとバックグラウンドサービス間の相互作用の問題が原因です。外観をコピーするだけなので、この問題に対処する必要はありません。アクションに対応するjsファイルは後でコメントできます。
画像を表示できないのはまだ悪いです。画像の相対位置はLogin.cssで設定されます。
画像のURLは相対位置から推測できます。ブラウザは、URLを開い
て画像をダウンロードし、ディレクトリに配置します。同時に、css内の画像のディレクトリをurl（ "img / frame / Banner.jpg "）、
ブラウザを更新して、画像も正常に読み込まれることを確認します。他の写真も同じように扱われます
総括する
Webページの外観をコピーする目的を達成できるのは、ブラウザの「名前を付けてページを保存」および「ページのソースコードを表示」機能だけです。すべてのWebページで実行できるかどうかは不明です。
[ページに名前を付けて保存]を使用すると、ページのほとんどの要素を保存することもできますが、ファイルのディレクトリ構造が乱雑になり、メインファイル内のディレクトリの場所が文字化けするため、その後の保守と管理に役立ちません。したがって、メインファイルを直接コピーしたページのソースコードにすることをお勧めします。また、プロジェクトの構造が合理的で明確であり、その後のメンテナンスが便利になるように、pictures、css、およびjsファイルの場所も手動で設定する必要があります。
実際、写真をダウンロードする必要はありません。他の人のオリジナルの写真をWebページで使用することはできません。自分で写真を作成して正しいディレクトリに配置すると、ページに自分の写真が表示されます。
jsファイルにはバックグラウンドサービスとの相互作用が含まれます。外観を模倣するだけで、インポートされたすべてのjsファイルをコメントアウトできます。