《HTML5 精要剖析》- 2.1.2 關於版型/調整內容配置

2012-03-31

5032
0
HTML5

這一篇討論的是區塊切割之後的內容配置，經由 CSS 設定，調整預設的行為，進一步達到外觀設計上的需求

完成基本的區塊切割，大致上我們就決定了網頁所要配置的內容區域，緊接著要作的便是調整內容在這些區塊裏面呈現的位置，在預設的情形下，配置於區塊中的內容會切齊左上角，回頭看前一節的範例畫面，以<header> 中的標題「康廷數位學院」為例，原始的配置如下：

標題目前是緊貼著左上角呈現，同樣的<footer> 區塊中的內容預設配置亦相同，現在，我們要改善這種情形，作法很簡單，只的要設定區塊標籤的padding 樣式即可，再次回前述的範例來看看實際的作法，為了方便說明，首先重設<style> 標籤中的樣式如下：


<style>
    header
    {
        height: 100px;           
        background:black;
        color:silver;
    }
    div
    {
        height: 300px;          
        background:gray;
    }
    footer
    {
        height: 60px;          
        background:silver;
    }
</style>

現在專注在 header 選擇器中的樣式設定，於其中進一步設定padding 樣式如下：


header
{ 
    height:100px;            
    background:black;
    color:silver;
    padding:20px;       
}

現在其中設定了padding 樣式項目值為20px ，重新檢視網頁得到以下的結果：

如你所見，其中的「康廷數位學院」已經不再緊貼著左上角，它與周圍隔出了20px 的距離，如下圖：

讀者應該發現了，padding 屬性同時讓<header> 的height 總共多了40px 的高度，這將破壞原來的區塊設計尺寸，因此我們通常不會直接配置<header> ，而是再將其包裝於<div> 標籤中進行樣式設計，這一部份後續再談。

為容器配置樣式padding ，將導致其中的內容與上下左右四個邊界出現指定寬度的距離，而在設計實務上，這通常不符我們的需求，例如在這個配置中，右邊界與下邊界的距離完全不需要，因為原來的配置空間已經足夠了，我們只需要配置左邊界與上邊界的寬度即可，針對不同寬度的彈性配置，可以利用以下的樣式語法：


padding-top:20px;  　　//上邊界
padding-right:0px;     //右邊界          
padding-bottom:0px;    //下邊界
padding-left:20px;　　 //左邊界

其中四組數字，從左到右依序表示上、右、下、左四個距離，因此這一次你會得到這樣的效果：

如此一來，移除右邊與下邊兩個不需要的距離設定，當然，整個<header> 的高度亦只擴張了20px 。你也可以針對這四個數字進行獨立樣式的配置，padding 的四個數值設定與下方的設定相同：

padding-top:20px; 　　//上邊界

padding-right:0px; //右邊界

padding-bottom:0px; //下邊界

padding-left:20px;　　 //左邊界

如其名稱，這四個樣式項目所代表的意義，分別是與邊界上、右、下、左四個距離。

到目前為止談到的原理同樣適用於其它種類的區塊配置，例如<footer>，現在設定如下：


footer
{
    height: 60px;          
    background:silver;    
    padding-top:30px;        
}

現在，我們將指定 padding-top 樣式前後的畫面一併列舉，你會看到以下的結果：

在實務設計上， <footer> 還有另外一個問題是，內容的配置通常為置中，要達到這個目的，只要指定text-align 樣式值為center 即可，因此我們進一步擴充footer 樣式如下：


footer
{
    height: 60px;          
    background:silver;    
    padding-top:30px;        
    text-align:center;
}

其中最後一行完成了 text-align 樣式的設定，因此我們得到以下的輸出結果：

下一篇，我們要看更複雜的區塊切割設計，以及網頁內容的大綱輸出。

回首頁