Div+CSS レイアウト入門tutorial_html/css_WEB-ITnose

ページのレイアウトと計画
Web ページの制作には、CSS、HTML、DHTML、XHTML などの用語がたくさんあります。次の記事では、HTML についての基本的な知識を使用します。この入門チュートリアルを学習する前に、HTML についての基本的な知識がすでにあることを確認してください。 DIV+CSS を段階的に使用して Web ページのレイアウトをデザインしてみましょう。

すべてのデザインの最初のステップは構想です。構想後は、一般的に、PhotoShop や FireWorks などの写真処理ソフトウェア (以下、PS または FW) を使用して、作成するインターフェイスのレイアウトを単純に描画する必要があります。以下は私がよく考えたインターフェイスのレイアウト図です。

次に、概念図に基づいてページのレイアウトを計画する必要があります。図を注意深く分析すると、画像が次の部分に大まかに分かれていることが簡単にわかります。

1. 上部、ロゴ、メニュー、バナー画像も含まれます
2. コンテンツ部分はサイドバーとメインコンテンツに分割できます
3. 下部には著作権情報が含まれます。
上記の分析により、私たちのデザインレイヤーは次のように簡単にレイアウトできます:

上の図に基づいて、レイヤーの入れ子関係を示すために実際のページ レイアウト図を作成しました。理解しやすくなります。

DIV の構造は以下の通りです:
│body {} /*HTML要素なので詳細は説明しません*/
└#Container {} /*ページ層コンテナ*/
§#Header {} /* ページヘッダー*/
§#PageBody {} /*ページボディ*/
│ §#サイドバー {} /*サイドバー*/
│ └#MainBody {} /*メインコンテンツ*/
└#フッター { } /*ページの下部*/

この時点で、ページのレイアウトと計画は完了しました。次に行う必要があるのは、HTML コードと CSS の記述です。

全体のレイヤー構造と CSS を記述します
次に、デスクトップに「DIV+CSS Layout Exercise」という名前の新しいフォルダーを作成し、そのフォルダーの下に空のメモ帳ドキュメントを 2 つ作成し、次の内容を入力します。

< html xmlns ="http://www.w3.org/1999/xhtml" > < メタ http-equiv ="コンテンツ タイプ" charset=gb2312" /> < title > 無題のドキュメント

< link href ="css.css" rel ="stylesheet" type ="text/css" />

< body >




という名前のメモ帳ドキュメントです。 .css。

以下では、 タグのペアに DIV の基本構造を記述します。



< div id ="container" > aaaaaa] < !-- ページ レイヤー コンテナ--> [/color] ;
; < / div > ; < div id ="PageBody" >

