看到別人的網頁都有三個欄,今天也來讓自己的網頁也改成三欄式吧,以下三欄式的改法:
1. 第一個是決定你網頁的總寬度,我是用 99% ﹐50%(#main-wrapper )+20%(#sidebar-wrapper )+22%(#newsidebar-wrapper )+各margin=99% 這部份你自己可以先計算一下
PS: 當然你也可以用 px 來作設計, 但因為我懶得作計算, 所以用 % 比較方便
2. 新增一個 sidebar (#newsidebar-wrapper )下面紅色標識的,就是新增的第二個sidebar
PS: 你可以複製 #sidebar-wrapper 的 css 樣式, 然後改名為 #newsidebar-wrapper , 注意: 不能同時有兩個 #sidebar-wrapper , 不然會出錯的
#outer-wrapper {
width: 50%;
...
}
#main-wrapper {
width: 50%;
margin-$startSide: 1%;
...
}
#sidebar-wrapper {
width: 20%;
margin-$endSide: 0.5%;
...
}
#newsidebar-wrapper {
width: 22%;
margin-$endSide: 0.5%;
...
}
3.在 <div id="main-wrapper"> 與 <div id="sidebar-wrapper"> 中間加入<div id="newsidebar-wrapper"> 就像下面
<div id="main-wrapper">
...
...
</div>
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<div id="sidebar-wrapper">
...
...
</div>
接下來你到Page element就可以看到第三欄出來了﹐若把各顏色變數字形變數也新增的話﹐以後你在這Fonts & Colors 就可以直接調整。
參考文獻:
Aqua , A-V and BSD Blogger - Blogspot 三欄的改法
Hackosphere三欄式Beta
对不起~
回覆刪除我不会哦~
可以教教我吗?
在 版面配置-> 修改 HTML 然後依文章的說明作修改就可以了.
回覆刪除您好我在修改第3項出現了點問題
回覆刪除錯誤訊息顯示如下:
「我們無法預覽您的範本
請修正下列錯誤,再重新提交您的範本。
新的小工具 ID「NewProfile」對類型「Profile」而言無效」
想請問,可能是出現什麼問題呢?
謝謝
出現這個問題, 有時是電腦內的 Cache 問題, 不妨可以刪除 IE 的暫存檔, 然後再存檔一次看看
回覆刪除新的小工具 ID「NewProfile」對類型「Profile」而言無效」
回覆刪除NewProfile那行整行刪除就可以了 不知道甚麼原因耶
我也出現這個問題