DIV+CSS首頁佈局練習
阿新 • • 發佈：2018-12-26
新建外部樣式，
html中設定<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >表示檔案格式，在加入<link rel="stylesheet" type="text/css" href="css/hh.css"> 引入外部css連結
最先佈局一個最外面的層，設定寬度960畫素，臨時高度800畫素和背景顏色
佈局整個body體 ，所有外邊距和內填充變成0，頂點對齊
最外面的層設定居中margin：0 auto
相容：整個body體裡也設定居中，text-align：center；
最外面的層在設定整個文字左對齊方便佈局text-align：leftr；
最外面層裡設定三個層
頭部層，內容層，頁尾層
頭部層設定寬度100%沾滿，臨時高度150畫素，背景顏色用來區分
內容層設定寬度100%沾滿，臨時高度150畫素，背景顏色用來區分
頁尾層設定寬度100%沾滿，臨時高度150畫素，背景顏色用來區分
裡面三個層高度臨時固定，刪除最外層的臨時高度 和背景顏色
三個層之間需要有間隙，空白，如果在每個層裡定義margin修改的時候很麻煩，所以定義一個加塞的層，類名nav，定義寬度width：100%，高度10px；
相容：IE瀏覽器在設定高度低於18畫素的時候都按照18畫素計算，所以IE高度高於其他瀏覽器的高度，新增一句超出的部分隱藏，overflow：hidden
在頭部的層裡分為4格層，logo層，banner層，工具層，導航層。
樣式定義在頭部附近，便於尋找。
banner層定義寬度，高度和背景顏色
工具層定義寬度，高度和背景顏色
導航層定義寬度，高度和背景顏色
相容：標準的盒子外層指定高度是不會給撐開的，非標準的盒子會撐開，去掉頭部的高度
logo層設定左浮動float：left；
banner層設定左浮動float：left；並且外邊距設定10畫素隔開
工具層設定右浮動float：right；
導航層設定左浮動
相容：非IE瀏覽器出現不在一個層的情況，把所有層設定成浮動，對於間隙層，單設定浮動會往上走，所以不挨著浮動塊，clear：both；
刪掉頭部的顏色
body體內設定兩個層，左側層，右側層
左側層寬度750畫素，高度600畫素，背景顏色，左側浮動
在左側層裡設定左右兩層，小左層，小右層 。
左層的選擇器定義的是id，#left，小左層選擇器定義的是class，.left，在左層的附近定義小左層 ，#left .left
在定義兩個層，一共四個層，中間設定間隙div佈局。
去掉body的背景顏色和高度。
logo位置換成圖片
html里加入<img>
csss設定圖片邊框為0，內邊距，外邊距都為0.
去掉logo層的顏色
調整圖片的外邊距或者logo層的內邊距，讓圖片居中
調整圖片的大小和邊距給圖片加格樣式。
在導航欄里加列表
列表清空一下外邊距，內邊距和列表的樣式，margin：0；padding：0；list-style：none；
列表設定左側浮動，列表的文字居中，設定文字的行高
加小豎條，寬度和高度自定義，IE高度小於18畫素，使用overflow：hidden，隱藏起來，調整位置
內容層里加兩個層
上邊標題層，下邊內容層。
上下層的寬度設定100%適應內容層的寬度，高度設定26畫素，設定邊框實線，刪掉內容層裡的高度和背景顏色，
相容：設定邊框線後，iE瀏覽正常，非IE瀏覽時候，增加1畫素的邊框線。所以格外設定一個樣式，用來存貯新的寬度，
在上邊層 加個類名class=“tit kuan1” 下邊層加一個類名class=“nei kuan2”
kuai1樣式：width：298 ！important； width：300px；
上邊標題層刪除背景顏色換成背景圖片
在html裡寫入標題<h3>
樣式裡給h3清空樣式
給h3加新樣式，水平居中
給某個層裡html標記的時候可以使用層裡的類名加上html標記，表名只給這個層裡的這個html標記樣式，不影響其他層裡同樣html標記的樣式。
圖片大小和層的大小不合適的時候可以通過background-position和background-size來定義。
html中設定<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >表示檔案格式，在加入<link rel="stylesheet" type="text/css" href="css/hh.css"> 引入外部css連結
最先佈局一個最外面的層，設定寬度960畫素，臨時高度800畫素和背景顏色
佈局整個body體 ，所有外邊距和內填充變成0，頂點對齊
最外面的層設定居中margin：0 auto
相容：整個body體裡也設定居中，text-align：center；
最外面的層在設定整個文字左對齊方便佈局text-align：leftr；
最外面層裡設定三個層
頭部層，內容層，頁尾層
頭部層設定寬度100%沾滿，臨時高度150畫素，背景顏色用來區分
內容層設定寬度100%沾滿，臨時高度150畫素，背景顏色用來區分
頁尾層設定寬度100%沾滿，臨時高度150畫素，背景顏色用來區分
裡面三個層高度臨時固定，刪除最外層的臨時高度 和背景顏色
三個層之間需要有間隙，空白，如果在每個層裡定義margin修改的時候很麻煩，所以定義一個加塞的層，類名nav，定義寬度width：100%，高度10px；
相容：IE瀏覽器在設定高度低於18畫素的時候都按照18畫素計算，所以IE高度高於其他瀏覽器的高度，新增一句超出的部分隱藏，overflow：hidden
在頭部的層裡分為4格層，logo層，banner層，工具層，導航層。
樣式定義在頭部附近，便於尋找。
banner層定義寬度，高度和背景顏色
工具層定義寬度，高度和背景顏色
導航層定義寬度，高度和背景顏色
相容：標準的盒子外層指定高度是不會給撐開的，非標準的盒子會撐開，去掉頭部的高度
logo層設定左浮動float：left；
banner層設定左浮動float：left；並且外邊距設定10畫素隔開
工具層設定右浮動float：right；
導航層設定左浮動
相容：非IE瀏覽器出現不在一個層的情況，把所有層設定成浮動，對於間隙層，單設定浮動會往上走，所以不挨著浮動塊，clear：both；
刪掉頭部的顏色
body體內設定兩個層，左側層，右側層
左側層寬度750畫素，高度600畫素，背景顏色，左側浮動
在左側層裡設定左右兩層，小左層，小右層 。
左層的選擇器定義的是id，#left，小左層選擇器定義的是class，.left，在左層的附近定義小左層 ，#left .left
在定義兩個層，一共四個層，中間設定間隙div佈局。
去掉body的背景顏色和高度。
logo位置換成圖片
html里加入<img>
csss設定圖片邊框為0，內邊距，外邊距都為0.
去掉logo層的顏色
調整圖片的外邊距或者logo層的內邊距，讓圖片居中
調整圖片的大小和邊距給圖片加格樣式。
在導航欄里加列表
列表清空一下外邊距，內邊距和列表的樣式，margin：0；padding：0；list-style：none；
列表設定左側浮動，列表的文字居中，設定文字的行高
加小豎條，寬度和高度自定義，IE高度小於18畫素，使用overflow：hidden，隱藏起來，調整位置
內容層里加兩個層
上邊標題層，下邊內容層。
上下層的寬度設定100%適應內容層的寬度，高度設定26畫素，設定邊框實線，刪掉內容層裡的高度和背景顏色，
相容：設定邊框線後，iE瀏覽正常，非IE瀏覽時候，增加1畫素的邊框線。所以格外設定一個樣式，用來存貯新的寬度，
在上邊層 加個類名class=“tit kuan1” 下邊層加一個類名class=“nei kuan2”
kuai1樣式：width：298 ！important； width：300px；
上邊標題層刪除背景顏色換成背景圖片
在html裡寫入標題<h3>
樣式裡給h3清空樣式
給h3加新樣式，水平居中
給某個層裡html標記的時候可以使用層裡的類名加上html標記，表名只給這個層裡的這個html標記樣式，不影響其他層裡同樣html標記的樣式。
圖片大小和層的大小不合適的時候可以通過background-position和background-size來定義。