In addition to text, images, tables, and forms, there are many elements in pages and browsers. We will introduce these elements one by one; this time we will introduce rich hyperlink effects, mouse effects, and page scroll bars.
In the rich special hyperlink effects, we will first introduce the dynamic hyperlink. Let's take a look:
The Code is as follows:
<HTML>In the code, a table tag is used to separate the banner in the page, and a table tag is used to separate a menu in a horizontal arrangement to achieve a beautiful browsing effect. It is worth noting that a: Link, A: visited, and a: hover respectively set the dynamic hyperlink effect.
Next let's take a look at the dedicated hyperlink: Let's take a look at this effect:
These hyperlinks have grown into buttons. When the mouse moves up, they are changed separately. How can they be implemented in CSS:
<HTML>First, a mark a is used to set the entire button. A: link and a: visited use the same settings, here, border-top and border-left use the same color. Border-bottom and border-right use the same color, which achieves a shadow effect; the clever replacement of these two colors in hover gives us the feeling that they are the same as what they are.
Let's continue to see the embossed hyperlink: Let's take a look at the effect:
The embossed button seems to be on the paper. When the mouse is put up, its changes are more beautiful than the button just now. How can this be achieved:
<HTML>The body is still very simple. A table, a banner, and countless A tags are side by side, indicating hyperlinks. The key point is, set this horizontal table tag to a background image, table. banner repeats a small image.
Let's look at the CSS control mouse Arrow: Let's look at this effect:
Let's take a look at the Code:
<HTML>We have set a class for the help button, cursor: Help. Of course, he has many values, not only help. You can try it on your own.
Page scroll bar: Let's take a look at the effect. This scroll bar is no longer the default Effect of IE, but a very brilliant blue color. we narrow down the page and we can see that the scroll bar on the right is also changing. Let's take a look at the Code:
<HTML>The code is very simple: scrollbar has many attributes, so you can try it on your own.
The effect is as follows:
Next we will continue to improve our blog, so stay tuned.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