; < div id ="サイドバー" > [color= #aaaaaa]

< div id ="MainBody" > content --> [/color]

| [/color]

を追加する必要があります。関連するコメントを入力してから、css.css ファイルを開き、CSS 情報を記述し、次のようにコードを記述します。

/*基本情報*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

/*ページレイヤーコンテナ*/
#container {width:100%}

/*ページヘッダー*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

/*ページボディ*/
#PageBody {width:800px;margin:0 auto ;height:400px;background:#CCFF00}

/*ページの下部*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}

上記のファイルを保存しますブラウザで開くと、この時点でページの基本構造が表示されています。

上記の CSS に関する説明 (詳細については、オンラインでダウンロードできる CSS2.0 の中国語マニュアルを参照してください):

1. コメントの習慣を身につけてください。これは非常に重要です。

2.ページ上のすべてのコンテンツはこのタグ ペア内に記述する必要があります。これ以上は説明しません。

ここでは略語が使用されています。コードは font-size:12px; フォント サイズが 12 ピクセルで、フォントが Tahoma 形式であることを示します。完全版は次のようになります。

margin-top :0px;margin-right:0px;margin-bottom:0px;margin-left:0px

または

margin:0px 0px 0px 0px 0px

順序は上/右/下/左です。 write margin:0(略称);

上記のスタイルは、ボディ部分の上下左右の余白が 0 ピクセルであることを示します

以下のようなものもあります。書き込みメソッド:

margin: 0px auto;

上下のマージンが 0px で、左右が自動的に調整されることを説明します。
将来使用するパディング属性はマージンと多くの類似点があります。

ただし、マージンは外部距離、パディングは内部距離です。

text-align:center
テキストの配置は左、右、中央に設定できます。ここでは中央配置に設定します。

background:#FFF

ここでは背景色を白に設定します。完全な色は、background:#FFFFFF になります。

背景は、指定したレイヤーを背景色と背景画像で埋めるために使用できます。将来的には次の形式を使用します。
背景:#ccc url('bg.gif') 左上 no-repeat; を意味します。 #CCC(グレースケールカラー) はレイヤー全体を塗りつぶします。bg.gif を背景画像として使用します。

左上

は画像が現在のレイヤーの左上端に配置されることを意味します。no-repeatは画像サイズのみを意味します。レイヤー全体を埋めずに表示されます。
top/right/left/bottom/center
は、背景画像を配置するために使用されます。つまり、それぞれ、top/right/bottom/left/center を使用することもできます。
X シートを意味します。マークは 20 ピクセル、Y 座標は 100 ピクセルの正確な位置です。
繰り返し/繰り返しなし/繰り返し x /繰り返し y はそれぞれ、レイヤー全体を塗りつぶす/塗りつぶさない/塗りつぶしを意味します。 X 軸/Y 軸に沿った塗りつぶし。

height / width / color
はそれぞれ高さ（px）、幅（px）、フォントの色（HTML カラーシステムテーブル）を表します。

4. ページを中央に配置するにはどうすればよいですか?

コードを保存すると、ページ全体が中央に表示されることがわかります。では、ページが中央に表示されるのはなぜでしょうか。
#container で次の属性を使用したためです:

margin:0 auto;

前の手順によると、上下のマージンは 0、左右のマージンは自動であることがわかります。自動的に中央に配置されます。
ページを左側に表示したい場合は、デフォルトで左側に表示されるため、自動値をキャンセルしてください。

margin:auto を使用すると、レイヤーを自動的に中央に簡単に配置できます。

5. ここでは一般的に使用される CSS プロパティのみを紹介します。その他については、CSS2.0 の中国語マニュアルを参照してください。

ページの大まかな DIV 構造を記述したら、各部分を詳細に作成し始めることができます。


ページのトップ作成の 1 つ
前の章で、いくつかのスタイルを作成しました。これらのスタイルは、css.css 内のすべてのスタイルをクリアして、再作成しました。 /p>

/*基本情報*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

a:link,a :visited {font -size:12px;text-decoration:none;}

a:hover{}

/*ページレイヤーコンテナ*/

#container {width:800px;margin:10px auto}

スタイルの説明:

a: link,a:visited {font-size:12px;text-decoration:none;}
a:hover {}



これら 2 つの項目は、ページ内のハイパーリンクのスタイルを制御します。詳細は説明しません。はい、マニュアルを参照してください。

#container {幅:800px;マージン:10px 自動}

ページ全体の表示領域を指定します。
width:800px は幅を 800 ピクセルに指定し、実際のニーズに応じてここで設定します。
margin:10px auto、ページの上下の余白は 10 ピクセルで、ページは中央揃えになります。
前の章で説明したように、レイヤーのマージン属性の左右のマージンを自動に設定すると、レイヤーを中央に配置できます。

次に、TOP 部分の作成を開始します。TOP 部分には、ロゴ、メニュー、バナーが含まれています。以下は、FW で完成したスライスです。 TOP 部分は 2 つの部分に分かれており、最初の部分にはロゴと水平線が含まれます。ロゴ画像にはあまり多くの色が含まれていないため、この部分を GIF 形式で保存し、パレットを正確に選択し、アルファ透明度を選択し、カラーバージョンを白 (ここでの色は背景色と同じにする必要があります) にしてエクスポートしました。これはロゴ .gif として保存され、画像の幅は 800 ピクセルです。

この時点で、何人かの友人が、 * なぜ GIF 形式を使用するのですか? JPEGを使ったほうがいいんじゃないでしょうか？

GIF 形式の画像ファイルは小さいため、ページの読み込みが速くなります。もちろん、GIF 形式を使用する場合は、画像に多くの色が使用されていないことを確認する必要があります。肉眼ではどの程度変化するかは写真では確認できないため、これは可能です。

* 次のバナー部分でも GIF 形式を使用できますか?

答えはノーです。バナー部分は詳細な画像なので、GIF 形式を使用すると色が失われすぎるため、JPEG 形式を使用してファイルを Banner.jpg としてエクスポートする必要があります。

* 適切なスライス方法が CSS の記述の容易さとページの読み込み速度を決定するため、合理的なスライスは非常に重要です。

スライスを切り取った後、TOP 部分を分析し、ヘッダーに DIV 構造を書き込む必要があります。

< div id ="menu" >

< li >< ホーム ページ >/ a >/ li > < li class ="menuDiv" < > href =" #" > / a >/ li > < li class ="menuDiv" > > < > アルバム ＆lt; li class ="menuDiv" > フォーラムa > < li class ="menuDiv" > について / li >

リスト

を使用すると、メニューのスタイルを後で簡単にカスタマイズできます。

そして、なぜ次のコードを追加する必要があるのでしょうか?

このコード部分を挿入すると、プレビューの垂直線など、メニュー オプション間にいくつかの分離スタイルを簡単に挿入できます。

次に、css.css に次のスタイルを記述します:

/*ページヘッダー*/
#header {background:url(logo.gif) no-repeat}

スタイルの説明:
#header {background :url( logo.gif) no-repeat}
背景画像のロゴをページヘッダーに埋めずに追加します。

ここでは、ヘッダー層の高さを指定しませんでしたが、なぜそれを指定しないのでしょうか?

ヘッダーレイヤーにはメニュー項目とバナー項目があるため、レイヤーの高さは一時的に不明ですが、レイヤーのプロパティによりコンテンツに基づいてレイヤーが自動的に調整されるため、高さを指定する必要はありません。

ページトップ作成パート2

list

を使ってメニューを作成します

このセクションを始める前に、前のセクションを参照して、index.htmとcss.cssにDIV、CSSが記述されていることを確認してください。ファイル内にあります。

このセクションでは、list

を使用してメニューを作成する方法を説明します。

首页
博客
设计
相册
论坛
について

以上はこの部分の構造であり、、

この 2 つの HTML 要素の大家自身が関連する内容に関連しており、最も重要な役割を果たしています。つまり、HTML 内でこれらの情報がリスト形式で表示されます。

また、HTML 内で id="divID" に定義されている場合、CSS に対応する設定メソッドは #divID{

id="divID" の場合、この層には が含まれます。 、この img が CSS 内で対応する設定法は #divID img {}、同様に、class="divID" この層に含まれる場合、設定法は .divID img {}、これは一点希望ですさらに、HTML 内の要素はすべて、CSS 内に設定する場合、table、tr、td、th、form、img、input... などのように定義可能です。要素の名前を直接書き込むこともできます。すべての CSS コードは、大括弧 {} 内に記述します。 ：

#menu ul {list-style:none;margin:0px;}

#menu ul li {float:left;}

解释一下：

#menu ul {list-style:none;margin:0px; }
list-style:none、これは私たちがこれらのポイントを必要としないため、テーブルの先頭を削除します。

margin:0px、この句は UL の削減であり、これによりすべてのリスト テーブルのコンテンツが削除されなくなります。

#menu ul li {float:left;}

ここの float:left の左右は、コンテンツ全体が同時に表示されているため、浮動プロパティ (float) を使用しています。効果，我们再追加下面内容，效如果下：

このとき，列表内容は排列在一行，我们在#menu ul li {}追加代码マージン:0 10px

#menu ul {list-style :none;margin:0px;}

#menu ul li {float:left;margin:0 10px}

margin:0 10px の作用は让列表内容の間で 1 つの 20 画素の距離 (左：10px、右： 10px)、预览的効果如下:

现在、雏形すでに了了、我们固定菜单の位置、把代修正成如下:

#menu {padding:20px 20px 0 0}

/*利用padding: 20px 20px 0 0来固定菜单位置*/

#menu ul {float:right;list-style:none;margin:0px;}

/*追加了float:right使用得菜单位置页面右侧*/

#menu ul li {float:left;margin:0 10px}

今回、位置已经确定了、可是构思图中、菜单选项之间还有一条竖線上、怎么办呢?

别忘了、我们早就已经留良い空の

、必要に応じて回線を追加して使用してください。 :1px;height:28px;background:#999}

保存は次のとおりです、回線は完了しましたか? この段階のコードについてはあまり詳しく説明されておらず、これは簡単に理解できます。的文字却下顶部，我们再修正以下代码：

#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}

display:block;line-height:について28px大家は去って行くことができますが、私はあまり評価されません。

基本的に効果は得られています。あとは、メニューのハイパーリンク スタイルを変更し、次のコードを css.css に追加するだけです。

#menu ul li a:link,#menu ul li a:visited {font- weight:bold;color:#666}
#menu ul li a:hover{}

これについてはこれ以上は言いません。最終的な効果は次のとおりです。

これちなみに、このセクションはここにあります 皆さんに素材を提供します:
コンセプト マップ: クリックしてダウンロード
HTML および CSS ソース ファイル: クリックしてダウンロード

ページ作成 - 境界線と透明度を上手に活用する

このセクションでは、ここでは主に、ボーダーとクリアのこの 2 つの属性の使い方を説明したいと思います。

まず、表を使用して Web ページを作成したことがある場合は、この段落をテキストに追加するだけで済みます。

マニュアルをもう一度参照すると、破線、実線、点線などの機能が理解できます。これらを使用して、実線、点線、二重線、ハッチングなどの多くの効果。

上記のコードは、次のスタイルを css.css に追加します。

#banner {
background:url(バナー .jpg) 0 30px no-repeat; /*背景画像を追加*/
width:730px; /*レイヤーの幅を設定*/
height:240px; *高さの設定*/
border-bottom:5px Solid #EFEFEF; /*明るい灰色の実線を描画*/
clear:both /*浮動小数点をクリア*/
}

