【div+css Webページレイアウトの詳細説明】_html/css_WEB-ITnose

前書き:

Web ページのレイアウトは Web ページ作成の最初で最も重要なステップです。今日は、div+css レイアウトの使用方法について詳しく説明します。

dw で Web ページを作成するには 2 つの方法があります。1 つはグラフィカル インターフェイスで、もう 1 つはコードです。初心者の場合は、グラフィカル インターフェイスを使用できます。ほぼ完了したら、効率を向上させるコード。

現在の CSS3 と以前の CSS2 の間には大きな変更点があるため、CSS2 から始めましょう。

(作者は Dreamweaver CS6 を使用しています。クラック版のダウンロード アドレス: http://www.aa25.cn/download/954.shtml)

1. 単一列レイアウト

Web ページ作成者は、最初にフレームワークは次の図のようになります:

Web ページをヘッダー タイトル部分、ナビゲーション ナビゲーション部分、記事本文、フッター フッターの 4 つの部分に分割するだけです

これは 1 列のレイアウトです。

div を通じてこれら 4 つの構造を作成し、css でレイアウトしてスタイルを追加します

以下に示すように、dw を使用して div をすばやく作成します:

以前は、div は次の目的で使用されていました。この構造を直接作成し、この構造の作成に ID が使用されました。レイアウト用にこの div を見つけます。

画像の右側にある新規ボタンをクリックして、中央のタイプを選択することに注意してください。スタイルを選択するためのルール。ID は ID カードのようなもので、それぞれ異なります。もちろん、状況に応じて、CSS クラスセレクター、疑似クラスを選択することもできます。

確認ポップアップページで CSS スタイルを設定します。

レイアウトに色を追加し、固定サイズの幅と高さを設定します。結果は次のようになります。 :

この問題は、初心者にとっても疑問に思われやすいものですが、これに似たものがたくさんあります。 ,

そのため、一般に Web ページを作成するときは、いくつかの属性を最初に初期化する必要があります。次のように記述します: body { margin:0 auto; font-family:Verdana; }

ul,dl,dd,h1,h2,h3,h4,h5,h6; ,p {padding:0; margin:0;}

ここで白いマージンをキャンセルするには、次のように記述します: body { margin:0}

すべてのコードは次のとおりです:

<span style="font-size:18px;color:#006600;"><strong><meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">#header {	background-color: #0F9;	height: 100px;	width: 500px;}#nav {	background-color: #F00;	height: 50px;	width: 500px;}#article {	background-color: #93C;	height: 300px;	width: 500px;}#footer {	background-color: #F99;	height: 50px;	width: 500px;}</style>
<div id="header">header</div>
<div id="nav">nav</div>
<div id="article">article</div>
<div id="footer">footer</div></strong></span>

上記は固定幅です。ブラウザのサイズが変わったときに幅を変更したい場合は、次のように % 単位を使用します。 width: 70%

div を中央に配置する属性: margin 属性を auto に変更します。 以上がhtml4とcss2の書き方です。

HTML5では、新しい構造タグの追加により、多くの場所でdivのブロックレベルの構造を記述する必要はなく、CSSを追加するときに

などのタグを直接使用します。クラスセレクターを使用できます

<span style="font-size:18px;color:#006600;"><strong><header>header</header><nav>nav</nav><article>article</article><footer>footer</footer></strong></span>

を直接追加します 2. 複数列レイアウト

div はブロックレベルの要素であるため、名前が信じられないほど優れており、一度に 1 ブロックずつ、各ブロックは 1 行を占有します1 行に複数のブロックを入れたい場合は、CSS を使用して複数の列にレイアウトする必要があります。

コード:

<span style="font-size:18px;color:#006600;"><strong><meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">#left {	background-color: #3FC;	float: left;	height: 400px;	width: 100px;}#center {	background-color: #9C0;	float: left;	height: 400px;	width: 100px;}#right {	background-color: #F9F;	height: 400px;	width: 100px;	float: left;}</style>
<div id="left">header</div>
<div id="center">nav</div>
<div id="right">article</div></strong></span>

css2 のメソッドは次のとおりです。 div に float 属性を追加します。

float をボックスに配置します。 属性は left に設定されます

float: left;

このメソッドには欠点があります。たとえば、記事を投稿する場合、float を使用して記事を 3 つの列に分割すると、いずれかの列にコンテンツを追加すると、この列が他の列よりも長くなるため、修正するのが非常に面倒になります。

css3 に新しく追加された複数列レイアウトとボックス レイアウトは、この問題を完全に解決します。

まず、ボックス レイアウトを使用してコードを確認します。効果は上の図と同じです。自分で実装することもできます。 CSS2 の float+position レイアウトで、float の問題なく位置合わせを自動で実現できます。

複数列レイアウトの実装を見てみましょう:

例で実装されているように、複数列レイアウトは主に記事に適しており、レイアウトを変更せずに自由に変更できます。ウェブページの外観。もちろん、このレイアウトにも制限があります。各列の幅は同じです。

そして、列の合計幅を記述する必要があります。そうすれば、複数の列が必要な場合に自動的に均等に配分されます。

コードは次のとおりです:

<span style="font-size:18px;color:#006600;"><strong>	<meta charset="utf-8">	<title>Untitled Document</title>	<style type="text/css">		#layout{			display: -moz-box;			display: -webkit-box;		}		#left {			background-color: #3FC;			height: 400px;			width: 100px;		}		#center {			background-color: #9C0;			height: 400px;			width: 100px;		}		#right {			background-color: #F9F;			height: 400px;			width: 100px;		}		#left,#center,#right{			-moz-box-sizing:border-box;			-wdbkit-box-sizing:border-box;		}	</style>	<div id="layout">		<div id="left">header</div>		<div id="center">nav</div>		<div id="right">article</div>	</div></strong></span>

さて、前に div+css の単一列レイアウトと複数列レイアウトについて説明しましたが、div はネストできるため、レイアウトは基本的に同じです。 div 内で分解すると、やはりこの 2 つのタイプから逃れることはできません。