web前端學習筆記(CSS固定寬度佈局)

OrangeAdmin發表於2013-09-29
Web前端筆記CSS

一、單列布局：

      這是最簡單的一種佈局方式，之所以給出該示例，還是為了保證本篇部落格的完整性。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>固定寬度佈局</title>
<style type="text/css">
#header,#pagefooter,#content {
    border: 1px solid red;
    margin: 10px auto 10px 10px;
    padding: 5px;
    width: 360px;
}
</style>
</head>
<body>
<div id="header">
    <h2>Page Header</h2>
    <p>
        這是一行文字，這裡作為樣例，顯示在佈局框中。<br/>
        這是一行文字，這裡作為樣例，顯示在佈局框中。 
    </p>
</div>
<div id="content">
    <h2>Page Content</h2>
    <p>
        這是一行文字，這裡作為樣例，顯示在佈局框中。<br />
        這是一行文字，這裡作為樣例，顯示在佈局框中。
    </p>
</div>
<div id="pagefooter">
    <h2>Page Footer</h2>
    <p>這是一行文字，這裡作為樣例，顯示在佈局框中。</p>
</div>
</body>
</html>

      從CSS程式碼可以看到，3個div的寬度都設定為固定值360畫素，同時將margin設定為margin: 10px auto 10px 10px，從而實現了右側好像有個彈簧，將他們全部擠到左側，反之，如果想把他們全部擠到左側，可以將margin設定為margin: 10px 10px 10px auto。見如下效果圖。

 二、“1-2-1”固定寬度佈局：

      該佈局也是經常會用到的，這裡我們先給出最終的效果圖，然後再給出程式碼，以便大家都能現有一個感官上的認識，再看code就會容易很多。


      下面為與上圖匹配的HTML程式碼：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>佈局固定寬度</title>
<style type="text/css">
div ,p, h2 {
    margin: 2px;
    padding: 5px;
}
#container {
    width: 612px;
    margin: 10px auto;
}
#header,#footer {
    width: 596px;
    border: 1px solid red;
} 
#content {
    float: left;
    width: 360px;    
    border: 1px solid red;
}
#side {
    float: left;
    width: 220px;
    border: 1px solid red;
}
#footer {
    clear: both;
}
</style>
</head>
<body>
<div id="container">
    <div id="header">
        <h2>Page Header</h2>
    </div>
    <div id="content">
        <h2>Page Content 1</h2>
        <p>對於一個網頁設計者來說，HTML語言一定不會感到陌生，因為它是所有網頁製作的基礎。但是如果希望網頁能夠美觀、大方，並且升級方便，維護輕鬆，那麼僅僅HTML是不夠的，CSS在這中間扮演著重要的角色。</p>
    </div>
    <div id="side">
        <h2>Side Bar 1</h2>
        <p>對於一個網頁設計者來說，HTML語言一定不會感到陌生。</p>
    </div>
    <div id="footer">
        <h2>Page Footer</h2>
        <p>這是一行文字，這裡作為樣例，顯示在佈局框中。</p>
    </div>
</div>
</body>
</html>

      這裡需要主要關注的是CSS中#content和#side都被設定為向左浮動float: left，二者的寬度相加等於總寬度，例如這裡將它們的寬度分別設定為360px和220px。本例出於方便展示的目的，新增了padding/border/margin將各個div的邊界顯示的分離出來，這樣#content和#side每個div的實際所佔寬度均為自身寬度 + (5px + 5px) + border(1px + 1px) + margin(2px + 2px)。最後需要注意的是#footer的CSS中新增了clear:both，否則如本例content的高度高於side高度，footer將會被content的底部覆蓋，這是因為float為left的div沒有在標準流中。如下圖為#footer去掉clear:both之後的效果。

