zoukankan      html  css  js  c++  java
  • 滚动条攻略

    把代码拷贝后可直接双击文本框就可以在里面输入文字和粘贴图片,而且文本框的大小可以随意调整。

    <DIV align=center
    style='
    color: #990099;
    background-color:#FFFFE0;
    border: solid 2px black;
    470px;
    height: 180px;
    overflow: scroll;
    scrollbar-face-color: #ffc0cb;
    scrollbar-shadow-color: #ffb6c1;
    scrollbar-highlight-color: #98fb98;
    scrollbar-3dlight-color: #ffb6c1;
    scrollbar-darkshadow-color: #90ee90;
    scrollbar-track-color: #ffdead;
    scrollbar-arrow-color: #f5deb3;
    '>日志文字</DIV>  

    代码实现的文本框是浅黄色的背景,粗略效果如文本框内所示。

    (注释:附语法语句的解释:

    //层开始标记,对中对齐
    : <DIV align=center
    //样式如下:
    : style='
    //前景色为#ffffff
    : color: #ffffff;
    //背景色为#000000
    : background-color: #000000;
    //边框为2像素,黑色
    : border: solid 2px black;
    //宽度120像素
    : 120px;
    //高度200像素
    : 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>

    另附各句的语法解释:

    align=center 表示框内内容居中对齐,缺省情况下为左对齐。

    background-color: transprant; 表示框内背景色为透明,需要改颜色的话,把transprant改成16进制颜色值即可。

    border: solid 2px black表示文本框的边线状态,solid表示实线,可选的值有dashed(虚线),double(双线),outset等。 2px black分别表示边线粗细和颜色,可自行调整(注:black和#000000效果一样)

    355px; height: 200px; 分别表示滚动文本框的宽和高。

    overflow: auto;auto表示"自动",即框内内容不需要占据height: 200px这么高的高度时,就不会出现滚动条,一旦超过了,滚动条就会出现,多出的部分通过下拉滚动条来显示,overflow也设置的值还有scroll,即强制出现滚动条,因为这样也会强制出现横向的滚动条,很难看。

    后面那部分代码,就是设置滚动条的颜色状态,根据自己的需要和喜好来调整,比较有用的是scrollbar-face-color: #889B9F;这句,其他部分不改也问题不大。

    附八度的教学如下:

    文本滾動框的源代碼:

    <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>

    最後介紹八度經常用的「簡化版文本滾動框」,去掉了上面的那些複雜語句,就可以簡簡單單的一個框框免除過多的花巧:

    <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咯!

  • 相关阅读:
    400 Bad Request
    Django 中间件 阅读目录 初步了解 中间件 中间件的介绍 自定义中间件 process_template_response(用的比较少) 中间件的执行流程 中间件版登录验证
    关于python语言优化的一些思考
    从系统角度考虑性能优化 【被面试官吊打】从系统角度考虑性能优化 目录 什么是性能? 定义系统范围 重定义功能 关注价值 总结
    需求设计
    开源软件评选白热化,这些项目冲击 Top 5
    两个向量的outer product
    协同过滤算法中皮尔逊相关系数的计算 C++
    求向量间的点积
    string 类型的翻转
  • 原文地址:https://www.cnblogs.com/zhaoxd/p/2980152.html
Copyright © 2011-2022 走看看