2欄位、3欄位配置、網頁的置中

20.自訂樣板
01 /19 2015
什麼是欄位?

「欄位」即為設定部落格有幾列的顯示方式。

將邊攔設置在兩側稱為3欄位、只設置在一邊稱為2欄位,不分割邊攔而僅只在中央的設置稱為1欄位。
其他尚有不規則的欄位配置。
(2欄位、3欄位的製作說明將以樣板「white_style」為例)

2欄位配置的製作

在此說明在官方樣板上也很熟悉的2欄位配置的製作方法。
製作的方法有很多種,但以下就比較簡單的概括內容來介紹。

layout-2_201411141500432d3.gif 

●樣式單部分(CSS)
/* Default
------------------------------------------------- */

body {
text-align: center; /* This centers text. */
}

/* Layout
------------------------------------------------------------ */

#container {
width: 740px; /* Set the width of content */
margin-left: auto; /* Automatically computes left margin */
margin-right: auto; /* Automatically computes right margin*/
text-align: center;
}

#header {
padding: 20px 20px;
}

#main {
float: left; /* Wraps the main part (entries, etc.) around the left */
width: 500px /* Set width */
}

#sidemenu {
float: right; /* Wraps side menu around right */
width: 200px; /* Set width */
}

#footer {
clear: both; /*Remove all wrap arounds */
width: 100%;

●HTML部分
<body>
<div id="container">
<div id="header">Header Contents</div>
<div id="wrap">
<div id="main">Entry Content</div>
<div id="sidemenu">Menu Contents</div>
</div>
<div id="footer">Footer Contents</div>
</div>
</body>

3欄位配置的製作

當色彩和自訂的資訊量增加時,設置3欄位將會更加便利。
只要調整前述的2欄位配置,即可製作出來。

layout-3_20141114150045021.gif 

●樣式單部分(CSS)
/* Default
------------------------------------------------- */

body {
text-align: center; /* Centrally Align Text */
}

/* Layout
------------------------------------------------------------ */

#container {
width: 900px; /* Contents width set at 900px */
margin-left: auto; /* Automatically compute left margin */
margin-right: auto; /* Automatically compute right margin */
text-align: center;
}

#header {
padding: 20px 20px;
background-image: url("http://templates.blog.fc2.com/template/white_style/header_image.gif");
background-repeat:no-repeat;
}

#wrap {
width: 680px; /*Width set at680px(460px + 208px) */
float: left; /*Wrap main and side menu 1 around left*/
}

#main {
float: right; /* Wrap entries, etc. around right */
width: 460px !important; /* Set width*/
width /* for IE5.5 */: 500px;
margin-left: 12px; /* Set left margin */
}

#sidemenu1 {
float: left; /* Wrap side menu 1 around left */
width: 208px; /* Set width */
}

#sidemenu2 {
float: right; /* Wrap side menu 2 around right */
width: 208px; /* Set width*/
}

#footer {
clear: both; /* Remove all wrap arounds */
padding: 10px 0px;
width: 100%;

●HTML部分
<body>
<div id="container">
<div id="header">Header Content</div>
<div id="wrap">
<div id="main">Entry Content</div>
<div id="sidemenu1">Menu Content</div>
</div>
<div id="sidemenu2">Notice Board Content</div>
<div id="footer">Footer Content</div>
</div>
</body>

網頁的置中

根據樣板的不同,也有從初期開始就是置中成1欄位的配置。
在此就具代表性的方法做說明。

layout-1_20141114150042936.gif 

以最常使用的方法來說,是在塊級要素上涵蓋全體內容並自動設定邊緣,從瀏覽器的圖片大小計算出一個值,最後使左邊後右邊的邊緣相等完成置中。

●樣式單部分 (CSS)
/* Layout
------------------------------------------------------------ */

#container {
width: 900px; /* Set Contents width to 900px */
margin-left: auto; /* Automatically compute left margin */
margin-right: auto; /* Automatically compute right margin*/

●HTML部分
<body>
<div id="container">
Enter contents parts of entries or menus
</div>
</body>

             
 

blogmanualtw

歡迎來到FC2部落格!