Proficient in Css+div Web page style and layout--page and browser elements

In the page and browser, in addition to text, pictures, forms, forms, and so on, there are a lot of different elements, in the previous blog, the small part of the main simple introduction of how to set up the table and form in CSS, today's small series mainly introduce a rich hyperlink effect, mouse effects, page scroll bar. First, let's look at a mind map:

Then, the small series will follow the footsteps of the above mind map, slowly explore, rich hyperlink effects, we first introduce dynamic hyperlinks, we look at the example code and the effect of running:

Dynamic Hyperlinks

<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >
The effect of the operation is as follows:
To analyze the above code, it is easy to see that a table tag is separated from the banner in the page, followed by a table tag that will be a horizontal menu for a beautiful viewing effect. Here we deserve: A:link, a:visited, a:hover to set the effect of dynamic hyperlinks. Let's take a look at the button-style hyperlinks, and we'll look at the example code and the effect
 Push-button Hyperlinks
<span style= "FONT-SIZE:18PX;" >The results are as follows:

These hyperlinks grow into buttons, and when the mouse is moved up, the changes are made, so how does he implement it in CSS? Let us analyze the code, first a mark, she is the whole button is unified set; A:link and a:visited adopt the same setting, where Border-top and border-left use the same color, Border-bottom and border-right Use the same color, which realizes a kind of shadow effect, and in the hover to subtly replace the two colors, giving a feeling like a button, we continue to look at the relief hyperlink, we look at the example code and the effect of running:
 emboss Hyperlink
<span style= "FONT-SIZE:18PX;" >the effect of the operation is as follows:

Embossed button seems to be surfaced, when the mouse on the time, her change than the button to the more brilliant, analysis of our code, the body part is still very simple, a table, a banner, and then a number of a tag side-by, that is, the hyperlink, the focus is, This horizontal table marker is set to a background image, table.banner a small picture. Let's look at the CSS control mouse arrows to see our example code and run the effect:
 CSS Control mouse arrows
<span style= "FONT-SIZE:18PX;" >the effect of the operation is as follows:
When we point the mouse to help, the top right corner of the mouse will appear a small question mark, we help this button to set a separate class class, Cursor:help, of course, she has a lot of value, not only helps. Small partners can try it on their own. Finally, let's look at a page scroll bar example code and run effect:
 page scroll bar
<span style= "FONT-SIZE:18PX;" >The results are as follows:
As shown in the running effect, this scroll bar is no longer the default effect of IE, but a very beautiful blue; we will reduce the page, also see the right scroll bar is also changing, the code is very simple, ScrollBar has a lot of properties, the small partners can try their own hands.
Small Editor's note: The main article is a simple introduction of the CSS on how to set up the page and browser related knowledge points, a total of three sections for detailed introduction, including hyperlink effects, CSS Control mouse arrows, page scroll bar, which details the hyperlink effect, Hyperlink effects include dynamic hyperlinks, push-button hyperlinks, and embossed hyperlinks, in which we first separate a table tag from the banner in the page, followed by a table tag that will be a horizontal menu for a beautiful viewing effect. Here we worth is: A:link, a:visited, a:hover to set the effect of the dynamic Hyperlink, button-type connection first a mark, she is the whole button is unified settings; A:link and a:visited adopt the same settings, The side of the Border-top and border-left used the same color, border-bottom and border-right used the same color, which achieved a shadow effect, and in hover clever to replace the two colors, Give a feeling like a button; the final emboss joins a table, a banner, and then countless a-markers side-by-end, representing hyperlinks, with the emphasis on setting the horizontal table marker as a background image. Table.banner will be a small picture to repeat, the content of the CSS is not difficult, difficult on whether you really hands to time, BS study, not to be continued ...
Proficient in Css+div Web page style and layout--page and browser elements