ホームページ > 記事 > ウェブフロントエンド > CSS+DIV -- フロントエンドの必須基盤 er_html/css_WEB-ITnose
CSS+DIV -- フロントエンドの必須基盤 er_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:49:181171ブラウズ
B/S は本当に長期的な経験の段階で、時間が経つにつれて、ニュースリリースで学んだことはたくさんあると思いました。何が何だか分からないシステムはもう昔のことだろう。でも、当時はCSSが何かもわからなかったので、CSSを書くことを勉強しました。非同期通信が何なのかを知る前に、AjaX の使用方法を学びました。動画のクラシックフレームを見て、これがニュースリリースシステムで使われているCSS+DIVだということに気づきました！ (⊙o⊙)あ、もう書けるようになった！
この組み合わせを見て、なぜこんな組み合わせなのかと疑問に思いました。スパンできません! HTMLを直接使うことはできないのでしょうか？非常に明確な目的: データ コンテンツをデータ形式から分離し、フロントエンド ER の開発とメンテナンスを容易にすること。内部的にリンクされたスタイル シートのステートメントを想像してみてください
<span style="font-family:KaiTi_GB2312;font-size:18px;"><link href="（css样式表）" rel="stylesheet" type="text/css" /></span>
フロントエンド要素のスタイルを変更する必要がある場合、スタイル シート内の ID またはカテゴリ名を検索するだけで済み、間違いなく効率が大幅に向上します。開発の。
もう一つの質問は、なぜSpanができないのかということです。 SPAN と DIV の違いは、DIV (部門) が段落、タイトル、表、さらには章、要約、メモなどを含めることができるブロック レベルの要素であることです。 SPAN はインライン要素です。SPAN の前後に改行はありません。これには構造的な意味はなく、他のインライン要素が適切でない場合にのみ使用できます。
Step ONE: DIV block
まず、Web ページがいくつかの表示部分と Banner に分割されていることを考慮する必要があります。他のコンテンツの表示は必要であり、対応する DIV ブロックに割り当てられます。
ステップ 2: DIV の配置?? CSS スタイル シートを使用して DIV を配置するには、ボックス モデルを使用する必要があります。名前などの、ボックスは物を保管するために使用され、自由に移動できます。もちろん、より専門的な言葉では、それをフロートと呼びます。以下はボックスモデル、マージン、ボーダー、パディングの表示です。写真スタジオの壁に貼られた写真に共感していただければ幸いです。
ステップ 3: 全体的なアーキテクチャ
次のコードは最初のプロトタイプの解釈です。これは非常に基本的な CSS+DIV 実装です。ボックス フローティング効果が使用され、コンテンツ モジュールとリンク モジュールがそれぞれ左と右にフローティングできます。
<html><head><style type="text/css"><!--body { margin:0px; font-size:13px; font-family:Arial;} #container{ position:relative; width:100%;}#banner{ height:80px; border:1px solid #000000; text-align:center; background-color:#a2d9ff; padding:10px; margin-bottom:2px;}#content{ float:left; text-align:center; padding-right:200px; /* 内容往回挤200px */}#links{ float:right; width:200px; border:1px solid #000000; margin-left:-200px; /* 强行往左拉回200px */ text-align:center;}#footer{ clear:both; /* 不受float影响 */ text-align:center; height:30px; border:1px solid #000000;}--></style><title>CSS排版</title><body><div id="container"> <div id="banner">banner</div> <div id="content"> <div class="blog"> <div class="date">date</div> <div class="blogcontent">content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br> </div> </div> <div class="others">others</div> </div> <div id="links"> <div class="calendarhead">links<br>links<br>links<br>links</div> <div class="calendartable">links<br>links<br>links<br>links</div> <div class="side">links<br>links<br>links<br>links</div> <div class="syndicate">links<br>links<br>links<br>links</div> <div class="friends">links<br>links<br>links<br>links</div> </div> <div id="footer">footer</div></div></body></html>
レンダリングは次のとおりです:
3. まとめ
CSSと組み合わせ後DIV を使用すると、データと形式を分離することでメンテナンスが容易になるため、Web ページの読み込みが容易になります。検索効率と閲覧効率の向上は、優れたユーザーエクスペリエンスをもたらします。つまり... CSS+DIV で構成されるこのようなシンプルなソースコードのフロントエンドは、フロントエンド開発を学ぶために必要な基礎です。