2008年1月14日 星期一

製作有上下捲軸的公佈欄

最近在另一個網站加上了重點資訊,類似佈告欄的方式呈現,就是設定一個框框,將最新的旅遊資訊置頂表示,重點是我只要一個固定大小的格式,就算資訊多,也可以在旁邊出現捲軸讓你上下拉,可以看到所有的訊息,就像下面這樣,或是你也可以參考我的網站-東京封印


語法大概像以下這樣,你可以自行變化,
<div style="border:2px solid #1AC300;background-color:#ffffcc;padding:5px;height:160px; width:95%; overflow:auto;">
重要資訊內容
</div>

‧div:設定一個區塊。
‧style:設定樣式,每個定義請以分號 ; 隔開。
‧border:框線,你也可以設成border-top或是border-bottom,只要上框或是下框,沒有註明的話,就是四邊都有框。
‧height:框框的高度,可以自由控制高度。譬如你想介紹書本,放在邊欄,再多的書本也不會佔去版面太多空間,讀者可以上下拉bar來瀏覽。
‧width:百分比,因為通常我們的邊欄寬度是固定的,所以就用百分比比較方便,如果要用固定的px也是可以的。
‧background-color:背景顏色,或者你也可以加上背景圖案background-image:url(“圖片網址”);表示。
‧padding:文字與框框的距離,也是可以設padding-top或是padding-left等等。
‧overflow:auto; 這個是設定捲軸出現與否,有大過高度的資料就會出現捲軸,沒有大過高度就不會出現捲軸,有四種設定auto:自動捲軸、visible:沒有捲軸、hidden:隱藏捲軸、scroll:強迫捲軸。

簡單的介紹到這裡,如果想知道有關捲軸的語法可以參考下列網站,有很詳細的說明。
參考網站:
真夏の星夜™: 簡單使用讓文章加上捲軸

1 則留言:

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能