精华内容
下载资源
问答
  • 由于MathType简单易学,...下面就来介绍在Word中打开MathType的几种方式。 MathType是一款专业的数学公式编辑器,它所包含的很多符号与模板能够满足用户的平常工作学习之用。采用下面的打开方式的前提都是已经正确...

    由于MathType简单易学,并且编辑出来的公式符号国际出版要求,因此越来越多的人在发表期刊论文时用MathType来写公式。常见的就是在Word中调用MathType,但是一些用户们却不知道该怎么打开它。下面就来介绍在Word中打开MathType的几种方式。

    MathType是一款专业的数学公式编辑器,它所包含的很多符号与模板能够满足用户的平常工作学习之用。采用下面的打开方式的前提都是已经正确安装MathType软件,软件下载地址如下:

    MathType6.9Win:http://wm.makeding.com/iclk/?zoneid=17790

    MathType6.7mac版:http://wm.makeding.com/iclk/?zoneid=17791

    方法一:在Word中利用MathType选项卡

    一般在正常安装MathType后,MathType会自动嵌入到Office的相关办公软件中,出现一个MathType选项菜单,如果没的话,可以再加载一次,加载的具体操作方法请参考教程:教您在word中添加MathType加载项

    1.点击MathType选项卡。

    MathType选项卡 

    2.点击选项卡菜单中的“插入内联公式(Insert Inline Equation)”,或者是“插入显示公式(Insert Display Equation)”。两者的区别是,内联公式会与文字紧跟在文字后面,与文字一行,而显示公式则自成一行,不与文字在一行。一般来说,我们都是选择使用显示公式。

    MathType选项卡 
    MathType插入公式命令

    方法二:插入对象的方式

    1.直接点击Word中的“插入”——“对象”。

    打开MathType 
    点击Word中的“插入”——“对象”

    2.在弹出来的对话框中,拉动滚动条,找到“MathType Equation 6.0”后点击,再点击对话框的“确定”按钮,就会自动弹出MathType的编辑界面。

    打开MathType 
    对话框中的“MathType Equation 6.0”后确定

    方法三:快捷方式或者资源管理器打开

    直接双击桌面上的MathType快捷图标就可以将MathType打开了,或左下角的“开始/程序/Windows”,在里面打开MathType这个程序点击也可以打开。

    注意:用方法三打开MathType编辑公式后,与前面两种方法不一样的一点是,编辑完成后只能将公式复制粘贴到Word中,而不用关闭编辑窗口,否则就会保存为一个文件再另外插入到Word中,而前面两种方法可以直接关闭编辑窗口也可以直接复制粘贴。

    以上操作虽然都是介绍的在Word 2003中进行,但也适用于其它版本的Word,只是界面有些不一样。

    看了以上教程,相信你已经掌握了在Word中打开MathType公式编辑器的方法,第一种方法需要对MathType加载,如果没有而又不会的话,可以采用后面两种方法,只是有些功能可能会失去。

    以上教程参考自:http://www.mathtype.cn/wenti/dakai-mathtype.html

    展开全文
  • 滚动条控件简介  滚动条大家也很熟悉了,... Scroll Bar)和垂直滚动条(Vertical Scroll Bar)两滚动条一个滚动块,用于标识滚动条当前滚动的位置。我们可以拖动滚动块,也可以用鼠标点击滚动条某一位置

    滚动条控件简介

           滚动条大家也很熟悉了,Windows窗口中很多都有滚动条。前面讲的列表框和组合框设置了相应属性后,如果列表项显示不下也会出现滚动条。滚动条分为水平滚动条(Horizontal Scroll Bar)和垂直滚动条(Vertical Scroll Bar)两种。滚动条中有一个滚动块,用于标识滚动条当前滚动的位置。我们可以拖动滚动块,也可以用鼠标点击滚动条某一位置使滚动块移动。

           从滚动条的创建形式来分,有标准滚动条和滚动条控件两种。像列表框和组合框设置了WS_HSCROLL 或WS_VSCROLL风格以后出现的滚动条,不是一个独立的窗口,而是这些窗口的一部分,这就是标准滚动条。而滚动条控件是一个独立的窗口,它可以获得焦点,响应某些操作。

           滚动条控件的创建

           MFC也为滚动条控件的操作提供了类,即为CScrollBar类。

           滚动条控件的创建依然有两种方式,一种是直接在Toolbox中将滚动条控件拖入对话框模板,然后添加控件变量使用,另一种就是用CScrollBar类的Create成员函数动态创建。这两种方式适用于不同的场合。

           CScrollBar类的成员函数Create的函数原型如下:

    virtual BOOL Create(
       DWORD dwStyle,
       const RECT& rect,
       CWnd* pParentWnd,
       UINT nID 
    );

           此函数与其他控件类的Create函数原型基本相同。参数dwStyle指定滚动条控件的风格,rect指定滚动条控件的位置和尺寸,pParentWnd为指向滚动条控件父窗口的指针,nID指定滚动条控件的ID。下面鸡啄米简单介绍几个主要的滚动条控件风格,更加具体的可以查阅MSDN。

           SBS_HORZ:指定滚动条为水平滚动条。如果没有指定SBS_BOTTOMALIGN或SBS_TOPALIGN风格,则滚动条的高度、宽度和位置由Create函数的rect参数给出。
           SBS_VERT:指定滚动条为垂直滚动条。如果没有指定SBS_RIGHTALIGN或SBS_LEFTALIGN风格,则滚动条的高度、宽度和位置由Create函数的rect参数给出。
           SBS_TOPALIGN:与SBS_HORZ配合使用。滚动条的上边缘与Create函数的rect参数指定矩形的上边缘对齐。滚动条高度为系统滚动条的默认高度。
           SBS_BOTTOMALIGN:与SBS_HORZ配合使用。滚动条的下边缘与Create函数的rect参数指定矩形的下边缘对齐。滚动条高度为系统滚动条的默认高度。
           SBS_LEFTALIGN:与SBS_VERT配合使用。滚动条的左边缘与Create函数的rect参数指定矩形的左边缘对齐。滚动条宽度为系统滚动条的默认宽度。
           SBS_RIGHTALIGN:与SBS_VERT配合使用。滚动条的右边缘与Create函数的rect参数指定矩形的右边缘对齐。滚动条宽度为系统滚动条的默认宽度。

           dwStyle参数可以是以上风格中某几个的组合,另外一般也会用到WS_CHILD、WS_VISIBLE风格。例如,创建一个水平滚动条控件,dwStyle参数应该为WS_CHILD|WS_VISIBLE|SBS_HORZ,创建垂直滚动条控件时dwStyle参数应该为WS_CHILD|WS_VISIBLE|SBS_VERT。

           CScrollBar类的主要成员函数

           BOOL GetScrollInfo(LPSCROLLINFO lpScrollInfo, UINT nMask = SIF_ALL);

           获取的滚动条的参数信息,该信息为SCROLLINFO结构体的形式。参数lpScrollInfo为指向SCROLLINFO结构体变量的指针。SCROLLINFO结构体的定义如下:

    C++代码
    1. typedef struct tagSCROLLINFO {    
    2.     UINT cbSize;         // 结构的尺寸(字节为单位)   
    3.     UINT fMask;          // 说明结构中的哪些参数是有效的,可以是屏蔽值的组合,如SIF_POS|SIF_PAGE,若为SIF_ALL则整个结构都有效   
    4.     int  nMin;           // 滚动范围最小值,当fMask 中包含SIF_RANGE 时有效   
    5.     int  nMax;           // 滚动范围最大值,当fMask 中包含SIF_RANGE 时有效   
    6.     UINT nPage;          // 页尺寸,用来确定比例滚动框的大小,当fMask中包含SIF_PAGE时有效   
    7.     int  nPos;           // 滚动框的位置,当fMask 中包含SIF_POS 有效   
    8.     int  nTrackPos;      // 滚动时滚动框的位置,当fMask 中包含SIF_TRACKPOS 时有效,该参数只能查询,不能设置,最好不要用该参数来查询拖动时滚动框的位置   
    9. }   SCROLLINFO, *LPSCROLLINFO;    
    10. typedef SCROLLINFO CONST *LPCSCROLLINFO;  

           参数nMask 的含义与SCROLLINFO 结构体中的fMask一样。该函数在获取信息成功则返回TRUE,否则返回FALSE。

           BOOL SetScrollInfo(LPSCROLLINFO lpScrollInfo, BOOL bRedraw = TRUE);

           用于设置滚动条的各种参数信息。参数lpScrollInfo为指向SCROLLINFO结构体变量的指针,参数bRedraw表示是否需要重绘滚动条,如果为TRUE,则重绘。该函数操作成功则返回TRUE,否则返回FALSE。

           int GetScrollPos( ) const;

           获取滚动块的当前位置。如果失败则返回0。

           int SetScrollPos(int nPos, BOOL bRedraw = TRUE);

           将滚动块移动到指定位置。参数nPos指定了滚动块的新位置,参数bRedraw 表示是否需要重绘滚动条,如果为TRUE,则重绘。函数返回滚动框原来的位置,若操作失败则返回0。

           void GetScrollRange(LPINT lpMinPos, LPINT lpMaxPos) const;

           获取滚动条的滚动范围。参数lpMinPos指向滚动条滚动范围的最小值,参数lpMaxPos指向滚动条滚动范围的最大值。

           void SetScrollRange(int nMinPos, int nMaxPos, BOOL bRedraw = TRUE);

           用于指定滚动条的滚动范围。参数nMinPos 和nMaxPos 分别指定了滚动范围的最小值和最大值,两者的差不得超过32767。当两者都为0 时,滚动条将被隐藏。参数bRedraw 表示是否需要重绘滚动条,如果为TRUE,则重绘。

           OnHScroll()与OnVScroll()函数

           无论是标准滚动条,还是滚动条控件,滚动条的通知消息都是用WM_HSCROLL 和WM_VSCROLL消息发送出去的。对这两个消息的默认处理函数是CWnd::OnHScroll和CWnd::OnVScroll,一般需要在派生类中对这两个函数进行重载,以实现滚动功能。也就是说,假设在一个对话框中放入了一个水平滚动条,我们可以在对话框类中重载OnHScroll函数,并在OnHScroll函数中实现滚动功能。

           这两个函数的声明如下:

           afx_msg void OnHScroll(UINT nSBCode,UINT nPos,CScrollBar* pScrollBar);
           afx_msg void OnVScroll(UINT nSBCode,UINT nPos,CScrollBar* pScrollBar);

           参数nSBCode是通知消息码,主要通知码及含义的介绍下面已列出。nPos 是滚动框的位置,只有在nSBCode为SB_THUMBPOSITION或SB_THUMBTRACK时,该参数才有意义。如果通知消息是滚动条控件发来的,那么pScrollBar 是指向该控件的指针,如果是标准滚动条发来的,则pScrollBar 为NULL。

           SB_BOTTOM/SB_RIGHT:滚动到底端(右端)
           SB_TOP/SB_LEFT:滚动到顶端(左端)
           SB_LINEDOWN/SB_LINERIGHT:向下(向右)滚动一行(列)
           SB_LINEUP/SB_LINELEFT:向上(向左)滚动一行(列)
           SB_PAGEDOWN/SB_PAGERIGHT:向下(向右)滚动一页
           SB_PAGEUP/SB_PAGELEFT:向上(向左)滚动一页
           SB_THUMBPOSITION:滚动到指定位置
           SB_THUMBTRACK:滚动框被拖动。可利用该消息来跟踪对滚动框的拖动
           SB_ENDSCROLL:滚动结束

           CScrollBar类应用实例

           讲完了基础知识,鸡啄米还是给大家一个简单的实例。例子非常简单,就是在一个对话框中加入一个水平滚动条控件和一个编辑框控件,无论滚动条控件是在滚动还是静止,编辑框中都显示滚动块的当前位置。以下是具体开发步骤:

           1. 创建一个基于对话框的MFC工程,名称设置为“Example26”。

           2. 在自动生成的对话框模板IDD_EXAMPLE26_DIALOG中,删除“TODO: Place dialog controls here.”静态文本控件、“OK”按钮和“Cancel”按钮。添加一个Horizontal Scroll Bar控件,ID设置为IDC_HORI_SCROLLBAR。再添加一个静态文本控件和一个编辑框,静态文本控件的Caption属性设为“滚动块当前位置:”,编辑框的ID设为IDC_HSCROLL_EDIT,Read Only属性设为True。此时的对话框模板如下图:

    VS2010/MFC编程入门之二十六(常用控件:滚动条控件Scroll Bar)

          
           3. 为滚动条IDC_HORI_SCROLLBAR添加CScrollBar类型的控件变量m_horiScrollbar。

           4. 在对话框初始化时,我们需要设置滚动条的滚动范围和初始位置,并在编辑框中显示初始位置,那么需要修改CExample26Dlg::OnInitDialog()函数为:

    C++代码
    1. BOOL CExample26Dlg::OnInitDialog()   
    2. {   
    3.     CDialogEx::OnInitDialog();   
    4.   
    5.     // Add "About..." menu item to system menu.   
    6.   
    7.     // IDM_ABOUTBOX must be in the system command range.   
    8.     ASSERT((IDM_ABOUTBOX & 0xFFF0) == IDM_ABOUTBOX);   
    9.     ASSERT(IDM_ABOUTBOX < 0xF000);   
    10.   
    11.     CMenu* pSysMenu = GetSystemMenu(FALSE);   
    12.     if (pSysMenu != NULL)   
    13.     {   
    14.         BOOL bNameValid;   
    15.         CString strAboutMenu;   
    16.         bNameValid = strAboutMenu.LoadString(IDS_ABOUTBOX);   
    17.         ASSERT(bNameValid);   
    18.         if (!strAboutMenu.IsEmpty())   
    19.         {   
    20.             pSysMenu->AppendMenu(MF_SEPARATOR);   
    21.             pSysMenu->AppendMenu(MF_STRING, IDM_ABOUTBOX, strAboutMenu);   
    22.         }   
    23.     }   
    24.   
    25.     // Set the icon for this dialog.  The framework does this automatically   
    26.     //  when the application's main window is not a dialog   
    27.     SetIcon(m_hIcon, TRUE);         // Set big icon   
    28.     SetIcon(m_hIcon, FALSE);        // Set small icon   
    29.   
    30.     // TODO: Add extra initialization here   
    31.     // 设置水平滚动条的滚动范围为1到100   
    32.     m_horiScrollbar.SetScrollRange(1, 100);   
    33.     // 设置水平滚动条的初始位置为20   
    34.     m_horiScrollbar.SetScrollPos(20);   
    35.     // 在编辑框中显示20   
    36.     SetDlgItemInt(IDC_HSCROLL_EDIT, 20);   
    37.   
    38.     return TRUE;  // return TRUE  unless you set the focus to a control   
    39. }  

           5. 现在滚动条还不能正常滚动,并且编辑框中数字也不随滚动改变。根据上面所讲,我们可以重载CExample26Dlg类的OnHScroll函数。具体操作为,在CExample26Dlg类的属性页面的工具栏上点“Messages”按钮,找到WM_HSCROLL消息,添加响应函数就可以了。OnHScroll函数重写后如下:

    C++代码
    1. void CExample26Dlg::OnHScroll(UINT nSBCode, UINT nPos, CScrollBar* pScrollBar)   
    2. {   
    3.     // TODO: Add your message handler code here and/or call default   
    4.     int pos = m_horiScrollbar.GetScrollPos();    // 获取水平滚动条当前位置   
    5.   
    6.     switch (nSBCode)    
    7.     {    
    8.         // 如果向左滚动一列,则pos减1   
    9.         case SB_LINEUP:    
    10.             pos -= 1;    
    11.             break;    
    12.         // 如果向右滚动一列,则pos加1   
    13.         case SB_LINEDOWN:    
    14.             pos  += 1;    
    15.             break;    
    16.         // 如果向左滚动一页,则pos减10   
    17.         case SB_PAGEUP:    
    18.             pos -= 10;    
    19.             break;    
    20.         // 如果向右滚动一页,则pos加10   
    21.         case SB_PAGEDOWN:    
    22.             pos  += 10;    
    23.             break;    
    24.         // 如果滚动到最左端,则pos为1   
    25.         case SB_TOP:    
    26.             pos = 1;    
    27.             break;    
    28.         // 如果滚动到最右端,则pos为100   
    29.         case SB_BOTTOM:    
    30.             pos = 100;    
    31.             break;      
    32.         // 如果拖动滚动块滚动到指定位置,则pos赋值为nPos的值   
    33.         case SB_THUMBPOSITION:    
    34.             pos = nPos;    
    35.             break;    
    36.         // 下面的m_horiScrollbar.SetScrollPos(pos);执行时会第二次进入此函数,最终确定滚动块位置,并且会直接到default分支,所以在此处设置编辑框中显示数值   
    37.         default:    
    38.             SetDlgItemInt(IDC_HSCROLL_EDIT, pos);   
    39.             return;    
    40.     }    
    41.   
    42.     // 设置滚动块位置   
    43.     m_horiScrollbar.SetScrollPos(pos);   
    44.   
    45.     CDialogEx::OnHScroll(nSBCode, nPos, pScrollBar);   
    46. }  

           6. 编译运行程序,弹出结果对话框,可以自己拖动滚动块看是否能正常滚动,并且编辑框中也显示了正确的数值。效果如下:

    VS2010/MFC编程入门之二十六(常用控件:滚动条控件Scroll Bar)

            至于垂直滚动条,其实与水平滚动条类似,大家可以自己写写垂直滚动条的例子,鸡啄米就不再举例了。

            滚动条控件的内容就讲到这里了,比较基础,但这些是以后应用滚动条控件的必知内容。鸡啄米欢迎大家常来此学习交流,谢谢。

    展开全文
  • 个CSS高级常见技巧汇总(虚线框、三角形、优惠券卡券、滚动条、多行溢出...) 设置input的placeholder的字体样式 单行和多行文本超出省略号 负边距使用技巧 定位同时设置方位情况 ...

    十几个CSS高级常见技巧汇总(虚线框、三角形、优惠券卡券、滚动条、多行溢出...)

    • 设置input的placeholder的字体样式

    • 单行和多行文本超出省略号

    • 负边距使用技巧

    • 定位同时设置方位情况

    • 相邻兄弟选择器之常用场景

    • outline属性的妙用技巧

    • 隐藏滚动条或更改滚动条样式

    • 纯CSS绘制三角形

    • 虚线框绘制技巧

    • 卡券效果制作

    • 隐藏文本的常用两种方法

    • 表格边框合并

    1-1. 设置input 的placeholder的字体样式

    设置input占位符的样式

    input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
        color: red;
    }
    input::-moz-placeholder { /* Firefox 19+ */  
        color: red;
    }
    input:-ms-input-placeholder { /* IE 10+ */
        color: red;
    }
    input:-moz-placeholder { /* Firefox 18- */
        color: red;
    }
    
    <input type="text" placeholder="请设置用户名">
    复制代码

    设置input聚焦时的样式

    input:focus {   
      background-color: red;
    }
    复制代码

    取消input的边框

    border: none;
    outline: none;
    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>CSS高级常见技巧汇总</title>
      <style type="text/css">
        input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
          color: red;
        }
        input::-moz-placeholder { /* Firefox 19+ */
          color: red;
        }
        input:-ms-input-placeholder { /* IE 10+ */
          color: red;
        }
        input:-moz-placeholder { /* Firefox 18- */
          color: red;
        }
        input:focus {
          background-color: red;
        }
        input{
          border: none;
          outline: none;
        }
      </style>
    </head>
    <body>
    <input type="text" placeholder="请设置用户名">
    </body>
    </html>
    复制代码

    1-2. 单行和多行文本超出省略号

    // 单行文本出现省略号
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    
    // 多行文本出现省略号
    display: -webkit-box; /*重点,不能用block等其他,将对象作为弹性伸缩盒子模型显示*/
    -webkit-box-orient: vertical; /*从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)*/
    -webkit-line-clamp: 3; /*行数,超出三行隐藏且多余的用省略号表示...*/
    line-clamp: 3;
    word-break: break-all;
    overflow: hidden;
    max-width: 100%;
    复制代码
    <div class="container">
      <p class="single">
        <span class="c-red">单行溢出:</span>《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程,
        全面介绍 ECMAScript 6 新引入的语法特性。
      </p>
      <p class="mutiple">
        <span class="c-red">多行溢出:</span>《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程,
        全面介绍 ECMAScript 6 新引入的语法特性。本书覆盖 ES6 与上一个版本 ES5 的所有不同之处,
        对涉及的语法知识给予详细介绍,并给出大量简洁易懂的示例代码。
      </p>
    </div>
    复制代码
    /*容器*/
        .container {
          width: 300px;
          height: 200px;
          margin: 100px;
          padding: 20px;
          border: 1px solid #eee;
          font-size: 13px;
          color: #555;
        }
    
        .c-red {
          color: red;
        }
    
        p {
          background-color: rgba(189, 227, 255, 0.28);
          padding: 2px 5px;
        }
    
        /*单行*/
        .single {
          width: 300px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;
        }
    
        /*多行*/
        .mutiple {
          display: -webkit-box; /*重点,不能用block等其他,将对象作为弹性伸缩盒子模型显示*/
          -webkit-box-orient: vertical; /*从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)*/
          -webkit-line-clamp: 3; /*行数,超出三行隐藏且多余的用省略号表示...*/
          line-clamp: 3;
          word-break: break-all;
          overflow: hidden;
          max-width: 100%;
        }
    复制代码

    效果1

    1-3. 负边距使用技巧

    规律: 左为负时,是左移,右为负时,是左拉。上下与左右类似

    *{
        margin:0;
        padding:0;
    }
    .wrap{
        /* 利用负值技巧进行整体移动 */
        margin-left:-6px;
    }
    .item{
        float:left;
        width: 20%;
        height: 300px;
        border-left:6px solid #fff;
        box-sizing: border-box;
    }
    <div class="wrap">
        <div class="item" style="background-color: red;"></div>
        <div class="item" style="background-color: green;"></div>
        <div class="item" style="background-color: yellow;"></div>
        <div class="item" style="background-color: pink;"></div>
        <div class="item" style="background-color: green;"></div>
    </div>
    复制代码

    移动前 移动后

    1-4. 定位同时设置方位情况

    规律: 绝对定位和固定定位时,同时设置 left 和 right 等同于隐式地设置宽度

    span{
      border:1px solid red;
      position: absolute;
      left:0;
      right:0;
      
       /* 等同于设置  width:100%;display:block */
    }
    <span>1</span>
    复制代码

    1-5. 相邻兄弟选择器之常用场景

    ul{
      width: 500px;
       margin:auto;
       list-style: none;
       padding:0;
       border:1px solid red;
       text-align: center;
     }
     li+li{
       border-top:1px solid red;
     }
    复制代码
    <ul>
     <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    复制代码

    效果ul

    1-6. outline属性的妙用技巧

    区别: outline不计算大小 border计算大小

    * {
        padding: 0;
        margin: 0;
      }
    
      ul {
        list-style: none;
        width: 600px;
        margin: auto;
      }
    
      li {
        padding: 10px;
        border: 10px solid pink;
        outline-offset: -10px;
      }
      li+li{
        margin-top:-10px;
      }
      li:hover{
        /* border:10px solid gold; */
        outline:10px solid gold;
      }
    复制代码
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    复制代码

    border outline

    1-7. 隐藏滚动条或更改滚动条样式

    .scroll-container {
       width: 500px;
       height: 150px;
       border: 1px solid #ddd;
       padding: 15px;
       overflow: auto;     /*必须*/
     }
    
     .scroll-container::-webkit-scrollbar {
       width: 8px;
       background: white;
     }
    
     .scroll-container::-webkit-scrollbar-corner,
       /* 滚动条角落 */
     .scroll-container::-webkit-scrollbar-thumb,
     .scroll-container::-webkit-scrollbar-track {      /*滚动条的轨道*/
       border-radius: 4px;
     }
    
     .scroll-container::-webkit-scrollbar-corner,
     .scroll-container::-webkit-scrollbar-track {
       /* 滚动条轨道 */
       background-color: rgba(180, 160, 120, 0.1);
       box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
     }
    
     .scroll-container::-webkit-scrollbar-thumb {
       /* 滚动条手柄 */
       background-color: #00adb5;
     }
    复制代码
    <p class="scroll-container">
            庭院深深,不知有多深?杨柳依依,飞扬起片片烟雾,一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方,她登楼向远处望去,却看不见那通向章台的大路。春已至暮,三月的雨伴随着狂风大作,再是重门将黄昏景色掩闭,也无法留住春意。泪眼汪汪问落花可知道我的心意,落花默默不语,纷乱的,零零落落一点一点飞到秋千外。庭院深深,不知有多深?杨柳依依,飞扬起片片烟雾,一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方,她登楼向远处望去,却看不见那通向章台的大路。春已至暮,三月的雨伴随着狂风大作,再是重门将黄昏景色掩闭,也无法留住春意。泪眼汪汪问落花可知道我的心意,落花默默不语,纷乱的,零零落落一点一点飞到秋千外。庭院深深,不知有多深?杨柳依依,飞扬起片片烟雾,一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方,她登楼向远处望去,却看不见那通向章台的大路。春已至暮,三月的雨伴随着狂风大作,再是重门将黄昏景色掩闭,也无法留住春意。泪眼汪汪问落花可知道我的心意,落花默默不语,纷乱的,零零落落一点一点飞到秋千外。庭院深深,不知有多深?杨柳依依,飞扬起片片烟雾,一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方,她登楼向远处望去,却看不见那通向章台的大路。春已至暮,三月的雨伴随着狂风大作,再是重门将黄昏景色掩闭,也无法留住春意。泪眼汪汪问落花可知道我的心意,落花默默不语,纷乱的,零零落落一点一点飞到秋千外。
    </p>
    复制代码

    scrollbar

    1-8. 纯CSS绘制三角形

    /* 正三角 */
    .up-triangle {
       width: 0;
       height: 0;
       border-style: solid;
       border-width: 0 25px 40px 25px;
       border-color: transparent transparent rgb(245, 129, 127) transparent;
     }
    
     /* 倒三角 */
     .down-triangle {
       width: 0;
       height: 0;
       border-style: solid;
       border-width: 40px 25px 0 25px;
       border-color:  rgb(245, 129, 127) transparent transparent transparent;
     }
     div:last-child {
       margin-top: 1rem;
     }
    复制代码

    三角形

    1-9. 虚线框绘制技巧

    .dotted-line {
      width: 800px;
      margin: auto;
      padding: 20px;
      border: 1px dashed transparent;
      background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, #ccc .25em, white 0, white .75em);
    }
    <p class="dotted-line">庭院深深,不知有多深?杨柳依依,飞扬起片片烟雾,一重重帘幕不知有多少层。</p>
    复制代码

    虚线

    1-10. 卡券效果制作

    .coupon {
     width: 300px;
      height: 100px;
      line-height: 100px;
      margin: 50px auto;
      text-align: center;
      position: relative;
      background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,
      radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
      radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
      radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
      filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
    }
    .coupon span {
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;
      color: red;
      font-size: 50px;
      font-weight: 400;
    }
    复制代码
    <p class="coupon">
     <span>200</span>优惠券
    </p>
    复制代码

    优惠券

    1-11. 隐藏文本的常用两种方法

    text-indent: -9999px; 或者 font-size: 0;

    .logo {
     width: 190px;
      height: 80px;
      float: left;
      margin-top: 8px
    }
    
    .logo h1 {
      position: relative
    }
    
    .logo h1 .logo-bd {
      display: block;
      margin-left: 22px;
      padding-top: 58px;
      width: 142px;
      overflow: hidden;
      background: url(http://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png) 0 0 no-repeat;
      text-indent: -9999px;
    }
    复制代码
    <h1>
      <a href="#" role="img" class="logo-bd clearfix">淘宝网</a>
    </h1>
    复制代码

    1-12. 表格边框合并

    table{
      border-collapse: collapse;
    }
    复制代码
    <table border="1">
        <thead>
        <tr>
          <th>第一列</th>
          <th>第二列</th>
          <th>第三列</th>
          <th>第四列</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>1.1</td>
          <td>1.2</td>
          <td>1.3</td>
          <td>1.4</td>
        </tr>
        <tr>
          <td>2.1</td>
          <td>2.2</td>
          <td>2.3</td>
          <td>2.4</td>
        </tr>
        <tr>
          <td>3.1</td>
          <td>3.2</td>
          <td>3.3</td>
          <td>3.4</td>
        </tr>
        </tbody>
      </table>
    复制代码

    为合并 合并后 合并后
     

     

    展开全文
  • 滚动条代码大集合

    千次阅读 2009-05-08 14:35:00
    感谢:印痴 提供!... 显示纵横滚动条.上部的演示均属设置为scroll的界面. 但一般都设置为:auto(需要时才显示) BACKGROUND-COLOR: transparent; 滚动框内部背景颜色.transparent为透明色.其他可使用颜色代码.

    感谢:印痴 提供! 属性设置:

    WIDTH: 148;HEIGHT: 146; 根据使用的位置,可调整宽度和高度.
    OVERFLOW: scroll; 显示纵横滚动条.上部的演示均属设置为scroll的界面. 但一般都设置为:auto(需要时才显示)
    BACKGROUND-COLOR: transparent; 滚动框内部背景颜色.transparent为透明色.其他可使用颜色代码.

    <div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color:#70807d; scrollbar-arrow-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#70807d; scrollbar-shadow-color:#ffffff; scrollbar-darkshadow-color:#70807d; scrollbar-track-color:#ffffff">
    这里输入内容
    </div>

    <div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
    这里输入内容
    </div>

    <div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
    这里输入内容
    </div>

    <div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; SCROLLBAR-FACE-COLOR: EAECEC; SCROLLBAR-HIGHLIGHT-COLOR: EAECEC; SCROLLBAR-SHADOW-COLOR: BLACK; SCROLLBAR-3DLIGHT-COLOR: EAECEC; SCROLLBAR-ARROW-COLOR: EAECEC; SCROLLBAR-TRACK-COLOR: FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: EAECEC">
    这里输入内容
    </div>

    <div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#595959; scrollbar-arrow-color:#FFFFFF; scrollbar-base-color:#CFCFCF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#CFCFCF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#595959">
    这里输入内容
    </div>

    <div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #D2E5F4; scrollbar-highlight-color: #D2E5F4; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #D2E5F4">
    这里输入内容
    </div>

    <div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff">
    这里输入内容
    </div>

    <div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #59ADBB; scrollbar-track-color: #FFFFFF; scrollbar-3dlight-color: #59ADBB; scrollbar-darkshadow-color: #59ADBB">
    这里输入内容
    </div>

    <div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #FFC300; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #FFC300; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFC300">
    这里输入内容
    </div>

    <div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:5A5227; scrollbar-arrow-color:FFF8C5; scrollbar-base-color:DDD38D; scrollbar-darkshadow-color:FFF8C5; scrollbar-face-color:DDD38D; scrollbar-highlight-color:FFF8C5; scrollbar-shadow-color:5A5227">
    这里输入内容
    </div>

    <div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #9EBFE8; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #9EBFE8; scrollbar-darkshadow-color: #9EBFE8; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF">
    这里输入内容
    </div>

    <div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #DB52BC; scrollbar-shadow-color: #E994D6; scrollbar-highlight-color: #E994D6; scrollbar-3dlight-color: #DB52BC; scrollbar-darkshadow-color: #DB52BC; scrollbar-track-color: #E994D6; scrollbar-arrow-color: #FFFFFF">
    这里输入内容
    </div>

    <div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #333333; scrollbar-highlight-color: #666666; scrollbar-3dlight-color: #101010; scrollbar-darkshadow-color: #070707; scrollbar-track-color: #101010; scrollbar-arrow-color: #000000">
    这里输入内容
    </div>

    <div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919; scrollbar-arrow-color: #CCCCCC">
    这里输入内容
    </div>

    <div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color:#FFC4E1; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FF95CA; scrollbar-darkshadow-color:#FFB5DA; scrollbar-shadow-color:#FF6AB5; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFDDEE">
    这里输入内容
    </div>

    <div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #DBEBFE; scrollbar-shadow-color: #B8D6FA; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #DBEBFE; scrollbar-darkshadow-color:#458CE4; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #458CE4">
    这里输入内容
    </div>

    【HTML代码】

     


    <DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; BORDER-LEFT: 1px solid; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid">
    <P>这是测试文字</P>
    <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>


    <DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
    <P>这是测试文字</P>
    <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>


    <DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: scroll; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
    <P>这是测试文字</P>
    <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>


    <DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
    <P>这是测试文字</P>
    <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>


    <DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #216dad; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #216dad; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px">
    <P>这是测试文字</P>
    <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>


    <TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw border=0>
    <TBODY>
    <TR>
    <TD>
    <DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #216dad; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #216dad; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px">
    <P>这是测试文字</P>
    <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>


    <TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw border=0>
    <TBODY>
    <TR>
    <TD>
    <DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; FILTER: chroma(COLOR=#ffffff); SCROLLBAR-HIGHLIGHT-COLOR: #216dad; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #216dad; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px">
    <P>这是测试文字</P>
    <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>


    <DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px">
    <P>这是测试文字</P>
    <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>


    <TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw border=0>
    <TBODY>
    <TR>
    <TD>
    <DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px">
    <P>这是测试文字</P>
    <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>


    <TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw border=0>
    <TBODY>
    <TR>
    <TD>
    <DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; FILTER: chroma(COLOR=#ffffff); SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px">
    <P>这是测试文字</P>
    <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>


    <DIV style="word-break:keep-all;BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
    <P>这是测试文字</P>
    <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>


    <DIV style="DIRECTION: rtl;BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
    <DIV style="DIRECTION: ltr;">
    <P>这是测试文字</P>
    <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></DIV>


    <TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw border=0>
    <TBODY>
    <TR>
    <TD>
    <DIV style="DIRECTION: rtl;BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; FILTER: chroma(COLOR=#ffffff); SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px">
    <DIV style="DIRECTION: ltr"><P>这是测试文字</P>
    <P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></DIV></TD></TR></TBODY></TABLE>

     

     

    【说明】

    v 必须在html编辑状态下编辑代码。

    v 简单的文本框是通过DIV实现的,包含背景图片的文本框是通过将DIV嵌入到Table中实现的。

    v 主要通过对DIV的Style属性来控制样式,主要设置如下:

      overflow(溢出控制):visible(默认,可见)、auto(自动)、scroll(显示滚动条);

      width(宽度):数值;

      height(高度):数值;

      color(字体颜色):色彩代码;

      font-size(字体大小):数值;

      line-height(行高):数值;

      border(边框):宽度、类型和颜色,类型主要支持以下几种:none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset;

      font-weight(字体粗细):normal、bold、bolder、lighter;

      font-family(字体类型):Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆;

      background(背景颜色):色彩代码;

      scrollbar-base-color,scrollbar-face-color,scrollbar-track-color,scrollbar-darkshadow-color,scrollbar-highlight-color,scrollbar-shadow-color,scrollbar-3dlight-color,scrollbar-arrow-color(滚动条各部分的颜色):色彩代码;

      filter:chroma(COLOR=转换成透明的颜色)(chroma过滤器):色彩代码,该颜色将转换成透明效果;

      word-break(断字):normal(默认,正常断字)、keep-all(严格不断字)、break-all(严格断字);

      direction(文字方向):ltr(默认,从左向右)、rtl(从右向左)。

    v 辅助工具

      在线滚动条配色器:通过本工具可以方便地在线设置滚动条样式。地址1 地址2

      颜色采集器:通过本工具可以方便地获取屏幕显示的任何颜色。下载颜色采集器1.05

    另类滚动条二:
     

    这是女巫测试后的颜色搭配,后附有详细的教程说明:

     

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

    具体效果看以下链接:查看效果

    <DIV align=center
    style=''''
    color: #990099;
    background-color:#FFFFE0;
    border: solid 2px black;
    width: 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像素
    : width: 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>

          PS:特别感谢百忙中提供我帮助帮我解惑的偶的朋友TOLLY!)

     

     

     

    另附各句的语法解释:

     

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

     

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

     

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

     

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

     

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

     

    后面那部分代码,就是设置滚动条的颜色状态,根据自己的需要和喜好来调整,比较有用的是scrollbar-face-color: #889B9F;这句,其他部分不改也问题不大。将有关文本滚动框的各个组成部分的色彩均设为与日志背景相同,即修改各参数的色彩值。但滚动条箭头色彩,即scrollbar-arrow-color: 应不同的色彩值。

     

     

    附八度的教学如下:

    文本滾動框的源代碼:

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

    代码:

    <DIV align=center>
    <P align=center><FONT color=#cc9999 size=3><STRONG></STRONG></FONT></P>
    <DIV align=center>
    <DIV style="BORDER-RIGHT: 6px ridge; BORDER-TOP: 6px ridge; SCROLLBAR-FACE-COLOR: #ccccff; SCROLLBAR-HIGHLIGHT-COLOR: #ffff99; OVERFLOW: scroll; BORDER-LEFT: 6px ridge; WIDTH: 329px; SCROLLBAR-SHADOW-COLOR: #ffccff; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffccff; SCROLLBAR-ARROW-COLOR: #ffccff; BORDER-BOTTOM: 6px ridge; SCROLLBAR-DARKSHADOW-COLOR: #ffcccc; HEIGHT: 114px; BACKGROUND-COLOR: #ffe4c4" align=center>
    <P align=left><FONT color=#8000ff>文字</FONT></P></DIV></DIV></DIV>

    代码:

    <DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #ffa500; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 236px; SCROLLBAR-SHADOW-COLOR: #ffd700; COLOR: #d2691e; SCROLLBAR-3DLIGHT-COLOR: #ff7f50; SCROLLBAR-ARROW-COLOR: #ff0000; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 113px; BACKGROUND-COLOR: #fffacd" align=center>日志文字</DIV>

    代码:

    <DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #ffc0cb; SCROLLBAR-HIGHLIGHT-COLOR: #98fb98; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 470px; SCROLLBAR-SHADOW-COLOR: #ffb6c1; COLOR: #990099; SCROLLBAR-3DLIGHT-COLOR: #ffb6c1; SCROLLBAR-ARROW-COLOR: #f5deb3; SCROLLBAR-TRACK-COLOR: #ffdead; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #90ee90; HEIGHT: 180px; BACKGROUND-COLOR: #ffffe0" align=center>日志文字</DIV>

    代码:
    <DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #ffffe0; SCROLLBAR-HIGHLIGHT-COLOR: #ffffe0; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 312px; SCROLLBAR-SHADOW-COLOR: #ccccff; COLOR: #009900; SCROLLBAR-3DLIGHT-COLOR: #ccccff; SCROLLBAR-ARROW-COLOR: #ffffcc; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffcc; HEIGHT: 76px; BACKGROUND-COLOR: #ffffcc" align=center>
    <DIV align=left><SPAN></SPAN>&nbsp;文字</DIV></DIV>
    代码:
    <DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #006600; SCROLLBAR-HIGHLIGHT-COLOR: #33cc33; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #33cc33; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR: #33cc33; SCROLLBAR-ARROW-COLOR: #33cc33; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #33cc33; HEIGHT: 111px; BACKGROUND-COLOR: #ccffcc" align=center>
    <DIV align=left><FONT color=#009900></FONT>&nbsp;文字</DIV></DIV></DIV>
    代码:
    <DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #66ff66; SCROLLBAR-HIGHLIGHT-COLOR: #66ff99; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #00ff00; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR: #66ff99; SCROLLBAR-ARROW-COLOR: #009900; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #00ff00; HEIGHT: 111px; BACKGROUND-COLOR: #ccffcc" align=center>
    <DIV align=left><FONT color=#009900></FONT>&nbsp;文字</DIV></DIV>
    <DIV></DIV>

    代码:

    <DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; OVERFLOW: auto; BORDER-LEFT: black 2px solid; WIDTH: 372px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #000000; SCROLLBAR-ARROW-COLOR: #000000; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 319px; BACKGROUND-COLOR: #000000">
    <P><FONT color=#ff9900>文字</FONT></P></DIV></TD></TR>

    代码:

     

    <DIV align=center>
    <DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #889b9f; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 277px; SCROLLBAR-SHADOW-COLOR: #3d5054; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #3d5054; SCROLLBAR-ARROW-COLOR: #ffd6da; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #85989c; HEIGHT: 200px; BACKGROUND-COLOR: #000000" align=center>
    <P align=left>文字</P></DIV></DIV>

    代码:
    <DIV style="SCROLLBAR-FACE-COLOR: #ff6600; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: scroll; WIDTH: 463px; SCROLLBAR-SHADOW-COLOR: #663333; COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #663333; HEIGHT: 119px; BACKGROUND-COLOR: #000000; SCROLLBAR-3DLIGHT-: #663333" align=left></DIV>
    代码:
    <DIV style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffcccc; SCROLLBAR-HIGHLIGHT-COLOR: #ff9999; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 355px; SCROLLBAR-SHADOW-COLOR: #ff9999; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffcccc; SCROLLBAR-ARROW-COLOR: #ffcccc; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffcc99; HEIGHT: 88px; BACKGROUND-COLOR: #ffcccc" align=center>
    <DIV align=left><FONT color=#009900></FONT><FONT color=#ff6699>&nbsp;文字</FONT></DIV></DIV>
    代码:
    <DIV style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffccff; SCROLLBAR-HIGHLIGHT-COLOR: #ff99cc; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #ff99cc; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffcccc; SCROLLBAR-ARROW-COLOR: #ff99cc; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffccff; HEIGHT: 111px; BACKGROUND-COLOR: #ffccff" align=center>
    <DIV align=left><FONT color=#009900></FONT><FONT color=#ff00ff>&nbsp;文字</FONT></DIV></DIV>

    代码:

     

    <DIV align=center>
    <DIV style="BORDER-RIGHT: #f0b4b4 solid; BORDER-TOP: #f0b4b4 solid; SCROLLBAR-FACE-COLOR: #f0b4b4; SCROLLBAR-HIGHLIGHT-COLOR: #999999; OVERFLOW: scroll; BORDER-LEFT: #f0b4b4 solid; WIDTH: 316px; SCROLLBAR-SHADOW-COLOR: #ffccff; COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ffffcc; BORDER-BOTTOM: #f0b4b4 solid; SCROLLBAR-DARKSHADOW-COLOR: #f0b4b4; HEIGHT: 143px; BACKGROUND-COLOR: #ffe1f0" align=center>
    <P align=left><FONT color=#9900cc>粉色透明效果滚动框</FONT></P>
    <P align=left>&nbsp;</P></DIV></DIV>

     

    代码:
    <DIV style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffcc99; SCROLLBAR-HIGHLIGHT-COLOR: #ff9966; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #ff9966; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffcc99; SCROLLBAR-ARROW-COLOR: #ff9966; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffcc99; HEIGHT: 111px; BACKGROUND-COLOR: #ffcc99" align=center>
    <DIV align=left><FONT color=#009900></FONT><FONT color=#ff3300>&nbsp;文字</FONT></DIV></DIV>

    代码:

     

    <DIV style="BORDER-RIGHT: #c399d0 2pt dashed; BORDER-TOP: #c399d0 2pt dashed; SCROLLBAR-FACE-COLOR: #ddcae0; SCROLLBAR-HIGHLIGHT-COLOR: #c399d0; OVERFLOW: scroll; BORDER-LEFT: #c399d0 2pt dashed; WIDTH: 386px; SCROLLBAR-SHADOW-COLOR: #3d5054; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ddcae0; SCROLLBAR-ARROW-COLOR: #c399d0; BORDER-BOTTOM: #c399d0 2pt dashed; SCROLLBAR-DARKSHADOW-COLOR: #ddcae0; HEIGHT: 92px; BACKGROUND-COLOR: #ddcae0" align=left><FONT color=#ff6633>文字</FONT></DIV>

    代码:
    <DIV style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffffcc; SCROLLBAR-HIGHLIGHT-COLOR: #ffcc99; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #ffcc99; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffffcc; SCROLLBAR-ARROW-COLOR: #ffcc99; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffcc; HEIGHT: 111px; BACKGROUND-COLOR: #ffffcc" align=center>
    <DIV align=left><FONT color=#009900></FONT>&nbsp;文字</DIV></DIV>
    代码:
    <DIV style="BORDER-RIGHT: #ffcc99 2px solid; BORDER-TOP: #ffcc99 2px solid; SCROLLBAR-FACE-COLOR: #ffffcc; SCROLLBAR-HIGHLIGHT-COLOR: #ffcc99; OVERFLOW: scroll; BORDER-LEFT: #ffcc99 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #ffcc99; COLOR: #ffcc99; SCROLLBAR-3DLIGHT-COLOR: #ffffcc; SCROLLBAR-ARROW-COLOR: #ffcc99; BORDER-BOTTOM: #ffcc99 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffcc; HEIGHT: 111px; BACKGROUND-COLOR: #ffffcc" align=center>
    <DIV align=left><FONT color=#009900></FONT>&nbsp;文字</DIV></DIV>

     

    原文地址:http://hi.baidu.com/lenoos/blog/item/1cb6e2595df3422c2934f0e6.html

    备注:转载内容只供个人收藏使用,不做其他用途

    展开全文
  • 点开左边导航,每个管理里会很多操作,但对于IE浏览器左边导航会自动显示滚动条,但chrome浏览器却没有,经过天研究发型,原来是样式定义问题 BODY { text-align: center; padding-bottom: 0px; backgrou
  • 可以应用到Edit,ListBox,ListContrl中(有滚动条的控件)。方便操作。希望对你有用!阿弥陀佛!示例代码下载:鼠标中键按下拖动滚动条.zip (请不要直接使用迅雷下载)一、变量定义://滚动条上下箭头的高度#...
  • 首页 » 软件开发 » VS2010/MFC编程入门之二十六(常用控件:滚动条控件Scroll Bar) VS2010/MFC编程入门之二十六(常用控件:滚动条控件Scroll Bar) 分类标签: 编程入门 VS2010 VC++ MFC ...
  •  客户区是整个应用程序窗口中未被标题栏、串口边框以及可选菜单栏、工具栏、状态栏和滚动条占据部分。简言之,客户区是窗口中可以由任意书写和传递可是信息的部分。  尽管可以创建固定大小的窗口,但是多数情况下...
  • XP系统启动时滚动条总是时间很长

    千次阅读 2012-06-11 15:40:05
    这个修改后,滚动条只动一圈。 下面是资料。 下面是我复制的资料,时间你就看看. 启动系统慢的点因素: 一、软件篇 1、设定虚拟内存 硬盘中一个很宠大的数据交换文件,它是系统...
  • 问题四:FireFox(火狐)不支持div滚动条的颜色设置,目前还没有找到替换的好方法。 .contendiv { position: absolute; left: 0px; top: 10px; width: 580px;height: 135px; line-height:120%;text-...
  • 详解 Qwt 安装、使用、示例 ... ----2D画图Qt开发库:曲线、滚动条、圆盘、仪表盘  原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。
  • 几种图像处理库的研究

    万次阅读 2009-03-09 12:19:00
    几种图像处理库的研究目前比较出名的图像处理库很多,比如LEADTOOLS,这个是功能非常强大的图像多媒体库,但是这个是收费注册的。开源的图像库也不少,比如:ImageStone、GIMP、CxImage等,虽然它们的功能没有...
  • word技巧

    千次阅读 2018-03-01 21:40:22
    word 高效经典教程(整理版)目录一分钟驾驭word 高效经典教程(整理版)... 6A、基础知识... 61、度量单位... 62、WORD中文字字号与磅的对应关系... 63、字体文件格式... 7B、文本编辑... 71、快速移动文档... 72、...
  • 29. 在横向滚动条上按下鼠标,并向右滑动小段距离,以滚动当前文档的显示区域。  30. 依次点击[窗口 > 排列 > 匹配位置]命令,将其它文档的滚动位置,匹配当前文档的滚动位置。  31.  32.  33. 接着依次点击...
  • 嵌入页面的几种方法

    千次阅读 2016-12-03 08:23:11
    ---- 如果想在嵌入的外部页面过长时不出现滚动条,在外部文件标签中加入“scroll=no”或者在宿主页面标签中加入“scrolling=no”即可。 ---- 但这样做会出现一个问题,就是宿主页面和外部页面背景色不同
  • net嵌入页面的几种方法

    千次阅读 2016-08-28 11:09:15
    一....---- 要在宿主页面中嵌入外部页面的方法是,在宿主页面中包含外部页面的位置插入“”语句即可(注意: 标签中的各种属性含义请...---- 如果想在嵌入的外部页面过长时不出现滚动条,在外部文件标签中加入
  • 前端的几种特殊样式

    2013-05-05 00:23:48
    1:在DIV出现滚动条  在DIV上应用此样式即可(颜色可以根据具体情况进行调节) .scroll  {  WIDTH: 120px;  HEIGHT: 140px;  overFlow-x: hidden;  overFlow-y: scroll;   scrollbar-3dlight-c
  • 几种图像处理库的研究

    千次阅读 2010-07-31 11:57:00
    LEADTOOLS,ImageStone等几种图像处理库的介绍
  • Word 2016使用技巧

    千次阅读 2017-11-19 13:08:03
    Word 2016使用技巧 Word 2016提供了更简单的云端共享和协作方式,协作编辑文档更加方便。在版本历史记录中可找到每次修改的记录,并可与当前文档进行对比。智能查找可让您在无需离开Word窗口的情况下,利用互联网...
  • WORD经典实用!

    千次阅读 2016-07-21 17:30:31
    WORD经典实用!较全面!
  • word使用技巧

    2014-01-14 10:53:09
    说明:“^c”的意思就是指令WordXP以剪贴板中的内容替换“查找内容”框中的内 容。按此原理,“^c”还可替换包括回车符在内的任何可以复制到剪贴板的可视内容,甚至Excel表格。 三招去掉页眉那
  • 关于textView收回键盘的几种方法

    千次阅读 2015-09-12 19:19:58
    1.如果你程序是导航的,可以在导航上面加多一个Done的按钮,用来退出键盘,当然要先实UITextViewDelegate。 代码如下: - (void)textViewDidBeginEditing:(UITextView *)textView { UIBarButtonItem *...
  • 说明:“^c”的意思就是指令Word XP以剪贴板中的内容替换“查找内容”框中的内 容。按此原理,“^c”还可替换包括回车符在内的任何可以复制到剪贴板的可视内容,甚至Excel表格。 三招去掉页眉那

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,410
精华内容 4,964
关键字:

word有几种滚动条