边学边改blog--简单修改标题栏

记得HATA前几天曾经交待过在看css，今天HATA初试修改模板，目标是在原有的模板上修改标题栏的排版，使得标题栏可以横向并排3个widget，经过一番调试后终于成功了，暂时先说说在标题栏里加上一个简陋的导航菜单。
方法很简单：
1，进入布局-》修改HTML，把修改模板里面的代码备份一下，然后在修改模板里查找<div id="header-wrapper">
找到类似以下代码：

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="博客名称" type="Header">
</b:section>
</div>

在这里，修改showaddelement值为"yes"，删除maxwidgets="1"字段。

2，回到布局-》页面元素看看效果，头部分是不是增加了"添加小工具"按钮，这就是HATA第一部分修改的目的了，然后我们点击“添加小工具”，添加一个名为"HTML/JavaScript"的widget，摆放到标题widget的下方（注意，不知道其他的官方模板结构和HATA用的一不一样，HATA这里有可能会把widget拉到crosscol-wrapper层里，就是整个标题栏的下方，再拉多一次调整一下吧，效果应该是在标题栏里面，刚好在标题的下方）
在widget里面输入

<ul id="headnav">
<li><a href="链接地址1" target="blank">名称1</a></li>
<li><a href="链接地址2" target="blank">名称2</a></li>
</ul>

li部分可以输入若干行，如果想加入图片的话可以把名称部分修改为：<img alt="叙述" src="图片地址"/>，到这里，我们就做好一个竖式的导航菜单了。
3，把竖式的导航菜单变成横式，方法很简单，我们先回到修改模块的版面，找到里面的css区（就是有放着类似#header，.post这些字样的地方），加入以下代码：

/* ---添加--- */
#headnav {margin:0px; padding:0px;}/* ---margin是修正高度位置--- */
#headnav img {border:0;}
#headnav li {display:inline;/* ---这个是把竖式变横式的关键--- */
margin-right:5px;/* ---这个是间距--- */
}
/* ---添加--- */

可以把margin写成 margin:0px 0px 0px 0px;分别代表上右下左的位移。这部分我是借用了NS兄的代码，用div写横向列表一般都是这样写的。
得出的效果图：

一些想法：
但是HATA这几天看过很多的blog，他们都喜欢把导航菜单放到标题栏的最右边，与标题字样对称。难道要使用属性margin把列表强行位移到最右面吗？
这也是其中一个方法，但是HATA觉得这个方法有点自欺欺人了，要是把头部分（标题栏的位置）改为可以挂放两列或者3列的widget，把导航菜单放到最后一列不就把问题解决了吗？HATA第一次去NS兄的blog时就对这个长草了，可惜一直不能把NS兄提供的模板导入成功，正好这两天把css的基础知识一口气看完了，瞎弄了半天终于搞出来了，方法同样不难。

HATA这里先休息下，忙其他的事情。稍后把方法写出来，大约2～3步就能搞定它。

写好了，边学边改blog--简单修改标题栏

原创文章如转载，请注明：转载自HATA菜谱