1. 程式人生 > >html在文字框中加入滾動條

html在文字框中加入滾動條

    我們都知道大篇幅的文章會佔據頁面的大部分空間,從而影響頁面整體的美觀性,而通過為其新增一個帶有滾動條的文字框,則能夠很好地解決上述問題。下面就是相關語法:

<DIV align=center 
style=' 
color: #ffffff; 
background-color: #000000; 
border: solid 2px black; 
width: 120px; 
height: 200px; 
overflow: scroll; 
scrollbar-face-color: #889B9F;
scrollbar-shadow-color: #3D5054;
scrollbar-highlight-color: #C3D6DA;
scrollbar-3dlight-color: #3D5054;
scrollbar-darkshadow-color: #85989C;
scrollbar-track-color: #95A6AA;
scrollbar-arrow-color: #FFD6DA;
'>日誌文字</DIV>

上述語法生成一個帶有黑色背景及灰藍色邊框的文字滾動框。語法裡的引數相當簡單,主要是控制不同部分的色彩,你可以做相應變化並在預覽中觀看實際效果。至於調整文字框的大小,你可以在插入此語法後退出HTML編輯模式,然後在日誌編輯頁面使用滑鼠直接進行調整。

接下來說說文字豎排是如何實現的。除了製造特殊效果,我在Space空間展示的文字豎排沒有什麼真正的實用性,只會給閱讀者造成麻煩,不過本著儘可能挖掘Space潛力的原則,我還是嘗試瞭如下的語法:

<DIV style="FONT-SIZE: 9pt; WRITING-MODE: tb-rl; TEXT-ALIGN: left"><p>日誌文字</P></DIV>

這個語法中唯一的亮點就是Writing-Mode這個引數,其後的tb代表文字排列從上到下,rl代表從右到左。