頁尾
頁尾如同字面上的意義,位置在樣版的尾端,嗯...正如你所想的,是在樣版的最底下,用來添加你的版權聲明。那麼,我們必須用
div標籤來增加頁尾(
Footer)。
複製到
index.php檔案裡。
<?php
/**
* @version - Template version goes here
* @package - Name of the template goes here
* @author - Author's name goes here
* @email - Your email goes here
* @website - Your website goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = split( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<?php mosShowHead(); ?>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php
echo "<link rel=\"stylesheet\"
href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\"
type=\"text/css\"/>" ; ?>
</head>
<body>
<div id="main_container">
<div id="header">
Header
</div>
<table width="100%" cellpadding="0" cellspacing="0">
<tr valign="top"> <td width="150">
Left Column Content
</td><td width="100%">
Center Column Content
</td><td width="150">
Right Column Content
</td></tr>
</table>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
頁尾的CSS
我們現在來增加頁尾(
Footer)的CSS屬性。
複製到我們的
template_css.css檔案內。
/**
* @version - Template version goes here
* @package - Name of the template goes here
* @author - Author's name goes here
* @email - Your email goes here
* @website - Your website goes here
* @copyright (C) - Your copyright goes here
* @license - Type of license goes here
*/ body {}tr, p, div {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #666666;
}
/********** Main Container **********/
#main_container {
width : 100%;
display : table; /* must put this in for FireFox. */
text-align : left;
margin : auto;
border : 1px solid #cccccc;
}
/********** Header **********/
#header {
width : 100%;
height : 80px;
text-align : center;
margin-bottom : 15px;
border : 1px solid #cccccc;
}
/********** Footer **********/
#footer {
width : 100%;
height : 20px;
text-align : center;
}