典型的な DIV+CSS レイアウト??固定幅と中央揃えのレイアウト_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

典型的な DIV+CSS レイアウト??固定幅と中央揃えのレイアウト_html/css_WEB-ITnose

Jun 24, 2016 pm 12:27 PM

1. 効果

2. HTML 構造

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;    &lt;title&gt;典型的DIV＋CSS布局&lt;/title&gt;    &lt;link href=&quot;css/layout.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;    &lt;style type=&quot;text/css&quot;&gt;        &lt;/style&gt;&lt;/head&gt;&lt;body&gt;    &lt;div id=&quot;wrap&quot;&gt;        &lt;div id=&quot;header&quot;&gt;            &lt;h1&gt;典型的DIV＋CSS布局&lt;/h1&gt;        &lt;/div&gt;        &lt;div id=&quot;menu&quot;&gt;        &lt;/div&gt;        &lt;div id=&quot;container&quot;&gt;            &lt;div id=&quot;side&quot;&gt;            &lt;/div&gt;            &lt;div id=&quot;content&quot;&gt;            &lt;/div&gt;        &lt;/div&gt;        &lt;div id=&quot;footer&quot;&gt;            &lt;p&gt;Copyright&copy;2012,&lt;a href=&quot;http://blog.csdn.net/yousuosi&quot;&gt;WestGarden&lt;/a&gt;.&lt;/p&gt;        &lt;/div&gt;    &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

3. CSS

*{    margin:0;    padding:0;}body {    text-align:center;    background:url(bg.jpg);}a:link      { color: #A0410D; text-decoration:none; }a:visited 	{ color: #A0410D; text-decoration:none; }a:active 	{ color: #A0410D;  cursor:hand; text-decoration:none; }a:hover 	{ color: #FFCC17;  cursor:hand; text-decoration:&quot;underline&quot;; }h1,h2,h3,h4{    color:#C36C2D;}#wrap{    width:800px;    margin:0 auto;    text-align:left;}#header{    height:118px;    text-align:center;    background:#FDE38F url(logo.jpg) no-repeat;}#header h1{    line-height:118px;}#menu{    height:22px;    background:url(bar.jpg) repeat-x;}#container{    float:left;    background:#A0410D;}#side{    width:200px;    float:left;}#content{    width:600px;    float:left;    height:400px;    background:white;}#footer{    clear:both;    height:22px;    text-align:right;}#footer p{    line-height:22px;}

ログイン後にコピー

1. *{ margin:0;} は、自分の Web サイトでは、通常、reset.css が必要です。reset.css の内容については、http://blog.csdn.net/yousuosi/article/details/7939325 を参照してください。

Text-aling:center が設定されています。 body では、 text-align:left が Wrap に設定されていますが、これは古いバージョンのブラウザの互換性の問題を解決するためです。新しいバージョンのブラウザでは、wrap の margin:0 auto; でセンタリングの問題を解決できます。

3. div#header のタイトル h1 の垂直方向の中央揃えの問題 h1 の行の高さを 118px に設定できます。つまり、h1 の行の高さは div#header の高さと一致します。

4. サイド div とコンテンツ div を並べて配置することもできますが、この例のようにフローティングメソッドを使用することもできます。フローティングメソッドを使用する場合、2 つの div は float:left; 属性で設定されます。標準フローでは、この時点でコンテナーが 2 つの div を確実に囲むことができるようにするために、フローティングモードにも設定されます。

5. サイド、コンテンツ、コンテンツはすべてフローティングモードに設定されているため、フローティングの影響をクリアするには、後続のフッターを設定する必要があります。

6 番目に、2 つの隣り合った div の背景色の設定に問題があります。つまり、通常、コンテンツの高さがコンテンツに応じて変化します。現時点では、コンテンツの高さを確保することが困難です。側面は内容と一致しています。解決策は、コンテナーの側面の背景色を設定することです。コンテンツには Web コンテンツを保存する必要があるため、通常は背景色を明るく設定するか、単純に白に設定する必要があります。

7. 固定幅レイアウトと中央揃えレイアウトでも絶対配置属性を使用できます。詳細については、「一般的な DIV+CSS レイアウト」を参照してください。

【結論】

プログラマーにとって、フロントデスクのことは全く理解できず、簡単なインターフェースすら作れません。終了コード。そして、プログラマーに美しいフロントエンドインターフェイスを作るよう求めるのは現実的ではありません。インターフェイスを作るには、プログラマーが得意とするロジックとは異なります。この時点で、プログラマーは自分自身の適切なポジショニングを確立する必要があります。個人的には、おそらく CSS はバックエンドコードとフロントエンドインターフェイスの間のインターフェイスであると思います...

プログラマーは、構造、コンテンツ、パフォーマンスの分離という Web 標準の設計思想を理解し、基本的な HTML 構造をマスターし、基本的な CSS デザインを習得し、シンプルな色と少数の画像を使用して Web 標準に準拠したインターフェイスを構築できること。これは、HTML 構造が合理的であり、CSS が標準化されている必要があります。アーティストやフロントデスクのスタッフが、インターフェイスの構造やコンテンツに影響を与えることなく、自分の能力を最大限に発揮できることを想像してみてください。

[参考文献]

Li Zhuoqun、Web デザイン例チュートリアル[M]、北京: 清華大学出版局、2010:194-197。

Wen Qian、CSS デザインの徹底研究[M]。 Press 、2008. (添付: 電子書籍のダウンロードアドレス)

SHEA D.CSS Zen Garden [M]、北京: People's Posts and Telecommunications Press 2007. (添付: 電子書籍のダウンロードアドレス)

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。