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>
もう一つの質問は、なぜSpanができないのかということです。 SPAN と DIV の違いは、DIV (部門) が段落、タイトル、表、さらには章、要約、メモなどを含めることができるブロック レベルの要素であることです。 SPAN はインライン要素です。SPAN の前後に改行はありません。これには構造的な意味はなく、他のインライン要素が適切でない場合にのみ使用できます。
まず、Web ページがいくつかの表示部分と Banner に分割されていることを考慮する必要があります。他のコンテンツの表示は必要であり、対応する 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 で構成されるこのようなシンプルなソースコードのフロントエンドは、フロントエンド開発を学ぶために必要な基礎です。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
