Dreamweaver MX 2004 implements one page two connection styles

dreamweaver| page

Many people may have learned how to make link text changes with the mouse click state of the effect, this is the use of CSS, you may only know how to set a state, such as the mouse over the text, text into red. But this is the whole page is so uniform effect, but there is no way in a page has a variety of effects? For example, there are two text links on the page, and we think one of them is red when the mouse is on, and the other is yellow. The answer is yes. If the handwriting code, it is only a few lines. Given that most people are using Dreamweaver now, let's talk about how to do this in Dreamweaver MX 2004.

1, start Dreamweaver MX 2004 First, then create a new HTML file, do two text with the connection.

2, press SHIFT+F11, open the CSS Styles Control Panel, a new CSS style, you need to note that your selector type is: Advanced (ID, context selector, etc.), and then select selector a:hover, and did not appear on the image of the effect In fact, the trick is here! We manually change the a:hove to A.one:hove, that is, add a point and a name after a (can be any English, not a number). Set up after the point OK. The following figure:

3: In the pop-up A. One:hover CSS Style Definition dialog box to set the effect you want, here we choose the font color is red. Set the point "OK" when you are finished. The following figure:

4, repeat the 2nd, 3 steps, the 2nd step need to modify the place is the A.one:hover back to A:hover (is directly selected A:hover can be. The 3rd step is to change the color of the font, we set to yellow.

5, now the preview has no effect, we still need to move a little surgery, we look at the settings after the CSS styles Control Panel, the following figure:

6, in the selection of the page you want to when the mouse to put up the time is red link text, and then in the CSS style panel with the right mouse click A.one:hover, and then select Apply. The following figure:

7: Previewing your page now has two effects.

Summary: According to the above logic, we can make an infinite text link effect, the key is a:hover a:active a:link a:visited Modification, the previous introduction is only a:hover, in fact, the other three can. As long as the reference to the 2nd step of the settings can be easily done. Finally, we are asked to make a Web page can not only learn to design tools (Dreamweaver and other design software) even if learned to make the Web page, the key is that we must understand the code. At this point we can open the Code view to see the effect: