学习日记

看到大多数的博客的博客名称都是用的文字，而不是图片。听说，这样有利于SEO，于是，试着加入文字的博客名称。原来的Blogool的模板实际也是用css显示的是图片，而博客名称是<h1></h1>括起来的文字。这应该是符合SEO原则的，但我没有去深究。

我对css基本上是一窍不通，又不想去学。找了其它网站的源代码来依葫芦画瓢，结果，在linux下firefox中调好的页面在windows的IE下严重变形。只得重来。

我找出wordpress最初默认安装的主题，把相关的代码抄下来，改了改，就贴上去了。下面把相关的代码贴在这里，因为有不少元素不知道该怎么用，以后需要的时候再接着学习学习。

style.css的代码：

/*
=header
*/
#hd{
margin-bottom: 18px;
}
#hd h1{
margin: 12px 0 12px 0;
font-size: 33px;
font-weight: bold;
text-align: left;
}

#hd h1 a:link,#hd h1 a:visited,#hd h1 a:hover{
color: #000;
text-decoration: none;
}
#hd .description {
font-size: 1.2em;
text-align: left;
padding-left: 8px;
}

header.php中的代码：

<div id="hd">
<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div><!--/hd -->

把这段代码贴上看看，好像是没有图片的好看，又把原来 Blogool的css稍稍改了一下，让它显示图片。

代码如下：
/*
=header
*/
#hd{
margin-bottom: 18px;
}
}
#hd h1{
margin: 0 0 6px 0;
font-weight: border;
text-align: left;
}
#hd h1 a{
display: block;
text-indent: -9999px;
background: url(images/logo.gif) no-repeat;
width: 247px;
height: 62px;
}
#hd h1 a:link,#hd h1 a:visited,#hd h1 a:hover{
color: #000;
text-decoration: none;
}
#hd h2{
font-size: 25px;
font-weight: normal;
font-family: simhei;
padding-bottom: 8px;
margin: 0.5em 0 1em 0;
}
#hd .description {
font-size: 1.2em;
text-align: left;
padding-left: 18px;
}

header.php的内容没有变。

2007.09.06更新：

还可以有几种修改标题的方案备用：

1、<h1><a href=”<?php bloginfo(’url’); ?>” title=”<?php bloginfo(’name’); ?>”><?php bloginfo(’name’); ?></a>
<span class=”description”><?php bloginfo(’description’); ?></span> </h1>

可以把标题和说明放在一排，说明小字。但是说明也在<h1>标签内，对seo不好。相关知识点：组织元素（span和div）；

2、用绝对定位的方案把标题和说明也许可以放在一排，且标题在<h1>标签内，说明不在<h1>标签里面，说明小字体。如登录框部分的代码：

#trlogin{
position: absolute;
top: 3px;
right: 2em;
font-size: 12px;
text-align: right;
}

3、另如解惑使用的那种utom的主题，也可以恰当的把标题和说明放在一排。

css文件：

#header {
background:#000;
}

#header .inside {
padding:3em 0;
}

#header h2 {
font-size:2.25em;
border-right:1px solid gray;
float:left;
margin:0 0.5em 0 0;
padding:0 0.5em 0.25em 0;
}

#header h1 {
font-size:3em;
border-right:1px solid gray;
float:left;
margin:0 0.5em 0 0;
padding:0 0.5em 0.25em 0;
}

#header h1 a {
color:#FFF;
text-decoration:none;
}

#header h2 a {
color:#FFF;
text-decoration:none;
}

#header p {
line-height:1em;
margin:0;
padding:1em 0;
}
html源码：

<div id="header">
<div class="inside">
<div class="utom">
<div id="search">
<form method="get" id="sform" action="http://www.jiehoo.com/">
<div class="searchimg"></div>
<input type="text" id="q" value="" name="s" size="15" />
</form>
</div>
<img src="/images/logo.png" style="float:right" alt="JieHoo logo" />
<h2><a href="http://www.jiehoo.com/" title="解己之惑，解人之惑">解惑</a></h2>
<p class="description">解己之惑，解人之惑</p>
</div>
</div>
</div>