CSSページレイアウトフォーマット

ページレイアウト

ページレイアウトは、単に課税は、最初のフレームを取るときのように、常にフロントエンド開発における作業の始まりで、その後、レンガをリロード、フロントエンドは、ページレイアウトの作業を行うには、同じです。

　　ほとんどのサイトでは、複数の列を作成するの<div>や<表>要素を使用することができます。CSSは要素を配置、またはページの背景とカラフルな外観を作成するために使用されます。

　　div要素は、パケットのHTML要素のためのブロックレベル要素です。

　　divデフォルトは縦（垂直配向）、タイル張りされ、レベルがスタイル=追加する必要がある「フロート：左;」。

アイデアを得るボックスモデルの学習の後、ブロックレベル要素とインライン要素の中に、私たちは、ページは、コードは難しい、より複雑であるとき、それは頻繁に複雑なネストされたテーブルレイアウトを必要とするため、金型の仕事の大半を完了するために、CSS + DIVによって行われていることを知っていますメンテナンス、および使用のCSS + DIVのレイアウト、コンテンツとプレゼンテーションを分離することができ、コードは、開発効率を向上させ、きれいな、良い読みやすさ、メンテナンスの容易さがあり、そしてスタイルのコードを再利用することができ、一方、分離アーティストやウェブ開発者のことも相乗した後、協力は、さらに、サイトの全体的な開発の品質と効率を向上させます。

従来のフローレイアウト

ディスプレイ自体の従来の表示素子では、これは、2つの特徴を有します。

1.表示素子（表示方法を作成する方法）自己定義されたHTML要素の位置に応じて

2.自分の従来の表示特性に応じて表示素子

このような垂直に配置されたブロックレベルの要素として、水平ラインレベル要素を配置。

前のレイアウトを学ぶことがなかった場合には、実際には、それは、従来のフローレイアウトを使用することです。

レイアウト手順

まず、全体的なレイアウト

まず、表示された特定のページのためのフレームワークをレイアウトします。例えば、我々は大きなDIVとしてWebページを置きます。

第二に、使用DIV除算

例えば、上下の部分に分け、当社のWebページ全体を取るので、我々は3つのDIV-来る、最初のおおよそのページについての分割を使用することができます。

第三に、レイアウトDIVを制御するためにCSSを使用

モジュールがはっきりと見ることができ、変更する必要があれば、特定のパターン幅、高さのレイアウト、および重要な背景の境界線やラベルの使用を制御するためにCSSを使用します。

細分化するために、上記の3つのステップの使用

各モジュール内の特定の部門上記の3つのステップを経ます。

コードのいくつかの例

HTML

1  <！DOCTYPE HTML > 
2  < HTML > 
3  < ヘッド> 
4  < メタのcharset = "UTF-8" > 
5  < タイトル>山东理工大学</ タイトル> 
6  < リンクREL = "スタイルシート" HREF = "CSS / index.css" > 
7  < リンクREL = "ショートカットアイコン" HREF = "IMG / favicon.icoを" > 
8  </ ヘッド> 
9  <
 <！ - 总体- > 
11  < DIV ID = "contaion" > 
12  <！ - 头部- > 
13      < DIV ID = "ヘッダ" > 
14          < DIV ID = "HEAD_TOP" > </ DIV > 
15          < DIV ID = "head_bottom" > </ divの> 
16      </ divの> 
17  <！ - 轮播- > 
18  < div要素のid = "lunbo" > </ DIV > 
19  <！ -内容- > 
20      < DIV ID = "コンテンツ" > 
21  <！ -     左边- > 
22          < DIV クラス= "content_in content_01" > 
23              < DIV クラス= "content_first cot_in content_01_top" > </ DIV > 
24              < DIV クラス= "content_01_botのcontent_01_bot" > </ divの> 
25          </ divの> 
26  <！ -         中间- > 
27          <div クラス= "content_in content_02"> 
28              < divのクラス= "content_first cot_in content_02_top" > </ divの> 
29              < divのクラス= "content_01_botのcontent_02_bot" > </ divの> 
30          </ divの> 
31  <！ -         右边- > 
32          < divのクラス=」 content_in content_03" > 
33              < DIV クラス= "content_first cot_in content_03_top" > </ DIV > 
34              <div クラス= "content_01_botのcontent_03_bot"> </ ディビジョン> 
35          </ DIV > 
36      </ DIV >     
37  <！ - ヘッドタブ- > 
38である     < DIV ID = "foot_nav" > </ DIV > 
39  ！ - < headタグ- > 
40      < DIV ID = "フット" > </ DIV > 
41である </ DIV > 
42れている </ ボディ> 
43である </ HTML >

CSS

1  / * CSS文献* / 
2  
3。 * {
 4。     マージン：0PX ;
 5      パディング：0PX ;
 6 }
 7。 / * 全体* / 
8。 #contaion {
 9      幅：100％ ;
 10      高さ：100％ ;
 11      境界：1ピクセルソリッド ;
 12 }
 13  / * ヘッダ* / 
14  ＃ヘッダー {
 15     幅：72％ ;
16      高さ：180ピクセル ;
17      国境：1pxの固体 ;
18      マージン：0自動 ;
19 }
 20  #head_top {
 21      幅：100％ 。
22      高さ：130px ;
23      のborder-bottom：1pxの固体#CCC。
24 }
 25  #head_bottom {
 26      幅：100％ 。
27      高さ：は50px ;
28 }
 29  / * 轮播* / 
30  #lunbo {
 31      幅：100％ 。
32      高さ：285px ;
33      国境：1pxの固体 ;
34 }
 35  / * 内容* / 
36  #content {
 37      幅：72％ 。
38      身長：600PX。
39      ボーダー：1pxの固体 ;
40      マージン：0自動 ;
41 }