October 6, 2009
csylvia
在天空部落發表於16:11:04 |
JavaScript
鼓勵此網誌：0
很多人喜歡在 Blog 邊欄塞些東西（我也不例外），
越塞越多的結果就是整個頁面被拉得很長，
還有影響頁面下載效率，
甚至因為某個外來連結的錯誤導致整個頁面無法正常下載。
要解決後面兩項問題的方法，
去除掉「不要放」這個解法以外（會用這種解法就不會困擾了好不好），
另一個解法就是使用 iframe：
| <iframe width="寬度" hight="高度" src="連結網頁的網址"></iframe> |
使用這個的好處在於 iframe 中是另外一個網頁，
在該網頁上嵌入東西，如果因此造成 lag 也是該網頁的事情，
跟使用 iframe 的主網頁無關。
但缺點是要額外生一個網頁（網頁存放哪裡就是個問題了），
還有這個語法只有 IE 支援。
不過到底要怎麼解決這問題不是本篇的重點（那還講那麼多？），
而且其實我很懷疑這問題真的解決嗎？以目前的 blog 架構而言......還是少放一點邊欄玩意兒才是正規解法吧。
本篇重點其實在於如何把落落長的東西，用 scroll-content 的方式將其縮短，讓頁面不必被拉得很長。
有兩個解法如下，一是把所有邊欄都加上「長度限制＋scroll」。
由於天空目前的邊欄 <div> 的 id 值為「sideContent」（除非舊版不一樣），
所以開啟 CSS 後找到「sideContent」，
然後加上以下語法：
| .sideContent { ...; overflow: auto; height: 100px; width: 100%; } |
儲存好後開啟頁面，
就會看到以下效果：
不過我不想要每個邊欄都出現 scroll 啊，
只想把某一欄縮小，該怎麼作？
譬如把「該推就推」這一個推廣欄縮小，
就可以再新增「自由欄位」時加入以下語法：
| <div style="overflow: auto; height: 100px; width: 100%;"> <!--在這裡放入你要放的東西--> </div> |
效果如下：
這樣就可以只針對某個邊欄增加 scroll 喔～～ ^^
- 如何利用捲軸讓邊欄（Sidebar）元件縮短>>0 與 1 謎詭世界
- Wordpress外掛【Tab Pane】標籤式分頁，讓側邊欄更整齊簡化 | 就是教不落
- 如何讓部落格、網站有favicon小圖示？(免軟體，線上工具) | 香腸炒魷魚
- favicon.ico Generator
- css实现顶边栏框架样式 - 页面布局
