日志模板更新

这次的更新主要是针对模板的顶头部分(header)， 原来的header是套用61dh.com的header。因为觉得那张一群孩子玩耍的图片放在少儿导航上还不错，但是放在网站开发日志上显得有些幼稚。所以就把它改成现在的深灰色背景，是不是稳重了许多? :-)

此外还更新导航条。我在以前的日志里介绍过原先的那款CSS 导航菜单, 它用的是改变背景图位置(background-position)的方法来实现鼠标划过图层变化的效果。为了和新的header匹配，我重新设计了一个简洁的导航条。新的导航条不是对单个<li>使用背景图，而是对<ul>使用背景图。另外也少了原来的鼠标滑过改变图层的效果。但是背景图仍然可以根据实际<ul>的宽度的改变而改变。

CSS 代码：

#main-tabs {
  margin-top: -2px; /*设为负数的目的是和header的下边框融合*/
  float:left;
  width:600px;
  height:30px;
  font-size:100%;
  line-height:normal;
  }
#main-tabs ul {
  background:url("/images/tabl4.gif") left bottom repeat-x;
  float: left; /* 这个很重要！*/
  height:25px;	
  margin:0 0 0 30px;
  padding:5px 10px 0 10px;
  list-style:none;
  }
#main-tabs li {
  display:inline;
  margin:0;
  padding:0;
  }
#main-tabs a {
  float:left;
  margin:0;
  padding:0 0 0 10px;
  text-decoration:none;
  }
#main-tabs a span {
  color:#FFF;
  }
.navR {
  background:url("/images/tabr4.gif") right bottom no-repeat;
  float:left;
  width:10px;
  display:block;
  height:30px;
  }

HTML 代码：

<div id="main-tabs">
  <ul>    
    <li><a href="/">少儿上网导航</a></li> 
    <li><a href="/blog">网站开发</a></li>
    <li><a href="http://english.61dh.com">英语学习</a></li>
  </ul>
  <span class="navR"></span> <!--用加入背景图的右边部分-->
</div>