2欄位、3欄位配置、網頁的置中
20.自訂樣板
什麼是欄位?
「欄位」即為設定部落格有幾列的顯示方式。
將邊攔設置在兩側稱為3欄位、只設置在一邊稱為2欄位,不分割邊攔而僅只在中央的設置稱為1欄位。
其他尚有不規則的欄位配置。
(2欄位、3欄位的製作說明將以樣板「white_style」為例)
2欄位配置的製作
在此說明在官方樣板上也很熟悉的2欄位配置的製作方法。
製作的方法有很多種,但以下就比較簡單的概括內容來介紹。
●樣式單部分(CSS)
●HTML部分
3欄位配置的製作
當色彩和自訂的資訊量增加時,設置3欄位將會更加便利。
只要調整前述的2欄位配置,即可製作出來。
●樣式單部分(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部分
網頁的置中
根據樣板的不同,也有從初期開始就是置中成1欄位的配置。
在此就具代表性的方法做說明。
以最常使用的方法來說,是在塊級要素上涵蓋全體內容並自動設定邊緣,從瀏覽器的圖片大小計算出一個值,最後使左邊後右邊的邊緣相等完成置中。
●樣式單部分 (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>
「欄位」即為設定部落格有幾列的顯示方式。
將邊攔設置在兩側稱為3欄位、只設置在一邊稱為2欄位,不分割邊攔而僅只在中央的設置稱為1欄位。
其他尚有不規則的欄位配置。
(2欄位、3欄位的製作說明將以樣板「white_style」為例)
2欄位配置的製作
在此說明在官方樣板上也很熟悉的2欄位配置的製作方法。
製作的方法有很多種,但以下就比較簡單的概括內容來介紹。
●樣式單部分(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欄位配置,即可製作出來。
●樣式單部分(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欄位的配置。
在此就具代表性的方法做說明。
以最常使用的方法來說,是在塊級要素上涵蓋全體內容並自動設定邊緣,從瀏覽器的圖片大小計算出一個值,最後使左邊後右邊的邊緣相等完成置中。
●樣式單部分 (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>