header.php
- <!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" lang="zh-CN">
- <head profile="http://gmpg.org/xfn/11">
- <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
- <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> »Blog Archive <?php } ?> <?php wp_title(); ?></title>
- <!-- Meta Tags -->
- <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
- <meta name="robots" content="index, follow" />
- <meta name="keywords" content="" />
- <!-- Favicon -->
- <link rel="shortcut icon" href="favicon.ico" />
- <!-- CSS -->
- <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
- <!-- RSS -->
- <link rel="alternate" type="application/rss+xml" title="<?php bloginfo ('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
- <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
- <!-- WordPress Tags -->
- <?php wp_get_archives('type=monthly&format=link'); ?>
- <?php wp_head(); ?>
- </head>
- <body>
- <div id="header">
- <div class="bloginfo">
- <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
- </div>
- <div class="admin">
- <?php wp_loginout(); ?>
- <a >Sub-Menu</a>
- </div>
- </div>
- <!-- header -->
- <div id="page">
line1-5:用來(lái)描述頁(yè)面的基本信息,諸如使用那一種標準,字符編碼,還有頁(yè)面標題。
line7-13:一些meta標簽信息和站點(diǎn)ico設定。
line15-20:對css文件和rss訂閱地址的設定,方便自動(dòng)發(fā)掘程序。
line22-24:我也不知道干嗎的,反正個(gè)個(gè)模版都有-_-;。
line29-35:標題部分。
真正在頁(yè)面上看到的效果其實(shí)只有line29-35這一段,一開(kāi)始只有Blog標題(左)和
login鏈接(右),后來(lái)為了方便跳轉到頁(yè)底的Sub-Menu部分又增加了一個(gè)鏈接。標題圖片
demo1是直接在body里設定的。相應的CSS部分如下:
- html, body {
- margin: 0;
- padding: 0;
- }
-
- body {
- background: #fff url(images/bg.jpg) no-repeat center top;
- font-size: 1em;
- font-family:"Trebuchet MS", "Lucida Grande", Arial, Helvetica, sans-serif;
- word-spacing: 0.15em;
- letter-spacing: 0em;
- line-height:1.3em;
- margin: 0 0 0 0;
- padding: 0 0 0 0;
- }
-
- #header {
- float:left;
- overflow:hidden;
- display:inline-block;
- font-size:0.8em;
- background:#797979;
- color:#fff;
- height:20px;
- width:100%;
- }
-
- .bloginfo a {
- float:left;
- color:#fff;
- text-align:left;
- padding:0 0 0 5px;
- }
-
- .admin a {
- float:right;
- color:#fff;
- text-align:right;
- padding:0 5px 0 0;
- }