CSS: custom web page Link underline _ CSS/HTML

CSS: custom web page Link underline CSS does not directly provide the function of transforming HTML link underline, but we can still enrich the monotonous Web Page Link underline by using some techniques.

I. Basic Principles

First, the first step to customize the HTML link underline is to create a graph. Repeat the graph in the horizontal direction to form the underline effect. If you want to display the background image of the web page behind the canvas, you can use a transparent. GIF image.

Second, if the height of an underline image is large, you must increase the height of the text so that there is a large space between the bottom of a line of text and the top of the next line of text, for example, p {line-height: 1.5 ;}.

Example of custom link underline

Third, to display the custom underline, the default underline must be hidden, that is, a {text-decoration: none ;}.

Fourth, set an underline for the link element to create a custom underline. If the underline image is underline.gif, set the CSS code of the underline image to a {background-image: url(underline.gif );}.

Fifth, we need to repeat the underline image in the horizontal direction, but we cannot repeat it in the vertical direction. Otherwise, it will be hidden behind the text. The code that requires the underline to appear only in the horizontal direction is: a {background-repeat: repeat-x ;}.

Sixth, to ensure that the image appears below the link text (regardless of the font size), use the background-position attribute to place the image at the bottom of the link element. For underline images such as arrows, you may also need to consider the horizontal alignment of the image. If you want to place the underline image in the lower right corner, the CSS code is: a {background-position: 100% 100% ;}.

7. In order to leave space for the custom image below the link text, you must add appropriate spaces. The specific position of the underline image relative to the link text is related to the text size, but in general, you can first make the bottom blank equal to the height of the underline image, and adjust it if necessary. Example: a {padding-bottom: 4px ;}.

Eighth, because the underline graph is placed at the bottom of the link element, you must ensure that the link is not broken (for example, if the link is allowed to span multiple rows, only the link text in the following line will have a custom underline ). Use the white-space attribute of CSS to prevent link text from being broken, that is, a {white-space: nowrap ;}.

To sum up, a complete example of defining CSS style attributes for link elements is as follows:

A {
Text-decoration: none;
Background: url(underline.gif) repeat-x 100% 100%;
Padding-bottom: 4px;
White-space: nowrap;
}

If you want to make the custom underline appear only when the mouse stays, you only need to change the CSS background attribute directly set on the Link element to hover, for example:

A {
Text-decoration: none;
Padding-bottom: 4px;
White-space: nowrap;
}

A: hover {
Background: url(underline.gif) repeat-x 100% 100%;
}

Ii. instance Appreciation

Assume that there are two line chart diagonal.gif( flofloflower.gif (flower). The height and width of the former are 3 and 9, and the height and width of the latter are 11 and 15. The following is a complete example of setting two kinds of underscores:

Example of custom link underline

The source code of the webpage is as follows:
Note: diagonal.gif and flower.gif have been first copied to the same directory where the webpage is located.

　　
　　
　　 Ex

　　
　　

　　

　　

Instance:

　　

Static underline,
The broken line that appears when the mouse stays.

　　

Static flower underline,
The flower underline that appears when the mouse stays.