v 製作有上下捲軸的公佈欄 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...