边学边改blog--把标题栏变成3列的格式

本打算昨天写的东西，一拖就拖到今天了。。。昨天在《边学边改blog--简单修改标题栏》一文里写了要把标题栏变成3列的格式。HATA就接着昨天的话题说吧。记得在简单修改标题栏的步骤1中
HATA找出了标题栏的代码

<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>

并修改为：

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

HATA现在要继续在上面做修改。
1，首先，如果你在标题栏里挂上了除标题外其他的widget（标题栏的代码会多出其他的widget），先把它们安置到其他的位置，例如尾栏或者边栏上。以免在修改标题的时候把这些widget删掉了。

2，修改完毕后，查看一下标题栏的代码，是不是恢复到简单修改标题栏的步骤1中修改后的代码一样：

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

现在HATA要再次修改这段代码增加一些内容：

<div id='header-wrapper'>
<div class='header' id='header'>
<b:section id='header1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='博客名称' type='Header'/>
</b:section>
<b:section id='header2' showaddelement='yes'/>
<b:section id='header3' showaddelement='yes'/>
</div>
</div>

看清楚大小写哦，这样就在header里面多加了两个section，然后还要在css区上添加一些代码才能正常显示，因为这3个section是同一列的关系，别急着保存，我们先下拉一下模板，看一看下一段是不是<div id='content-wrapper'>,要是不是content-wrapper的话，就把它的id名字记下来，一会要用上。现在可以保存了。
再看一看布局-》页面元素 里，是不是变成这样了：是的话就可以继续下一步。
3，记得在简单修改标题栏的步骤3中放的代码吗？HATA把自己加的代码都放在两个/* ---添加--- */的里面，现在在/* ---添加--- */里加上这段代码：

#header1 {width:220;float:left;}/* ---HATA之前没有加上宽度width，ie的排版立刻乱了，ff确没有乱，可见ff是多么的优秀>. <，这里网要感谢一下NS兄的帮助--- */
#header2 {width:220;float:left;}
#header3 {float:right;}/* ---以上3句就是把步骤2里的3个session变成横向关系的关键语句--- */
#content-wrapper {clear:both;}/* ---这个是消除浮动--- */
#header {height:60px;} /* ---70px是我标题栏背景的高度，不加这一句的话在某些浏览器里会排版出错（忘记是ie还是ff了）--- */

记得HATA在步骤中叫你记下的id吗？就是用在消除浮动上面。把你记下的id替换掉content-wrapper字样吧。不使用消除浮动，浏览器的位置排版就会出错。HATA现在基本上是完成任务了。HATA现在挂个插件上去看看效果：


HATA之前因为blog在ie下显示错位的问题发表了的疑问已经得以解决了，在这里要感谢NS兄的帮助，谢谢。

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