作者huanson (Friday)
看板Blog
标题[Blogger] 在样版里新增左右两栏并列的区块
时间Thu Aug 6 23:10:03 2009
以 Douglas Bowman 的 Minima Dark 样本为例. 本来是长这样:
(sorry, 图带不进来.)
那我们要如何在最下面再加新的区块, 而且是左右两栏的区块呢?
首先打开样版 (Edit Template),
找到最下面那块 div 的 id 是 footer-wrapper.
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
紧跟後头新增两段程式码:
<div id='footer-wrapper-l'>
<b:section class='footer-l' id='footer-l'/>
</div>
<div id='footer-wrapper-r'>
<b:section class='footer-r' id='footer-r'/>
</div>
<br clear='all'/>
几乎只要照抄, 把 name 改成不一样的就好了. 重点:
1.是 class, 要跟下段的 css 对应到;
2.是 <br clear='all'/>, 如果下面还要再加新的区块, 又没有写这行的话,
从下面开始位置会乱跳.
接着回头找 class footer 的 css.
#footer {
width:660px;
clear:both;
/* margin:0 auto; 这行是我改掉的, 因为跟下面黏超紧的, 很丑. */
margin: 8px;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
紧跟後头新增两段程式码:
#footer-l {
float:left;
width:320px;
margin:8 px;
padding:8 px;
border-right:1px dotted $bordercolor;
}
#footer-r {
float:right;
width:320px;
margin:8 px;
padding:8 px;
}
这边不能照抄原来的, 要做些许变动, 重点:
1.是 clear:both; 一定要删掉, 因为本次目的是要做成左右并列的两栏.
2.是 float:left; float:right; 一定要加上, 理由同上,
因为本次目的是要做成左右并列的两栏.
赶快回去网页元素 (Page Elements) 的地方看看:
(sorry, 图带不进来.)
下面两个并列的区块出来了! 打完收工, 就这麽简单.
(其他参数就可以依实际需求再作调整, 我是只有先在中间画一条线.)
如果需要完整 .xml 参考的乡民, 麻烦请到:
http://disorder.ojisang.com/2009/08/google-blogger.html
留言索取.
*** 以上网址有广告, 请慎重考虑是否点入. ***
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 220.136.226.226
1F：推 peter1:应该要加个</b:section>封起来... 08/07 10:49
2F：→ peter1:我是要改main耶 用你的方法不行 冏" 08/07 10:49
3F：推 a892245:单行结尾是 />的就不用再加相对的结束标签罗 08/07 14:27
4F：→ a892245:你要改main就放在<div id="main-wrapper"></div>的後面啊 08/07 14:29
5F：→ huanson:谢谢楼上帮忙回答 (不知道批特先生懂了没?) 08/07 15:00
6F：推 peter1:我试过耶 不行...冏: 08/07 19:39
7F：推 a892245:那如果只塞<b:section class='footer' id='footer'/>和 08/07 19:53
8F：→ a892245:<b:section class='footer-r' id='footer-r'/>在 08/07 19:54
9F：推 a892245:<div id='main-wrapper'>里的</b:section>後面呢？ 08/07 19:56
10F：→ a892245:其他的css要跟着一起写，这样应该可行吧 08/07 19:57
11F：→ a892245:啊 不对是塞<b:section class='footer-l' id='footer-l'/> 08/07 19:57
12F：→ a892245:跟<b:section class='footer-r' id='footer-r'/> 08/07 19:57
13F：→ a892245:css的宽度也要注意喔 两个栏位加起来不能超过main 08/07 19:59
14F：→ a892245:不然有一个会掉下去 08/07 19:59
15F：→ huanson:谢谢楼上 08/07 20:01
16F：→ huanson:其实不懂HTML语法的人不要怕啦 多try几次就会啦 08/07 20:02