프로필华天工作室[MSN教程专区]블로그리스트 도구 도움말

블로그


    10월 16일

    华天工作室--文本滚动框的制作

     


    文本滾動框...俗稱「滾動條」...是HTML語言中一個挺不錯的功能,因為能夠通過旁邊的滾動欄來調節位置,免得要讀者為了看這一大篇東西而不斷地把鼠標調到旁邊然後往下拉...,現在只要在這一個小小的範圍拉動就可以了,而且還節省了很多空間,不會顯得內容很多,看到眼花的感覺,是不是很方便呢?

    文本滾動框的源代碼:

    <DIV align=center>
    --------------------------------------置中;
    <FONT style=";
    --------------------------------------文字格式;
    OVERFLOW: auto;
    --------------------------------------超過範圍就自動生成滾動條;
    OVERFLOW-X: Hidden;
    --------------------------------------需要時才用,用來隱藏X軸滾動條的;
    border: solid 2px black
    ;-------------------------------------邊框的格式,厚度和顏色;
    background-color: #ffffee;
    --------------------------------------背景色,如果要透明背景就去掉整句;
    SCROLLBAR-FACE-COLOR: #0000ff;
    ---------------滾動條中間可以拉的部分和箭頭旁邊部分的顏色;
    SCROLLBAR-TRACK-COLOR: #eeffff;
    ---------------滾動條中間可以拉的部分以外的顏色;
    SCROLLBAR-HIGHLIGHT-COLOR: #6cb424;
    ---------------滾動條左側邊框的顏色(用於顯示立體之用);
    SCROLLBAR-3DLIGHT-COLOR: #fcfc48;
    ---------------滾動條左側邊框的顏色(用於顯示立體之用);
    SCROLLBAR-SHADOW-COLOR: #90fcfc;
    ---------------滾動條右側邊框的顏色(用於顯示陰影之用);
    SCROLLBAR-DARKSHADOW-COLOR: #401687;
    ---------------滾動條右側邊框的顏色(用於顯示陰影之用);
    SCROLLBAR-ARROW-COLOR: #FFFF00;
    ---------------箭頭部分顏色;
    ZOOM: 100%;
    ---------------放大比率;
    HEIGHT: 105px" face="Courier New, Courier, Monospace" color=#9933cc>
    <P>test日誌內容test</P>
    <P>test日誌內容test</P>
    <P>test日誌內容test</P>
    <P>test日誌內容test</P>
    </FONT></DIV> 

    效果:

    test日誌內容test

    test日誌內容test

    test日誌內容test

    test日誌內容test


    「簡化版文本滾動框」

    <DIV align=center><FONT style="FONT-SIZE: 11pt; OVERFLOW: auto; WIDTH: 90.62%; FONT-FAMILY: times new roman; HEIGHT: 87px" face="Courier New, Courier, Monospace" color=#9933cc>
    <P align=left>test日誌內容test</P>
    <P align=left>test日誌內容test</P>
    <P align=left>test日誌內容test</P>
    <P align=left>test日誌內容test</P></FONT>
    </DIV>

     



    最後特別注意兩點:
    1. 語句中的OVERFLOW: auto;可以用OVERFLOW: scroll;代替,但效果會差一截,大家吃飽飯沒事做可以試試看!
    然而其他教程中的文本滾動框都是用
    OVERFLOW: scroll;的,八度推介還是用OVERFLOW: auto;比較好...

    2. 還有OVERFLOW-X: Hidden;是強制轉換X軸滾動條隱藏的,如果要隱藏Y怎麼辦呢?就用OVERFLOW-Y: Hidden咯!

                                                      华天工作室

                                                             

    任何疑问请进入我的留言本

    댓글

    잠시만 기다려 주세요...
    죄송합니다. 입력한 댓글이 너무 깁니다. 내용을 줄여 보세요.
    입력한 내용이 없습니다. 다시 시도해 보세요.
    죄송합니다. 지금은 댓글을 추가할 수 없습니다. 나중에 다시 시도해 보세요.
    댓글을 추가하려면 부모님의 사용 허락이 필요합니다. 허용 요청
    부모님이 댓글 기능을 해제한 상태입니다.
    죄송합니다. 지금은 댓글을 삭제할 수 없습니다. 나중에 다시 시도해 보세요.
    하루에 남길 수 있는 댓글의 최대 한도를 초과했습니다. 24시간 후에 다시 시도해 보세요.
    회원님의 계정은 다른 사용자에게 스팸 메일을 보낼 수 있다고 여겨지므로 댓글 기능이 비활성화되어 있습니다. 이 설정에 문제가 있다고 생각되면 Windows Live 지원에 문의하시기 바랍니다.
    댓글을 남기려면 아래 보안 검사를 완료해야 합니다.
    보안 검사에 입력한 글자는 그림 또는 오디오에 있는 글자와 일치해야 합니다.

    댓글을 추가하려면 Windows Live ID로 로그인하세요. 핫메일, 메신저 또는 Xbox LIVE를 사용하는 경우 해당 계정을 Windows Live ID로 사용할 수 있습니다.로그인


    Windows Live ID가 없으신가요? 등록

    트랙백

    이 블로그의 트랙백 URL은 다음과 같습니다.
    http://msnjian.spaces.live.com/blog/cns!448213985D5A4A8C!231.trak
    이 블로그를 참조하는 웹 로그
    • 없음