構造とパフォーマンス関連のコンテンツの紹介
HTML の構造 CSS のパフォーマンス JavaScript の動作 Web ページのレイアウトでは、構造、パフォーマンス、動作の分離の原則を考慮する必要があります。まず構造とセマンティクスに焦点を当て、その後、後のメンテナンスと分析を容易にするために CSS、JS などを検討します。
構造と表現の分離という考え方
ジュニア開発者のアイデアと作成方法: div はレイヤーごとにネストされます。中級開発者のアイデアと作成方法: 冗長な div を削除して簡素化します。上級開発者のアイデアと作成方法: HTML の構造を最大限に簡素化します。 html と css の間の適合性を減らすために css を使用して設定します。オーバーフロー：
表示されるデフォルト値。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。
非表示のコンテンツはトリミングされ、残りのコンテンツは表示されません。
スクロール コンテンツはトリミングされますが、ブラウザには残りのコンテンツを表示するためのスクロール バーが表示されます。
auto コンテンツがトリミングされると、ブラウザには残りのコンテンツを表示するためのスクロール バーが表示されます。
継承は、オーバーフロー属性の値が親要素から継承されることを指定します。
text-indentテキストはターゲット位置にインデントされ、テキストに追加のラベルを追加する必要はありません。冗長なコードを減らす
Web デザイン図面を入手したら、まず Web ページのテキスト コンテンツとコンテンツ モジュール間の関係に注意を払います。
設計図のスタイルについてあまり考えずに、セマンティックな HTML コードを書くことに集中してください。
内容に従って HTML が記述されるまで待ってから、スタイルの実装を検討してください。
既存の構造を変えることなく、設計図に求められる視覚効果を完成させます。
マージンには負の値を指定でき、負の値を使用してコンテンツを移動できます。 4方向への動きを実現。
構造 (HTML) とスタイル (CSS) では、まず HTML でコンテンツを記述し、次にマージンを使用して位置を移動して組版を実現し、スタイルと構造の結合を減らし、コードを減らすことができます。
Web ページのスキニングと概要
HTML の CSS への依存を最小限に抑える
Web ページのスキニング: 同じ HTML 構造、異なる CSS スタイル
以下は、Grey Niu WEB の学生からの共有の一部です
私たちが Web ページ制作に初めて触れたとき、HTML は構造を表し、CSS はスタイルを表し、JavaScript は動作を表すことを学びました。Web ページ制作では、構造とパフォーマンスの分離の原則が一般的に強調されてきました。また、分離というのは別のファイルに書いて参照するということでしょうか？もちろんそうではありません。ここでの研究から、分離は単なる方法ではなくアイデアでもあることがわかりました。つまり、X 軸は技術開発を表し、Y 軸は Web ページを表します。技術開発やホームページ制作ニーズに合わせて制作の分離が完了します！
たとえば、家を建てる場合、HTML は家の構造に相当し、CSS はその後の装飾に相当します。Web ページを閲覧するとき、Web ページはすべて 1 つの効果、つまりスタイルに基づいています。レンダリングに応じて異なるため、閲覧するページにはさまざまな種類がありますが、Web ページをどのようにレイアウトすればよいでしょうか?まず第一に、CSS スタイルについてあまり考えず、HTML 構造を合理的、簡潔、セマンティックなものにするよう努めてから、CSS スタイルを追加して改善してください。
私たちがこのページを入手したとき、構造スタイルに対する理解の深さの違いに基づいて、プロデューサーごとに構造スタイルへのリンクが異なり、暫定的に初級、中級、上級の 3 つの異なるレベルに分けられました。
たとえば、このような共通ダイアログ ボックスには 3 つのユニットがあります。まず、1 つのユニットを完了し、もう 1 つのユニットで CTRL+V を実行する必要があります。通常は、上のボックスに従ってページを分割します。 div には左右に浮動する 2 つの小さな div が含まれており、左側に img、右側に p、h およびその他のタグが含まれています。時間要素については、position 属性の配置によって実装されます。
<div class="demo1">
<div class="fl">
<img src="../../images/head02.jpg" alt="">
</div>
<div class="fr">
<span>10 分前</span>
<h6>本からどんどん遠ざかっていく</h6>
<p>
毎日、頭の中にたくさんの考えが残り、とても忙しいと感じていませんか? よく考えてみると、良い習慣を身につけ、自分を大切にすることによってのみ、自分が本当に忙しいことがわかります。夢を追うことで、生産性を高めることができます。これは、家族や友人との関係を改善することも意味します。なぜなら、あなたが変わると、あなたの周りのすべてが変わるからです。非常に有能な人々の習慣は、学ぶ価値がありますか?
</p>
</div>
</div>
<div class="demo2">
<img src="../../images/head02.jpg" alt="">
<div class="fr">
<span>10 分前</span>
<h6>本からどんどん遠ざかっていく</h6>
<p>
毎日、頭の中にたくさんの考えが残り、とても忙しいと感じていませんか? よく考えてみると、良い習慣を身につけ、自分を大切にすることによってのみ、自分が本当に忙しいことがわかります。夢を追うことで、生産性を高めることができます。これは、家族や友人との関係を改善することも意味します。なぜなら、あなたが変わると、あなたの周りのすべてが変わるからです。非常に有能な人々の習慣は、学ぶ価値がありますか?
</p>
</div>
</div>
<div class="demo3">
<img src="../../images/head02.jpg" alt="">
<span class="time">10 分前</span>
<h6>本からどんどん遠ざかっていく</h6>
<p>
毎日、頭の中にたくさんの考えが残り、とても忙しいと感じていませんか? よく考えてみると、良い習慣を身につけ、自分を大切にすることによってのみ、自分が本当に忙しいことがわかります。夢を追うことで、生産性を高めることができます。これは、家族や友人との関係を改善することも意味します。なぜなら、あなたが変わると、あなたの周りのすべてが変わるからです。非常に有能な人々の習慣は、学ぶ価値がありますか?
</p>
</div>
</div>=> 3 つの異なるデモは 3 つの異なるページ構造を表します || 書き込みページ構造の公開部分の表示:
/*リセット*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0;パディング: 0;リスト スタイル: なし;フォント:12px/1.5 "Arial"、"sans-serif"、"Microsoft Yahei"、"宋体"、 「タホマ」}
/*パブリックスタイル*/
.demo1、.demo2{
幅: 600ピクセル;
マージントップ: 20px;
オーバーフロー: 非表示;
マージン-ボトム: 20px;
}
p{
text-align: 両端揃え;
テキストインデント: 2em;
行の高さ: 24px;
}=>ジュニアプロデューサーCSS
/*主要な*/
.demo1{
幅: 600ピクセル;
マージントップ: 20px;
オーバーフロー: 非表示;
}
.demo1 .fl{
幅: 100ピクセル;
フロート: 左;
}
.demo1 .fl img{
マージン左: 20px;
パディング: 10px;
境界線: 1px 実線 #ccc;
}
.demo1 .fr{
幅:488ピクセル;
フロート: 右;
境界線: 1px 実線 #ccc;
位置: 相対的;
パディング: 5px;
}
.demo1 .fr スパン{
位置: 絶対;
右:18ピクセル;
上: 5px;
}=>中間プロデューサーCSS、初級レベルに比べて構造が簡略化され、左側のdivが削除され、右側の部分が保持されます。
/*中級*/
.demo2 .fr{
幅:488ピクセル;
フロート: 右;
境界線: 1px 実線 #ccc;
位置: 相対的;
パディング: 5px;
}
.demo2 .fr スパン{
位置: 絶対;
右:18ピクセル;
上: 5px;
}
.demo2 img{
マージン左: 20px;
パディング: 10px;
境界線: 1px 実線 #ccc;
}=> 高度なプロデューサー CSS: 最初に構造とセマンティクスに従ってコードを記述し、次に CSS スタイルを設定します。これにより、CSS と HTML の間の適合性が低下します (ドキュメントの移動、画像の移動、属性の配置)。
/*高度な*/
.demo3{
境界線: 1px 実線 #ccc;
幅: 488ピクセル;
マージン左: 100px;
パディング: 5px;
位置: 相対的;
}
.demo3 img{
フロート: 左;
マージン:-6px 0 0 -86px;
パディング: 10px;
境界線: 1px 実線 #CCCCCC;
}
.demo3 スパン{
位置: 絶対;
上: 10ピクセル;
右: 20ピクセル;
}結論: Web デザインの図面を取得したら、まずテキスト モジュールとコンテンツ モジュールの関係を観察し、セマンティックな HTML コードを書くことに集中し、デザイン ルームのレイアウト スタイルについてはあまり考えず、HTML コードが完成するまで待つ必要があります。編集完了後、実装方法を検討し、既存のページ構造を変更せずに、デザイン アートワークに必要な視覚効果を完成させるよう努めてください (クリックすると、単純な Web ページ レイアウトの完全な構造とパフォーマンス原理コードがダウンロードされます)。
上記は、単純な Web ページ レイアウトの構造とパフォーマンス原理について共有されている詳細な内容です。単純な Web ページ レイアウトの構造とパフォーマンス原理の詳細については、downcodes.com の他の関連記事に注目してください。