三、“1-3-1”固定寬度佈局：

      和上面的1-2-1固定佈局一樣，該佈局也是經常會用到的，這裡我們還是給出最終的效果圖，然後再給出程式碼，以便大家都能現有一個感官上的認識，再看code就會容易很多。 

      和上例相比，該示例在程式碼中只是簡單的多出了一個div(#navi)，其CSS中也包含float:left。剩下就是其他相關div的寬度需要重新計算，計算方式等同於1-2-1給出的公式。下面為與改圖匹配的HTML程式碼。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>佈局固定寬度</title>
<style type="text/css">
div, p, h2 {
    margin: 2px;
    padding: 5px;
}
div {
    border: 1px solid red;
}
#container {
    width: 788px;
    margin: 10px auto;
    border: 0;
}
#header,#footer {
    width: 772px;
}
#navi {
    float: left;
    width: 160px;
} 
#content {
    float: left;
    width: 360px;    
}
#side {
    float: left;
    width: 220px;
}
#footer {
    clear: both;
}
</style>
</head>
<body>
<div id="container">
    <div id="header">
        <h2>Page Header</h2>
    </div>
    <div id="navi">
        <h2>Navi Bar 1</h2>
        <p>對於一個網頁設計者來說，HTML語言一定不會感到陌生，因為它是所有網頁製作的基礎。但是如果希望網頁能夠美觀、大方，並且升級方便，維護輕鬆，那麼僅僅HTML是不夠的，CSS在這中間扮演著重要的角色。</p>
    </div>
    <div id="content">
        <h2>Page Content 1</h2>
        <p>對於一個網頁設計者來說，HTML語言一定不會感到陌生，因為它是所有網頁製作的基礎。但是如果希望網頁能夠美觀、大方，並且升級方便，維護輕鬆，那麼僅僅HTML是不夠的，CSS在這中間扮演著重要的角色。</p>
    </div>
    <div id="side">
        <h2>Side Bar 1</h2>
        <p>對於一個網頁設計者來說，HTML語言一定不會感到陌生。</p>
    </div>
    <div id="footer">
        <h2>Page Footer</h2>
        <p>這是一行文字，這裡作為樣例，顯示在佈局框中。</p>
    </div>
</div>
</body>
</html>

四、“1-((1-2)+1)-1”固定寬度佈局：

      根據下面的效果圖，再結合前面的示例，相信大家能夠很快理解該佈局的含義。 

 

       與上圖匹配的程式碼如下，與前面一個示例相比主要的變化是加入了#left-container和#right-container兩個div。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>佈局固定寬度</title>
<style type="text/css">
div, p, h2 {
    margin: 2px;
    padding: 5px;
}
div {
    border: 1px solid red;    
}
#container {
    width: 788px;
    margin: 10px auto;
    border: 0;
}
#header,#footer {
    width: 772px;
}
#left-container {
    float: left;
    width: 552px;
}
#navi {
    float: left;
    width: 160px;
} 
#content {
    float: left;
    width: 360px;    
}
#right-container {
    float: left;
    width: 204px;
}
#side {
    width: 188px;
}
#footer {
    clear: both;
}
</style>
</head>
<body>
<div id="container">
    <div id="header">
        <h2>Page Header</h2>
    </div>
    <div id="left-container">
        <div id="banner">
            <h2>Banner</h2>
            <p>對於一個網頁設計者來說，HTML語言一定不會感到陌生，因為它是所有網頁製作的基礎。但是如果希望網頁能夠美觀、大方，並且升級方便，維護輕鬆，那麼僅僅HTML是不夠的，CSS在這中間扮演著重要的角色。</p>
        </div><!-- end of banner -->
        <div id="navi">
            <h2>Navi Bar 1</h2>
            <p>對於一個網頁設計者來說，HTML語言一定不會感到陌生，因為它是所有網頁製作的基礎。但是如果希望網頁能夠美觀、大方，並且升級方便，維護輕鬆，那麼僅僅HTML是不夠的，CSS在這中間扮演著重要的角色。</p>
        </div>
        <div id="content">
            <h2>Page Content 1</h2>
            <p>對於一個網頁設計者來說，HTML語言一定不會感到陌生，因為它是所有網頁製作的基礎。但是如果希望網頁能夠美觀、大方，並且升級方便，維護輕鬆，那麼僅僅HTML是不夠的，CSS在這中間扮演著重要的角色。</p>
        </div>
    </div><!-- end of left container -->
    <div id="right-container">
        <div id="side">
            <h2>Side Bar 1</h2>
            <p>對於一個網頁設計者來說，HTML語言一定不會感到陌生。</p>
        </div>
        <div id="side">
            <h2>Side Bar 2</h2>
            <p>對於一個網頁設計者來說，HTML語言一定不會感到陌生。</p>
        </div>
    </div><!-- end of right container -->
    <div id="footer">
        <h2>Page Footer</h2>
        <p>這是一行文字，這裡作為樣例，顯示在佈局框中。</p>
    </div>
</div>
</body>
</html>

注：該篇部落格源自《CSS設計徹底研究》中的第十三章，書中的例子簡明扼要、通俗易懂，因此選取部分主要內容與大家分享，同時也便於今後自己的線上查閱。

相關文章