Overflow processing application of HTML tags_HTML/Xhtml_Web page production-HTML Tutorial-php.cn

Use CSS to decorate scroll bars
1. Overflow Settings when content overflows

overflow-x Settings when horizontal content overflows
overflow-y Settings when vertical content overflows
The values set by the above three attributes are visible (default value ), scroll, hidden, auto.

2． scrollbar-3d-light-color The color of the bright edge of the three-dimensional scroll bar
scrollbar-arrow-colorThe color of the triangular arrows on the up and down buttons
scrollbar-base-colorThe basic color of the scroll bar
scrollbar-dark-shadow -color The color of the strong shadow of the three-dimensional scroll bar
scrollbar-face-color The color of the protruding part of the three-dimensional scroll bar
scrollbar-highlight-color The color of the blank part of the scroll bar
scrollbar-shadow-color The three-dimensional scroll bar Shadow color
The values set by the above seven attributes are all color values, and various expressions defined by the style sheet can be used.

Using the above style definition content, we can specify whether the scroll bar of the browser window and multi-line text box is displayed and the color style. The first set of style attributes is used to set whether the set object is displayed. Scroll bar, the second set of style attributes is used to set the color of the scroll bar. It should be noted that the style attributes involved in this article are only supported by IE. The second set of style attributes can only be supported by IE5.5 version, so please Pay attention when debugging.

We explain the above style attributes through several examples:

1. Let the browser window never have scroll bars
No horizontal scroll bars

No vertical scroll bar

No scroll bar
or

2. Set the scroll bar of the multi-line text box
There is no horizontal scroll bar

Copy code

The code is as follows:

No vertical scroll bar

Copy code

The code is as follows:

No scrollbar

Copy code

The code is as follows:

Copy code

The code is as follows:

3. Set the color of the window scroll bar
Set the color of the window scroll bar to red
scrollbar-base-color sets the basic color. Generally, you only need to set this attribute to change the scroll bar color.
Add a little special effect:

Copy the code

The code is as follows:

< body style= "scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon ">

4. When setting other elements, it is basically the same. You'd better set it in the style sheet Define a class in the file so you can reuse it.

Copy code

The code is as follows:

.coolscrollbar
{
scrollbar-arrow-color:yellow;
scrollbar-base-color:lightsalmon;
}

Add the above statement to the style sheet file or the