境界線を通る実線を描くのは簡単です。画像のダウンロードによって占有されるネットワーク リソースが削減され、ページの読み込みが高速化されます。

もう 1 つ説明すべきことは、clear:both です。これは、左側と右側のすべてのフロートをクリアすることを意味します。次のレイアウトでも、この属性を使用します。clear:left/right。以前の ul 要素と li 要素が float に設定されていたため、Clear:both がここに追加されます。これらがクリアされていない場合、バナー レイヤーの位置の設定に影響します。

上記はページのメイン部分であり、CSS で記述されています.css 次のスタイルを追加します:

#pagebody {

width:730px; /*幅を設定*/
margin:8px auto; /*Centered*/
}
#sidebar { /*Set width */
text-align:left; /*テキストを左に揃えます*/
float:left; /*左にフロートします*/
clear:left; /*左側にフローティングを許可しません*/ overflow:hidden; /*Exceed width 部分が非表示になります*/
}
#mainbody {
text-align:left; /*float:right; /*右側にフローティングを許可しない*/
overflow:hidden
}



効果を確認するには、#sidebar と #mainbody に次のコードを追加することをお勧めします。このコードは後で削除できます。プレビューが完了しました:

border:1px Solid #E00;
height:200px

プレビュー効果を保存すると、2 つのレイヤーが完全に浮いていて、レイアウト要件を満たしていることがわかります。 160+2(枠線)+570+2=734px、親レイヤーを超えています。 クリアなので、この2つのレイヤーはずれることはありません。コンテンツが長すぎてレイアウトしたページがずれることはありません。写真など）。

後で追加された overflow:hidden は、長すぎるコンテンツの部分 (写真など) を自動的に非表示にすることができます。通常、一部の Web ページが読み込まれると、画像が大きすぎるためにレイアウトが引き伸ばされ、ページがダウンロードされるまでレイアウトが通常に戻らないことがわかります。この問題は、overflow:hidden を追加することで解決できます。

CSS のすべての属性は、適切に使用すれば多くの問題を解決できます。レイアウトしているページとは関係がないかもしれませんが、問題が発生した場合は、これらの属性の役割を理解しておく必要があります。これらの属性は問題を解決することができます

このウェブサイトの声明

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