簡單2欄的CSS佈局的CSS ，設計的CSS佈局|

簡單2欄的CSS佈局

這是一個教程如何使用CSS創建一個簡單的兩欄佈局。

佈局包括一個頭，一個主要內容欄，一個工具，和頁腳。一個相當基本的佈局，而不是在所有的困難，創造利用CSS一旦你知道如何應付不可避免的Internet Explorer的漏洞。

1 。基本結構

首先，我們創建的基本HTML結構：


  > <div 編號 = "page" “ 
  > </div> <div 編號 = "header" “ ” /科“ 
  > </div> <div 編號 = "sidebar" “ ” /科“ 
  > </div> <div 編號 = "main" “ ” /科“ 
  > </div> <div 編號 = "footer" “ ” /科“ 
  “ /科” 


 在那之後，我們把一些內容在不同的章節： 

  > <div 編號 = "page" “ 
  > <div 編號 = "header" “ 
  <h1>公司名稱“ / H1基因” 
  <h4>輸入您的口號是“ / H4燈口” 
  “ /科” 

  > <div 編號 = "sidebar" “ 
  <h2>導航“ /氫” 
  <ul> 
  > Home </a> </li> <li>的<a href = "#" “ ”首頁< / a “ ” /李“ 
  > About us </a> </li> <li>的<a href = "#" “關於我們” / 1 “ ” /李“ 
  > Srevices </a> </li> <li>的<a href = "#" “ Srevices ” / 1 “ ” /李“ 
  > Contact </a> </li> <li>的<a href = "#" “聯繫” / 1 “ ” /李“ 
  > Sitemap </a> </li> <li>的<a href = "#" “網站” / 1 “ ” /李“ 
  “ / UL認證” 
  “ /科” 

  > <div 編號 = "main" “ 
  <h2>內容“ /氫” 
  <p> Lorem本身悲楚坐在阿梅特， consectetuer dipiscing 
  elit 。 兼病臨產蒙特斯， nascetur ridiculus毛里求斯。  1月1日  
  2002年Lorem本身悲楚坐在阿梅特， consectetuer adipiscing elit 。 兼病  
 臨產蒙特斯， nascetur ridiculus毛里求斯。  2002年1月1日“ /人” 
  “ /科” 
  > <div 編號 = "footer" “ 
  <h2>頁腳“ /氫” 
  “ /科” 
  “ /科”

2 。 CSS代碼

現在，我們創建的CSS代碼：


  / *兩列式佈局* / 
  ; padding : 0 ; } * （保證金： 0 ;填充： 0 ; ） 
 身體 
  （ 
 字體大小： 100 ％ ; 
 字型粗細：正常 ; 
  ; font - family的：字體 ，瑞士， 無-線 ; 
  ） 
  * HTML格式，機構 
  （ 
 身高： 100 ％ ; 
  ;民高度： 100 ％ / * Firefox的* / ; 
  ） 


  HTML格式， ＃頁 
  （  
 保證金： 0 ; 
 填充： 0 ; 
 身高： 100 ％ ; 
  ） 
  ＃一頁 
  （ 
  ;保證金： 0 汽車 ; 
 填充： 0 ; 
 寬度： 1009px ; 
 身高： 100 ％ ; 
  ） 


  ; } 1 （文字修飾：無 ; ） 

   text-decoration :underline }答：懸停 （文字修飾：強調 ） 

  ; padding : 0 ; } UL認證，醇，李（保證金： 0 ;填充： 0 ; ） 


 上半年，氫氣，蛋白H3 ， H4燈口，發現H5 ， h6 
  （ 
 保證金： 0 ; 
  20px ;填充： 10px 0 0 20px ; 
  ） 

  ; }上半年（字體大小： 28px ; ） 
  ; }氫氣（字體大小： 24px ; ） 
  ; }蛋白H3 （字體大小： 18px ; ） 
  ; } H4燈口（字體大小： 12px ; ） 
  ; } H5型（字體大小： 10px ; ） 

  ; p （保證金： 0 ; 
 行高： 18px ; 
  10px 20px ;填充： 0 0 10px 20px ; 
 字體大小： 12px ;  
  ） 

  ＃一頁 
  （ 
  ;保證金： 0 汽車 ; 
 填充： 0 ; 
 寬度： 1009px ; 
 身高： 100 ％ ; 
  ） 

  ＃頭 
  （ 
 保證金： 0 ; 
 填充： 0 ; 
 寬度： 100 ％ ; 
 高度： 151px ; 
 顯示：塊 ; 
  ; 背景顏色 ： ＃ eeeeee ; 
  ） 

  ＃側邊欄 
  （ 
 浮動：左 ; 
 保證金： 0 ; 
 填充： 0 ; 
  ;顯示：內置 / * Internet Explorer中* / ; 
 寬度： 200px ; 
 身高： 100 ％ ; 
  ; 背景顏色 ： ＃ cccccc ; 
  ） 

  ＃側邊欄 UL認證 
  ; } （列表樣式類型：無 ; ） 

  display : inline /*internet explore*/ ; } ＃側邊欄 UL認證李（ 顯示 ： 內置 / *互聯網探討* / ; ） 

  ＃側邊欄 UL認證李一 
  （  
  ;填充： 3px 4px ; 
 顯示：塊 ; 
  16px ;保證金： 0px 0 0 16px ; 
 文字修飾：無 ; 
  顏色 ： ＃ 0000E8 
  ） 

  ＃側邊欄美國UL李答：懸停 
  : #CC0000 } （ 顏色 ： ＃ CC0000 ）  

  ＃主 
  （ 
 保證金： 0 ; 
 填充： 0 ; 
 浮動：左 ; 
 顯示：塊 ; 
 寬度： 809px ; 
 身高： 100 ％ ; 
  背景 ： ＃ dddddd 
  ） 
  ＃頁腳 
  （ 
 保證金： 0 ; 
 填充： 0 ; 
 顯示：塊 ; 
 寬度： 100 ％ ; 
 身高： 50px ; 
  ; 背景 ： ＃ eeeeee ; 
 溢出：隱藏 ; 
  ）